How To Add Google Map With Multiple Markers Javascript API

How To Add Google Map With Multiple Markers Javascript API

How To Add Google Map With Multiple Markers Javascript API

0 Sales

Free

Google Map is the easiest and best way to display a web page position. The marker is used to identify the location on the Google Map, and the Info Window shows some information on the map. You can mark a location more efficiently together with the marker and info window. It also helps the user find and know more accurately about a location.

 

To display the multiple locations on a single map, multiple marker features are very useful. You can easily add a location map with multiple markers and info windows to the web page using the Google Maps JavaScript API. We will show several markers on the map in this example script and make each marker clickable to view the data window.

 

All Google Maps JavaScript API requests must be included as the key parameter value. So, set up a free API key on the Google Developer Console before you start. For a step-by-step guide on how to obtain the API key from the Google API Console, please visit the link below.

 

Include the JavaScript API for Google Map and provide a key parameter for your API code.

 

<script src="https://maps.googleapis.com/maps/api/js?key=Your_API_KEY"></script>


 

JavaScript Code

Place the following JavaScript code on the web page, indicate multiple locations in the infoWindowContent variable marker variable and info window contents.

 

<script>

function initMap() {

    var map;

    var bounds = new google.maps.LatLngBounds();

    var mapOptions = {

        mapTypeId: 'roadmap'

    };

                    

    // Display a map on the web page

    map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);

    map.setTilt(50);

        

    // Multiple markers location, latitude, and longitude

    var markers = [

        ['Brooklyn Museum, NY', 40.671531, -73.963588],

        ['Brooklyn Public Library, NY', 40.672587, -73.968146],

        ['Prospect Park Zoo, NY', 40.665588, -73.965336]

    ];

                        

    // Info window content

    var infoWindowContent = [

        ['<div class="info_content">' +

        '<h3>Brooklyn Museum</h3>' +

        '<p>The Brooklyn Museum is an art museum located in the New York City borough of Brooklyn.</p>' + '</div>'],

        ['<div class="info_content">' +

        '<h3>Brooklyn Public Library</h3>' +

        '<p>The Brooklyn Public Library (BPL) is the public library system of the borough of Brooklyn, in New York City.</p>' +

        '</div>'],

        ['<div class="info_content">' +

        '<h3>Prospect Park Zoo</h3>' +

        '<p>The Prospect Park Zoo is a 12-acre (4.9 ha) zoo located off Flatbush Avenue on the eastern side of Prospect Park, Brooklyn, New York City.</p>' +

        '</div>']

    ];

        

    // Add multiple markers to map

    var infoWindow = new google.maps.InfoWindow(), marker, i;

    

    // Place each marker on the map  

    for( i = 0; i < markers.length; i++ ) {

        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);

        bounds.extend(position);

        marker = new google.maps.Marker({

            position: position,

            map: map,

            title: markers[i][0]

        });

        

        // Add info window to marker    

        google.maps.event.addListener(marker, 'click', (function(marker, i) {

            return function() {

                infoWindow.setContent(infoWindowContent[i][0]);

                infoWindow.open(map, marker);

            }

        })(marker, i));


        // Center the map to fit all markers on the screen

        map.fitBounds(bounds);

    }


    // Set zoom level

    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {

        this.setZoom(14);

        google.maps.event.removeListener(boundsListener);

    });

    

}

// Load initialize function

google.maps.event.addDomListener(window, 'load', initMap);

</script>


HTML Code

Defines an area to display the Google map on the web page. Specify the div element I d as well, and it should be mentioned in the Map Object.

 

<div id="mapCanvas"></div>


 

CSS Code

Add the following CSS to set the width and height of your map.

#mapCanvas {

    width: 100%;

    height: 100%;

}

LICENSE OF USE

You can use it for personal or commercial projects. You can't resell it partially or in this form.

PRODUCT INFO

Create Date : May 15, 2020

Updated Date : Jun 17, 2021

Ratings

Comments : 0

Downloads : 0