Add multiple markers in google maps

Question

I am adding google maps to my website and I am able to get my current location but now I want to add markers to differnet places on map.How I can do that?My code to get current location is as:

<div id="map"></div>
<script>

  function initMap() {
    var myLatlng = {lat: 40.59726025535419, lng: 80.02503488467874};

    var map = new google.maps.Map(document.getElementById('map'),{
      center:myLatlng,


    var infoWindow = new google.maps.InfoWindow({map: map});



  // Try HTML5 geolocation.
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var pos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(pos);
        infoWindow.setContent('Your Location.');
        map.setCenter(pos);
      }, function() {
        handleLocationError(true, infoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, infoWindow, map.getCenter());
    }
  }

  function handleLocationError(browserHasGeolocation, infoWindow, pos) {
         infoWindow.setPosition(pos);
    infoWindow.setContent(browserHasGeolocation ?
                          'Error: The Geolocation service failed.' :
                          'Error: Your browser doesn\'t support geolocation.');
  }



</script>
<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn7svjyYLYuP-EzakUjobLmpPi41l1_hw&callback=initMap">

</script>

you could read the documentation - the place where it tells you how to do things like this - https://developers.google.com/maps/documentation/javascript/examples/marker-simple — Craicerjack, Aug 03 '16 at 11:38
possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Aug 03 '16 at 12:11

yukioxD · Answer 1 · 2016-08-03T15:58:32.917

after you create new google.maps.Map (in your case, variable map)

    var marker = new google.maps.Marker({
      position: {lat: 40.59726025535419, lng: 80.02503488467874},
      map: map,
      title: 'Hello World!'
    });
    var marker2 = new google.maps.Marker({
      position: {lat: 40.59726025535419, lng: 80.02503488467874},
      map: map,
      title: 'Hello World!'
    });

Source: https://developers.google.com/maps/documentation/javascript/examples/marker-simple#try-it-yourself

Demo - updated. https://jsbin.com/bazoco/edit?html,console,output

Try this function buddy - updates v3

  function appendMarker(map, latitude, longitude, text) {
    var pos = {lat: latitude, lng: longitude};
    var markerOption = {
      position: pos,
      map: map,
      title: text || 'Hello World!'
    };
    return new google.maps.Marker(markerOption);
  }

//Try HTML5 geolocation.
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var pos = {
      lat: position.coords.latitude,
      lng: position.coords.longitude
    };

    infoWindow.setPosition(pos);
    infoWindow.setContent('Your Location.');
    map.setCenter(pos);

    //could you add this code below and test ?
    var markerOp = appendMarker(map, position.coords.latitude, position.coords.longitude, 'Hello');
    var markerOp2 = appendMarker(map, position.coords.latitude + 0.005, position.coords.longitude + 0.005, 'Hello');
    //could you add this code above and test ?

  }, function() {
    handleLocationError(true, infoWindow, map.getCenter());
  });

When I add this in my code it shows me blank map,then I try using the documentation source you provided then it add marker but not on that coordinates that I have mentioned but somewhere else in the wolrd :) — Muhammad Ramzan, Aug 03 '16 at 12:17
Updated my res. could you checkout lines between `map.setCenter(pos);` and `}, function() { handleLocationError(true, infoWindow, map.getCenter()); });` — yukioxD, Aug 03 '16 at 13:11
it works,but I want to add markers on different places.how I can add them.If I add another marker right down the above marker it is not shown — Muhammad Ramzan, Aug 03 '16 at 13:33
I think, you might be using the same variable ou overwriting or something like.... i've updated the demos and my res.... good luck ! — yukioxD, Aug 03 '16 at 16:00

score 0 · Answer 2 · answered Aug 03 '16 at 11:46

you can create marker object and pass latlng object to it

first make google map LatLng Object

var latlng = new google.maps.LatLng(latitude, longitude);

then use this latlng object as position in marker object

var marker = new google.maps.Marker({position: latlng,map: map,})
marker.setMap(map);

mxlse · Answer 3 · 2016-08-03T12:39:58.430

0

var myLatlng = {lat: 40.59726025535419, lng: 80.02503488467874};

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Your LatLng!'
});

var marker2 = new google.maps.Marker({
    position: {lat: 40.60, lng: 80.1},
    map: map,
    title: 'Your second marker!'
});

var marker3 = new google.maps.Marker({
    position: {lat: 40.62, lng: 80.5},
    map: map,
    title: 'Your third marker!'
});

Next time read the documentation first :-)

Working fiddle: https://jsfiddle.net/kLndyr00/1/

edited Aug 03 '16 at 12:39

answered Aug 03 '16 at 12:15

mxlse

2,654
17
31

That's not because of adding the markers, but your code posted above has a wrong syntax. Check your syntax first. And see this working fiddle: https://jsfiddle.net/kLndyr00/1/ (also edited above). – mxlse Aug 03 '16 at 12:39

Add multiple markers in google maps

3 Answers3

Try this function buddy - updates v3