How to draw multiple markers in google map api

Question

Below is my script which is working fine.

In below script,in given line viewMap(40.671531,-73.963588); i am displaying the user current location.

Now i want to display multiple markers on map near by my current location. Can any one help me to draw multiple markers near by my current location.

  <script type="text/javascript">
    var map;
    var marker;
    var infowindow = new google.maps.InfoWindow();
    var geocoder = new google.maps.Geocoder();
    function initialize() {       
          var location = document.getElementById('pickadd');
          var options = { 
          types: ['geocode'],
            componentRestrictions: {country: "IND"}
          };
          var autocomplete = new google.maps.places.Autocomplete(location,options);
          google.maps.event.addListener(autocomplete, 'place_changed', function () {
              var place = autocomplete.getPlace();             
              document.getElementById('PoolLatitude').value = place.geometry.location.lat();
              document.getElementById('PoolLongitude').value = place.geometry.location.lng();
              viewMap(place.geometry.location.lat(),place.geometry.location.lng());           
          }); 
      }

      function viewMap(lat,lng){  
          var myLatlng = new google.maps.LatLng(lat,lng);
          var myOptions = {
             zoom: 14,
             center: myLatlng,
             mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);        
          var MarkImage = new google.maps.MarkerImage("/img/mapicons/icon1.png");
          var marker = new google.maps.Marker({
          draggable: true,
          icon: MarkImage,
          position: myLatlng, 
          map: map,
          title: "Your location"
          });
        var formatted_address = '<img src="/img/pick_up.png" id="pick" class="pickupmap" alt="PickUp here">';
          infowindow.setContent(formatted_address);
          infowindow.open(map, marker);

          google.maps.event.addListener(marker, 'dragend', function (event) {
            geocodePosition(marker.getPosition());
            document.getElementById("PoolLatitude").value = this.getPosition().lat();
            document.getElementById("PoolLongitude").value = this.getPosition().lng();        
        });

        function geocodePosition(pos) {         
            var geocoder= new google.maps.Geocoder();
              geocoder.geocode({
                latLng: pos
              }, function(responses) {              
                if (responses && responses.length > 0) {
                    document.getElementById("PoolLocation").value = responses[0].formatted_address;
                }
              });
        }
      }    
      viewMap(40.671531,-73.963588);      
      google.maps.event.addDomListener(window, 'load', initialize);

  </script>

multiple markers: [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Jan 11 '17 at 11:39
closest markers: [Google Maps API - Getting closest points to zipcode](http://stackoverflow.com/questions/17280787/google-maps-api-getting-closest-points-to-zipcode) — geocodezip, Jan 11 '17 at 11:40

score 0 · Answer 1 · answered Jan 14 '17 at 06:19

Use following steps to redraw multiple marker on map:

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD3feOR_ZOOn407Y0CfRMrxYd2lNaJ_4XM&callback=initMap">
    </script>
<div id="map" style="width:100%;height:500px"></div>
<script>

function initMap() {

var Thailand = {
    info: '<strong>Thailand</strong><br>\
                5N/6D  Thailand *INR 8000/-per person <br>\
                <a href="#">Details</a>',
    lat: 15.870032,
    long: 100.99254100000007
};
var Singapore = {
    info: '<strong>Singapore</strong><br>\
                4N/5D Singapore INR 15000/- per person<br>\
                <a href="#">Details</a>',
    lat: 1.3553794,
    long: 103.86774439999999
};
var Bali = {
    info: '<strong>Bali</strong><br>\
                8N/9D Bali - Indonesia , INR 30,000/- per person<br>\
                <a href="#">Details</a>',
    lat: -8.4095178,
    long: 115.18891600000006
};
var srilanka = {
    info: '<strong>Sri Lanka</strong><br>\
                6N/7D Sri Lanka, INR 22,000/- per person<br>\
                <a href="#">Details</a>',
    lat: 7.873053999999999,
    long: 80.77179699999999
};
var maldives = {
    info: '<strong>Maldives</strong><br>\
                3N/4D Maldives, INR 26,000/- per person<br>\
                <a href="#">Details</a>',
    lat: 3.202778,
    long: 73.22068000000002
};
var locations = [
  [Thailand.info, Thailand.lat, Thailand.long, 0],
  [Singapore.info, Singapore.lat, Singapore.long, 1],
  [Bali.info, Bali.lat, Bali.long, 2],
  [srilanka.info, srilanka.lat, srilanka.long, 3],
  [maldives.info, maldives.lat, maldives.long, 4],
];
var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4,
    center: new google.maps.LatLng(2.986927 , 102.216797),
    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
    });
    google.maps.event.addListener(marker, 'click', (function (marker, i) {
        return function () {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}

}

Note: Don't forget to use map key when you call googleapi.

How to draw multiple markers in google map api

1 Answers1