Google Maps

Google provide a JavaScript API that can be used to place Google maps into a webpage. You need to have a GoogleMap API key in order to use Google Maps. Go to https://console.cloud.google.com/ to open the Google Maps "Dashboard", as highlighted below.

 

 

 

Within the DASHBOARD screen, select the "APIs & Services" menu option and then select the "Credentials" menu option, as highlighted below.

 

 

 

Within the Credentials screen, select the "API key" menu item from the "CREATE CREDENTIALS" menu to create a new key, as highlighted below.

 

 

 

Your API keys will be listed on the Credentials screen, as highlighted below.

 

 

Select the "Library" option from the "APIs & Services" menu, as highlighed below.

 

 

Within the "API Library screen", we need to enable each of the libraries that we intend to use with our Google Maps key. Enable the JavaScript, Places, Roads, and Directions libraries, as highlighted below.

 

 

Example of a GoogleMap (Run Example)

<!DOCTYPE html>
<html> 
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0"> 
        <title>Basic Google Map Example</title> 

        <style>
            #map
            {
                width:600px;
                height:600px;
                border:thin solid #ccc;
            }
        </style>        
        
        <!-- Google Maps -->
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE></script> 
        
        <script>
            window.onload = () =>
            {
                // These constants must start at 0
                // These constants must match the data layout in the 'locations' array below
                const CONTENT = 0,
                      LATITUDE = 1,
                      LONGITUDE = 2
                
                let locations = [
                    ["DkIT", 53.98485693, -6.39410164],
                    ["Dundalk", 54.00428271, -6.40210535],
                    ["Blackrock", 53.96251869, -6.36627104]
                ]

                let map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 12,
                    center: new google.maps.LatLng(locations[0][LATITUDE], locations[0][LONGITUDE]),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                })

                let infoWindow = new google.maps.InfoWindow()

                locations.map(location =>
                {
                    let marker = new google.maps.Marker({
                        position: new google.maps.LatLng(location[LATITUDE], location[LONGITUDE]), 
                        map: map
                    })

                    google.maps.event.addListener(marker, "click", () =>
                    {
                        infoWindow.setContent(location[CONTENT])
                        infoWindow.open(map, marker)
                    })
                })
            }
        </script>
    </head> 

    <body>
        <div id=map></div>        
    </body>
</html> 

To use the Google Maps API on your webpage, you need to include the following code. You need to use your own Google Maps key.

        <!-- Google Maps -->
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE></script> 

 

Your map can hold any number of markers. If using several markers, then the markers' names, latitudes and longtitudes can be stored in an array. The constant values CONTENT, LATITUDE and LONGITUDE are used to identify positions within the locations array. For example, CONTENT refers to element 0 for each location within the locations array

                // These constants must start at 0
                // These constants must match the data layout in the 'locations' array below
                let CONTENT = 0,
                    LATITUDE = 1,
                    LONGITUDE = 2
                
                let locations = [
                    ["DkIT", 53.98485693, -6.39410164],
                    ["Dundalk", 54.00428271, -6.40210535],
                    ["Blackrock", 53.96251869, -6.36627104]
                ]

A map is used to step through each marker, as shown below:

                locations.map(location =>
                {
                    ...
                })

The <DIV> element that will hold the map, initial centre of the map, the zoom value of the map and the map type (road, satellite, hybrid, et cetera) are set using the code below:

                let map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 12,
                    center: new google.maps.LatLng(locations[0][LATITUDE], locations[0][LONGITUDE]),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                })

An infoWindow is used to hold the content that is displayed when a user clicks on a marker. An event listerner is associated with each marker, so that the infoWindow displays the marker's content when the marker is clicked.

                let infoWindow = new google.maps.InfoWindow()

                locations.map(location =>
                {
                    let marker = new google.maps.Marker({
                        position: new google.maps.LatLng(location[LATITUDE], location[LONGITUDE]), 
                        map: map
                    })

                    google.maps.event.addListener(marker, "click", () =>
                    {
                        infoWindow.setContent(location[CONTENT])
                        infoWindow.open(map, marker)
                    })
                })

Finding Latitude and Longtitude

We can use a Google Maps Latitude and Longtitude finder below to get the values for the map markers.

