The following post is how to use the Javascript Google Maps API without paying money or giving financial information to Google to get an API key. This method works as of 13 August 2018. If the method no longer works, kindly inform me in the comments section 🙂

For more information on how Google maps website imbed works, visit Google’s documentation.




The code below is to display a Google map on a webpage with pins at certain lat/long positions. The key to getting the map to not show in developmental mode is to include the api key query string in the URL but leave it blank. If the query string is not included, there will be a JS error and the map will show in developmental mode. You can copy and paste the code below to include a google map on your production site without any issues.


<!-- The ?key= query below is left blank, which allows the map to still be displayed without developmental mode restrictions. -->
<script src="https://maps.google.com/maps/api/js?key=&amp;sensor=false" type="text/javascript"></script>

<!-- Anything capitalized and surrounded in ** should be replaced with your values. 
This is for the addresses and lat/longs you wish to include on the map. -->
<div id="map" style="height: 400px; width: 500px;"></div>
    <script type="text/javascript">
        var locations = [
            [*ADDRESS*, *LATITUDE*, *LONGITUDE*,2],
        ];

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: new google.maps.LatLng(*LAT*, *LONG*),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
          });

        }
      </script>




This code should generate a map that looks like the one to the left (or above on mobile). If your map has a translucent gray layer over it and the map is not scrollable, then the map is in development mode and something went wrong. Leave a question in the comments section if you need help or have any suggestions. For more information on the google maps code, visit Google Maps Documentation.