Programster's Blog

Tutorials focusing on Linux, programming, and open-source

Getting Started With Google Maps

google-maps mapping

This tiny tutorial aims to get you started with putting google maps on your own sites. In this example, we will show you how to create a map that is centered on a point that you have put a marker on. In this case we are marking the location of Big Ben.

Steps

Create a text file with the .html extension and copy/paste the following code into it before saving.

<!DOCTYPE html>
<html>
    <head>
        <style>
            #map {
                height: 500px;
                width: 90%;
                border: 1px solid black;
                margin-left: auto;
                margin-right: auto;
            }
        </style>
        <script async defer src="https://maps.googleapis.com/maps/api/js?&callback=initMap"></script>
    </head>
    <body>
        <h1>Google Maps - Hello World</h1>
        <div id="map"></div>
        
        <script>
        function initMap() 
        {
            var bigBenLocation = {
                "lat": 51.5007,
                "lng": -0.1246 // west is negative
            };
            
            var mapConfig = {
                "zoom": 10,
                "center": bigBenLocation
            };
            
            var map = new google.maps.Map(document.getElementById('map'), mapConfig);
            
            var markerConfig = {
                "position": bigBenLocation,
                "map": map
            };
            
            var marker = new google.maps.Marker(markerConfig);
        }
        </script>
    </body>
</html>

If you were to double click that file now, you would see the map of big ben. Let me explain a few key points in that script.

External Script - Async and Defer

You will notice that in the head, there is the loading of an external script in the head of the document:

&lt;script async defer src=&quot;https://maps.googleapis.com/maps/api/js?&amp;callback=initMap&quot;&gt;&lt;/script&gt;

This uses the keywords async and defer. The async keyword means that the browser will fetch that script in the background whilst it continues to parse over the rest of the documnent. This results in your site saving time loading more quickly, especialy for people on slower internet connections. Normally, with the async keyword, the parser would start executing the script as soon as it had been fetched, however, we have the defer keyword as well. The defer keyword ensures that the script is run at the end after everything else has loaded. We need this becuause you will notice that a callback variable with the name of our function to initialze the map had been given to it. If the parser had stopped to load and then execute the script, then it would have failed because the callback would not have been defined yet. If we had just had just used async with no defer, there would have been a race-condition in which the page would only sometimes work because the script was executed after our callback function had been defined. If the script loading was fast enough then the call to initMap would fail.

Using Your Own Locations

I have set the location I want to mark and center upon with bigBenLocation. If you want to set a different location, you can google things like "sydney lat long" to get the latitude and longitude of locations to swap out in this code. Just bear in mind that the results will say "north" and "south" as well as "east" and "west" instead of using negative values. North and east are positive, whilst south and west need to use a negative value.

API keys

You're supposed to use an API key when working with google maps but this tutorial works for now without them. If you have a google maps API key, please swap out the external script src attribute with:

src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap

Hopefully the rest of the codebase is self-explanatory with how I broke it up.

References

Last updated: 16th August 2018
First published: 16th August 2018