http://gps.ie/gps-lat-long-finder.htm

Write code to show the location of your own home city. Scale the map, so that it includes your entire country, as shown here.

google.maps.Marker can allow markers to animate. Write code to animate the marker for your hometown, as shown here.

Write code to show text when a user hovers over a marker, as shown here.

google.maps.Marker can be changed to used different icons. Write code to place a symbol over various parking places in your own town, as shown here.

Custom Content

A marker's content can be any HTML. To create a custom marker, we replace the text content with HTML in the previous example, as shown below.

Example of a Custom Content GoogleMap (Run Example)

<!DOCTYPE html>
<html> 
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0"> 
        <title>Google Map example showing custom infoWindow</title> 

        <style>
            #map
            {
                width:600px;
                height:600px;
                border:thin solid #ccc;
            }

            #dkit-content
            {
                width:400px;
                height:200px;
            }

            #dkit-content img
            {
                clear:both;
                float:left;
                width: 150px;
                border-radius:100px;
                margin: 20px;
                margin-top:0px;
                border:thin solid #CCC;
            }
        </style>

        <!-- Google Maps -->
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE></script>  
        
        <script>
            window.onload = () =>
            {               
                // These constants must start at 0
                // These constants must match the data layout in the 'locations' array below
                const CONTENT = 0,
                      LATITUDE = 1,
                      LONGITUDE = 2
        
                let dkitContent = `<div id=dkit-content>
                                       <h1>Dundalk Institute of Technology</h1>
                                       <div id=content>
                                           <img src = images/dkit_photo.png>
                                           <p>Dundalk Institute of Technology is the best place to study computing in Ireland.</p>
                                           <p>For more information, see our website<br><a href=http://www.dkit.ie>www.dkit.ie</a></p>
                                       </div>
                                   </div>`
        
                let locations = [
                    [dkitContent, 53.98485693, -6.39410164],
                    ["Dundalk", 54.00428271, -6.40210535],
                    ["Blackrock", 53.96251869, -6.36627104]
                ]

                let map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 12,
                    center: new google.maps.LatLng(locations[0][LATITUDE], locations[0][LONGITUDE]),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                })

                let infoWindow = new google.maps.InfoWindow()

                locations.map(location =>
                {
                    let marker = new google.maps.Marker({
                        position: new google.maps.LatLng(location[LATITUDE], location[LONGITUDE]),
                        map: map
                    })

                    google.maps.event.addListener(marker, "click", () =>
                    {
                        infoWindow.setContent(location[CONTENT])
                        infoWindow.open(map, marker)
                    })
                })
            }
        </script>
    </head> 

    <body>
        <div id=map></div>        

        <p>Click on the DkIT marker to see an example of a custom marker.</p>       
    </body>
</html> 

The marker's HTML content is placed into a string called dkitContent.

                let dkitContent = `<div id=dkit-content>
                                       <h1>Dundalk Institute of Technology</h1>
                                       <div id=content>
                                           <img src = images/dkit_photo.png>
                                           <p>Dundalk Institute of Technology is the best place to study computing in Ireland.</p>
                                           <p>For more information, see our website<br><a href=http://www.dkit.ie>www.dkit.ie</a></p>
                                       </div>
                                   </div>`

The style of the content can be set in the normal way using style sheets, as shown in the code below:

            #dkit-content
            {
                width:400px;
                height:200px;
            }

            #dkit-content img
            {
                clear:both;
                float:left;
                width: 150px;
                border-radius:100px;
                margin: 20px;
                margin-top:0px;
                border:thin solid #CCC;
            }

Make your own cutom content for a marker. Do not copy the design from the example above.

Create custom content that displays a marker's content in a speech bubble, as shown here. Hint: Search the www to see how you can replace the "google.maps.InfoWindow" with custom content.

Amend the example above to dynamically load the marker details from a JSON file, as shown here.

Hiding Points of Interest

By default, Google Maps shows points of interest along with any markers that the user adds to a map. Using the code below, we can hide the points of interest on a map.

Example hiding points of interest on a map (Run Example)

