Home
Run >
<!DOCTYPE html> <html> <head> <title>Add Multiple Markers in Google Map</title> <style> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 99%; width: 99%; } #panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; } #panel, .panel { font-family: 'Roboto','sans-serif'; line-height: 30px; padding-left: 10px; } #panel select, #panel input, .panel select, .panel input { font-size: 15px; } #panel select, .panel select { width: 100%; } #panel i, .panel i { font-size: 12px; } </style> <script async defer src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script> <script> var map; var markers = []; function initMap() { var lat_lng = {lat:22.08672, lng: 78.42444}; var markersLatLng= [{lat:23.67502, lng:76.2533}, {lat:22.17754, lng:76.38519}, {lat:21.38179, lng:82.6034}, {lat:22.0757, lng:79.1537}, {lat:23.8961, lng:82.4276}, {lat:24.9365, lng:78.9559}, {lat:22.11649, lng:85.8114}]; map = new google.maps.Map(document.getElementById('map'), { zoom: 5, center: lat_lng, mapTypeId: google.maps.MapTypeId.TERRAIN }); // Adds a marker at the center of the map. for (var i = 0; i < markersLatLng.length; i++) { var lat_lng = new google.maps.LatLng(markersLatLng[i].lat,markersLatLng[i].lng); addMarker(lat_lng); } } // Adds a marker to the map and push to the array. function addMarker(location) { var marker = new google.maps.Marker({ position: location, map: map }); } </script> </head> <body> <div id="map"></div> </body> </html>