<!DOCTYPE html>
<html> 
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0"> 
        <title>Google Map example showing hidden Points of Interest</title> 

        <style>
            #map
            {
                width:600px;
                height:600px;
                border:thin solid #ccc;
            }
        </style>

        <!-- Google Maps -->
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE></script> 
        
        <script>
            window.onload = () =>
            {
                let dkitLocation = {lat:53.98485693, lng:-6.39410164}
                       

                let map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 16,
                    center: dkitLocation,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControlOptions: {
                        mapTypeIds: ["roadmap", "satellite", "hide_poi"]
                    }
                })

                hidePointsOfInterest(map)

                let infoWindow = new google.maps.InfoWindow()

 
                let marker = new google.maps.Marker({
                    position: dkitLocation,
                    map: map
                })

                google.maps.event.addListener(marker, "click", () =>
                {
                    infoWindow.setContent("DkIT")
                    infoWindow.open(map, marker)
                })

            }


            function hidePointsOfInterest(map)
            {
                let styles = [
                    {
                        "featureType": "poi",
                        "stylers": [{"visibility": "off"}]
                    }
                ]

                let styledMapType = new google.maps.StyledMapType(styles, {name: "POI Hidden", alt: "Hide Points of Interest"})
                map.mapTypes.set("hide_poi", styledMapType)
                
                map.setMapTypeId("hide_poi")
            }
        </script>
    </head> 

    <body>
        <div id=map></div>

        <p>Use the "Map", "Satellite" and "Hide POI" buttons to show or hide points of interest on the map.</p>        
    </body>
</html> 

The mapTypeControlOptions property holds the list of the map types that can be viewed for a given map. In the code below, "roadmap" and "satellite" are system-defined map types, and "hide_poi" is a user-defined map type.

                let map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 16,
                    center: dkitLocation,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControlOptions: {
                        mapTypeIds: ["roadmap", "satellite", "hide_poi"]
                    }
                })

The hidePointsOfInterest() method is a user-defined function that will hide the points of interest.

            function hidePointsOfInterest(map)

The value styles is an array of JSON objects that can be used to specify the look-and-feel of various map features. In the code below, styles specifies that points of interest will not be visible.

The styles are applied to a styledMapType, which is then associated with a mapType called "hide_poi".

Finally, the setMapTypeId("hide_poi") method sets the map to use the "hide_poi" map type.

            function hidePointsOfInterest(map)
            {
                let styles = [
                    {
                        "featureType": "poi",
                        "stylers": [{"visibility": "off"}]
                    }
                ]

                let styledMapType = new google.maps.StyledMapType(styles, {name: "POI Hidden", alt: "Hide Points of Interest"})
                map.mapTypes.set("hide_poi", styledMapType)
                
                map.setMapTypeId("hide_poi")
            }

The above example shows bus stops. Amend the above code so that Points of Interest and bus stops are hidden, as shown here.

Amend the code above, so that country and county borders are coloured red, as shown here.

Write code to only show the parking places near where you live. When the map initially displays, it should hide the points of interest. The user should be allowed to switch between hidden Points of Interest, road map and hybrid map, as shown here.

Change the code from the example above, so that the user is not allowed to choose which type of map they want to see. Instead, they can only see the map with hidden Points of Interest and hidden bus stops, as shown here.

Nearby Services

By default, Google Maps shows a list of nearby services, such as hotels, cafes and banks. Using the services API, it is possible to search for specific types of place or individual places. In order to use the services API, we need to add &libraries=places along with our key when including the script for Google Maps API.

<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE&libraries=places"></script>

 

We can filter the nearby services to only include specific services, such as cafes.

Example showing nearby cafes (Run Example)

<!DOCTYPE html>
<html> 
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0"> 
        <title>Google Maps local services example</title> 

        <style>
            #map
            {
                width:600px;
                height:600px;
                border:thin solid #ccc;
            }
        </style>


        <!-- Google Maps -->
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE&libraries=places></script> 
        
        <script>
            let map = null
            window.onload = () =>
            {
                let services_centre_location = {lat: 54.00428271, lng: -6.40210535}  // Dundalk

                map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 17,
                    center: new google.maps.LatLng(services_centre_location),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControlOptions: {
                        mapTypeIds: ["roadmap", "hide_poi"]
                    }
                })

                hidePointsOfInterest(map)

                let service = new google.maps.places.PlacesService(map)

                service.nearbySearch({
                    location: services_centre_location, // centre of the search
                    radius: 500, // radius (in metres) of the search
                    type: "cafe"
                }, getNearbyServicesMarkers)
            }


            function getNearbyServicesMarkers(results, status)
            {
                if (status === google.maps.places.PlacesServiceStatus.OK)
                {
                    results.map(result =>
                    {
                        createMarker(result)
                    })
                }
            }


            let infoWindow = new google.maps.InfoWindow()
            function createMarker(place)
            {
                let icon = {
                    url: place.icon, // url
                    scaledSize: new google.maps.Size(30, 30) // scale the image to an icon size
                }
                
                let marker = new google.maps.Marker({
                    map: map,
                    icon: icon,
                    position: place.geometry.location
                })

                google.maps.event.addListener(marker, "click", () =>
                {
                    infoWindow.setContent(place.name)
                    infoWindow.open(map, marker)
                })
            }


            function hidePointsOfInterest(map)
            {
                let styles = [
                    {
                        "featureType": "poi",
                        "stylers": [{"visibility": "off"}]
                    }
                ]

                let styledMapType = new google.maps.StyledMapType(styles, {name: "POI Hidden", alt: "Hide Points of Interest"})
                map.mapTypes.set("hide_poi", styledMapType)

                map.setMapTypeId("hide_poi")
            }
        </script>
    </head> 

    <body>
        <div id=map></div>

        <p>Show all cafes in Dundalk</p>
        <p>If you click on a marker, it will show the name of the business. It will not show any other details of the business.</p>       
    </body>
</html>

The nearbySearch() method is determined by a set of PlaceSearchRequest properties (in this example: location, radius and type). In this example, the search will prioritise cafes that are within a 500m radius of location.
The full set of PlaceSearchRequest properties are available at https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceSearchRequest

                let service = new google.maps.places.PlacesService(map)

                service.nearbySearch({
                    location: services_centre_location, // centre of the search
                    radius: 500, // radius (in metres) of the search
                    type: "cafe"
                }, getNearbyServicesMarkers)

The results of the search are passed to the getNearbyServicesMarkers() function. In the code below, the results are used to create markers.

            function getNearbyServicesMarkers(results, status)
            {
                if (status === google.maps.places.PlacesServiceStatus.OK)
                {
                    results.map(result =>
                    {
                        createMarker(result)
                    })
                }
            }

The code above uses service.nearbySearch() to select the places that will be displayed on the map. We can use service.textSearch() instead of using service.nearbySearch(), as shown here. Write code to do this. Compare the results of using service.nearbySearch() and service.textSearch().

Investigate online to find out when we should we use service.nearbySearch() and when should be use service.textSearch().

The code above searches against type:"cafe" to select the places that will be displayed on the map. We can search by keyword instead of type as shown here. Write code to do this. Compare the results of searching by type and keyword.

We can use the findPlaceFromQuery() method to search by name for a particular place, as shown here. Write code to do this.

We can use the findPlaceFromPhoneNumber() method to search by phone number for a particular place, as shown here. Write code to do this.

In the code above, Google Maps provides a default icon for the "cafe" marker. It is possible to use any image as a marker. Change the example code above so that it uses an image file as the "cafe" marker, as shown here.

In the code above, Google Maps provides a default icon for the "cafe" marker. It is possible to use Base64 to embed a marker's image inside the code. Change the example code above so that it uses a Base64 image as the "cafe" marker, as shown here.

Write code to only show the schools that are close by when the map is clicked, as shown here.

Amend the code from the previous question to allow the user to choose to display either cafes or schools, as shown here.

We can display the details of a Google Maps marker when the marker is clicked.

Example that displays some details of a clicked marker (Run Example)

<!DOCTYPE html>
<html> 
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0"> 
        <title>Google Maps local services details example</title> 

        <style>
            #map
            {
                width:600px;
                height:600px;
                border:thin solid #ccc;
            }
        </style>
                
        <!-- Google Maps -->
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE&libraries=places></script> 
        
        <script>
            let service
            let map

            window.onload = () =>
            {
                let services_centre_location = {lat: 54.00428271, lng: -6.40210535}  // Dundalk

                map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 17,
                    center: new google.maps.LatLng(services_centre_location),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControlOptions: {
                        mapTypeIds: ["roadmap", "hide_poi"]
                    }
                })

                hidePointsOfInterest(map)

                service = new google.maps.places.PlacesService(map)

                service.nearbySearch({
                    location: services_centre_location, // centre of the search
                    radius: 500, // radius (in metres) of the search
                    type: "cafe"
                }, getNearbyServicesMarkers)
            }


            function getNearbyServicesMarkers(results, status)
            {
                if (status === google.maps.places.PlacesServiceStatus.OK)
                {
                    results.map(result =>
                    {
                        createMarker(result)
                    })
                }
            }


            let infoWindow = new google.maps.InfoWindow()
            function createMarker(place)
            {
                let icon = {
                    url: place.icon, // url
                    scaledSize: new google.maps.Size(30, 30), // scale the image to an icon size
                }

                let marker = new google.maps.Marker({
                    map: map,
                    icon: icon,
                    position: place.geometry.location
                })

                google.maps.event.addListener(marker, "click", () =>
                {
                    request = {
                        placeId: place.place_id,
                        fields: ["name", "formatted_address", "place_id", "international_phone_number", "icon", "geometry"],
                    };
                    service.getDetails(request, (placeDetails) => infoWindow.setContent("<p><strong>" + placeDetails.name + "</strong><br>" + placeDetails.formatted_address + "</br>" + placeDetails.international_phone_number + "</p>"))

                    infoWindow.open(map, marker)
                })
            }


            function hidePointsOfInterest(map)
            {
                let styles = [
                    {
                        "featureType": "poi",
                        "stylers": [{"visibility": "off"}]
                    }
                ]

                let styledMapType = new google.maps.StyledMapType(styles, {name: "POI Hidden", alt: "Hide Points of Interest"})
                map.mapTypes.set("hide_poi", styledMapType)

                map.setMapTypeId("hide_poi")
            }
        </script>  
    </head> 

    <body>
        <div id=map></div>

        <p>Show all cafes in Dundalk</p>
        <p>If you click on a marker, it will show the name (in bold), address and phone number of the business</p>
    </body>
</html> 

A marker is created for each result from the nearbySearch().

The default icon for a given place is held in place.icon

The result (i.e. place in the createMarker() method) contains limited details about a given place. The full set of details for a given place are available by calling the getDetails() method. We pass a query to getDetails() with placeId and fields properties. The fields property contains a list of the fields that we want returned in the search result (in our example, we return "name", "formatted_address", "place_id", "international_phone_number", "icon", and "geometry").

            function getNearbyServicesMarkers(results, status)
            {
                if (status === google.maps.places.PlacesServiceStatus.OK)
                {
                    results.map(result =>
                    {
                        createMarker(result)
                    })
                }
            }


            let infoWindow = new google.maps.InfoWindow()
            function createMarker(place)
            {
                let icon = {
                    url: place.icon, // url
                    scaledSize: new google.maps.Size(30, 30), // scale the image to an icon size
                }

                let marker = new google.maps.Marker({
                    map: map,
                    icon: icon,
                    position: place.geometry.location
                })

                google.maps.event.addListener(marker, "click", () =>
                {
                    request = {
                        placeId: place.place_id,
                        fields: ["name", "formatted_address", "place_id", "international_phone_number", "icon", "geometry"],
                    };
                    service.getDetails(request, (placeDetails) => infoWindow.setContent("<p><strong>" + placeDetails.name + "</strong><br>" + placeDetails.formatted_address + "</br>" + placeDetails.international_phone_number + "</p>"))

                    infoWindow.open(map, marker)
                })
            }

Why should you only return the fields that you need when you call getDetails().

Amend the above code, so that the address is separated over several lines and the phone number is formatted as a local phone number, as shown here.

Amend the avobe code, so that a photo is displayed between the name and address, as shown here.

Route Planner

The Google Maps DirectionsService object can be used to calculate and display the route between two points. An example route planner is shown below.

Example of a Route Planner (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0">
        <title>Google Maps Route Finder example</title>

        <style>
            #map 
            {
                width:100%;
                height:600px;
                border:thin solid #CCC;
            }

            #control-panel
            {
                background-color: #fff;
                margin-bottom:50px;
            }
            
            .select-location-label
            {
                font-weight:bold;
                min-width:40px;
                display:inline-block;
            }             
        </style>

        <!-- Google Maps -->
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE></script> 
        
        <script>
            let directionsRenderer = null
        
            window.onload = () =>
            {
                let map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                })

                directionsRenderer = new google.maps.DirectionsRenderer()
                directionsRenderer.setMap(map)
                
                calculateRoute()
            }


            function calculateRoute()
            {
                let start = document.getElementById("start").value
                let end = document.getElementById("end").value

                let request = {origin: start,
                    destination: end,
                    travelMode: google.maps.TravelMode.DRIVING}

                directionsService = new google.maps.DirectionsService()
                directionsService.route(request, (route, status) =>
                {
                    if (status === google.maps.DirectionsStatus.OK)
                    {
                        directionsRenderer.setDirections(route)
                    }
                })
            }
        </script>
    </head>

    <body>
        <div id=control-panel>
            <span class=select-location-label>Start:</span>
            <select id=start onChange=calculateRoute()>
                <option value=Dundalk Institute of Technology Louth Ireland>DkIT</option>
                <option value="Dublin City University Collins Avenue Extension Whitehall Dublin 9">DCU</option>
                <option value="Maynooth University Ireland">Maynooth</option>
                <option value="Queens University Belfast">Queens</option>                 
            </select>

            <br>
            <span class=select-location-label>End:</span>
            <select id=end onChange=calculateRoute()>
                <option value=Dundalk Institute of Technology Louth Ireland>DkIT</option>
                <option value="Dublin City University Collins Avenue Extension Whitehall Dublin 9" selected>DCU</option>
                <option value="Maynooth University Ireland">Maynooth</option>
                <option value="Queens University Belfast">Queens</option>                 
            </select>
        </div>

        <div id=map></div>           
    </body>
</html> 

As directionsRenderer is being used in two different functions, it needs to be made global to the webpage.

            let directionsRenderer = null

The value directionsRenderer is a google.maps.DirectionsRenderer(). This will allow it to render a route on top of another map.

The code directionsRenderer.setMap(map) identifies the map that the directionsRenderer will be rendered on top of.

            window.onload = () =>
            {
                let map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                })

                directionsRenderer = new google.maps.DirectionsRenderer()
                directionsRenderer.setMap(map)
                
                calculateRoute()
            }

The start and end variables are taking from the HTML <SELECT> elements.

The request parameter that is passed into directionsService includes start and end.

directionsService uses start and end to calculate the route. The route is used to set the directions of directionsRenderer, which will be overlayed onto the map that was previously associated with routOverlay.

            function calculateRoute()
            {
                let start = document.getElementById("start").value
                let end = document.getElementById("end").value

                let request = {origin: start,
                    destination: end,
                    travelMode: google.maps.TravelMode.DRIVING}

                directionsService = new google.maps.DirectionsService()
                directionsService.route(request, (route, status) =>
                {
                    if (status === google.maps.DirectionsStatus.OK)
                    {
                        directionsRenderer.setDirections(route)
                    }
                })
            }

Adjust the code above, so that the user can type in the start and end locations using the Google Maps API predictive place names, as shown here.

Route Planner with Directions

GoogleMaps API provides can provide text directions for a Route Planner. The code below will output a route's text directions into the div called directions.


directionsRenderer.setPanel(document.getElementById("directions"))

Example of a Route Planner with text directions (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0">
        <title>Google Maps Route Finder example</title>

        <style>
            #map 
            {
                width:100%;
                height:600px;
                border:thin solid #CCC;
            }

            #control-panel
            {
                background-color: #fff;
                margin-bottom:50px;
            }
            
            .select-location-label
            {
                font-weight:bold;
                min-width:40px;
                display:inline-block;
            }     
            
            #directions
            {
                width:100%;
                margin:0px;
                margin-top:20px;
                margin-bottom:50px;
            }            
        </style>

        <!-- Google Maps -->
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE></script> 
        
        <script>
            let directionsRenderer = null
        
            window.onload = () =>
            {
                let map = new google.maps.Map(document.getElementById("map"), {
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                })

                directionsRenderer = new google.maps.DirectionsRenderer()
                directionsRenderer.setMap(map)

                directionsRenderer.setPanel(document.getElementById("directions"))
           
                calculateRoute()
            }


            function calculateRoute()
            {
                let start = document.getElementById("start").value
                let end = document.getElementById("end").value

                let request = {origin: start,
                    destination: end,
                    travelMode: google.maps.TravelMode.DRIVING}

                directionsService = new google.maps.DirectionsService()
                directionsService.route(request, (route, status) =>
                {
                    if (status === google.maps.DirectionsStatus.OK)
                    {
                        directionsRenderer.setDirections(route)
                    }
                })
            }
        </script>
    </head>

    <body>
        <div id=control-panel>
            <span class=select-location-label>Start:</span>
            <select id=start onChange=calculateRoute()>
                <option value=Dundalk Institute of Technology Louth Ireland>DkIT</option>
                <option value="Dublin City University Collins Avenue Extension Whitehall Dublin 9">DCU</option>
                <option value="Maynooth University Ireland">Maynooth</option>
                <option value="Queens University Belfast">Queens</option>                 
            </select>

            <br>
            <span class=select-location-label>End:</span>
            <select id=end onChange=calculateRoute()>
                <option value=Dundalk Institute of Technology Louth Ireland>DkIT</option>
                <option value="Dublin City University Collins Avenue Extension Whitehall Dublin 9" selected>DCU</option>
                <option value="Maynooth University Ireland">Maynooth</option>
                <option value="Queens University Belfast">Queens</option>                 
            </select>
        </div>

        <div id=directions></div>
        
        <div id=map></div>           
    </body>
</html>

Select the HTML element on the webpage where the route's text directions will be displayed. In this example, it is the <DIV> element called directions.

                // select the HTML element on the webpage where the route's text directions will be displayed
                directionsRenderer.setPanel(document.getElementById("directions")) 

Adjust the above code, so that the user can press a button to select the type of transport that they will use for the journey, as shown here.

Adjust the above code, so that the directions can be minimised by the user, as shown here.

Local Context

The Google Maps LocalContext library provides a complete interface for interacting with a local map. this is shown in the example below.

Example of a basic local context map (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0">
        <title>Google Maps basic local context example</title>

        <style>
            #map 
            {
                height:100%;
                width:100%;
            }

            html,
            body 
            {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>

        <!-- Google Maps -->        
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE&libraries=localContext&v=beta&callback=displayMap async></script>  
              
        <script>               
            function displayMap()
            {         
                const localContextMapView = new google.maps.localContext.LocalContextMapView({
                    element: document.getElementById("map"),
                    placeTypePreferences: [
                        {type: "cafe"}, 
                        {type: "tourist_attraction"},
                        {type: "bank"}
                    ],
                    maxPlaceCount: 10
                })

                let map = localContextMapView.map

                map.setOptions({
                    center: {lat: 54.00428271, lng: -6.40210535},  // Map is centred on Dundalk
                    zoom: 16.5
                })
            }
        </script>
    </head>
    
    <body>
        <div id=map></div>        

        <p>This example shows cafes, banks and tourist attractions that are close to a hotel.</p>      
    </body>
</html> 

In order to use the localContext library, we must include libraries=localContext and v=beta when calling the script.

The script can take a while to load, so it needs to be set to async. Including async along with callback=displayMap in the script means that the function called displayMap() will be called asynchronously as soon as the script is loaded.

        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE&libraries=localContext&v=beta&callback=displayMap async></script>      

In previous examples on this webpage, we did not use async and callback=displayMap to cause the map to diaplay. Look at a previous example and explain what coding approach was used in place ofincluding async and callback=displayMap in the script to call function displayMap().

We initialise a google.maps.localContext.LocalContextMapView with the properties element where the map will display, placeTypePreferences identifying what places to include on the map and maxPlaceCount to state the maximum number of places that should be included on the map.

When we click on a marker, details about this location are displayed.

            function displayMap()
            {         
                const localContextMapView = new google.maps.localContext.LocalContextMapView({
                    element: document.getElementById("map"),
                    placeTypePreferences: [
                        {type: "cafe"}, 
                        {type: "tourist_attraction"},
                        {type: "bank"}
                    ],
                    maxPlaceCount: 10
                })

                let map = localContextMapView.map

                map.setOptions({
                    center: {lat: 54.00428271, lng: -6.40210535},  // Map is centred on Dundalk
                    zoom: 16.5
                })
            }

In the above example, maxPlaceCount is set to 10. What is the maximum size that maxPlaceCount can be set to?

Answer24

The Google Maps LocalContext library provides functionality to add walking instructions from a stated starting point (such as your hotel) to any clicked marker. This is shown in the example below.

Example showing a local context map with walking routes from a hotel (Run Example)

<!DOCTYPE html>
<html>
    <head>
        <meta charset=UTF-8>
        <meta name=viewport content="width=device-width, initial-scale=1.0">        
        <title>Google Maps local context with walking route example</title>

        <style>
            #map 
            {
                height:100%;
                width:100%;
            }

            html,
            body 
            {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>          

        <!-- Google Maps -->        
        <script src=https://maps.googleapis.com/maps/api/js?key=INSERT_YOUR_KEY_HERE&callback=diaplayMap&libraries=localContext&v=beta&callback=displayMap async></script>  
              
        <script>               
            function displayMap()
            {
                const hotelLocation = {lat: 54.00297662931545, lng: -6.401767730712891}

                const localContextMapView = new google.maps.localContext.LocalContextMapView({
                    element: document.getElementById("map"),
                    placeTypePreferences: [
                        {type: "cafe"}, 
                        {type: "tourist_attraction"},
                        {type: "bank"}
                    ],
                    maxPlaceCount: 10,
                    directionsOptions: {origin: hotelLocation} // Walking route starts at hotelLocation
                })

                let localContextMap = localContextMapView.map

                localContextMap.setOptions({
                    center: hotelLocation, // Map is centred on Dundalk
                    zoom: 16.5
                })

                // add a hotel marker at the location of hotelLocation
                new google.maps.Marker({
                    position: hotelLocation,
                    map: localContextMap,
                    icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAdUlEQVR4AWMYOWAU/AfhYWMBCxA3A/FlIN4MxN7I6gjg80DcD8QC+CzIxqIxH6aOSHwfYQmmBZexuQymjgTcj8uCz1gUHybDgvO4LFiMRXE4GRb8x2UBDxCXQ8PxPdSrLNSxAD+g3ALCeNQCKoHhZcHAg1EAAM3cyWj3TGxhAAAAAElFTkSuQmCC",
                    zIndex: 30,
                    title:"Your Hotel"
                })
            }
        </script>
    </head>

    <body>
        <div id=map></div>

        <p>This example shows cafes, banks and tourist attractions that are close to a hotel.</p>
        <p>When a marker is clicked, the walking route from the hotel to that marker is shown.</p>
    </body>   
</html> 

To include walking directions, add the directionsOptions property when creating the localContextMapView. In this example, the walking directions will go from hotelLocation to the marker that was selected.

                const hotelLocation = {lat: 54.00297662931545, lng: -6.401767730712891}

                const localContextMapView = new google.maps.localContext.LocalContextMapView({
                    element: document.getElementById("map"),
                    placeTypePreferences: [
                        {type: "cafe"}, 
                        {type: "tourist_attraction"},
                        {type: "bank"}
                    ],
                    maxPlaceCount: 10,
                    directionsOptions: {origin: hotelLocation} // Walking route starts at hotelLocation
                })

The Google Maps LocalContext library provides functionality to add a weighting to the various types of places. A higher weighting will result in the associated type of place being shown more often on the map. Amend the code above, so that cafes have a weighting of three, as shown here. Compare the result to the map that is shown in the above example.

The Google Maps LocalContext library provides functionality to add a maximum boundary in which to to search for places. Amend the code above to set a boundary of 3km around the hotel in which to display places, as shown here.

 
<div align="center"><a href="../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>