Add two marker points in google maps

Question

Below is my javascript code to display one marker point on google maps.

How can I display two marker points instead?

window.onload = function () {

    'use strict';

    var latlng = new google.maps.LatLng(17.497859,78.391293);

    var styles = [];

    var myOptions = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        scrollwheel: false
    };

    var contentString = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h4>We Are Here</h4>'+
        '<p>test'</p>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    var map = new google.maps.Map(document.getElementById('map'), myOptions);

    var myLatlng = new google.maps.LatLng(17.497859,78.391293);

    var image = '../images/marker.png';
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!',
        icon: image
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

Possible duplicate of [Google Maps add new marker and pop up title](http://stackoverflow.com/questions/32284507/google-maps-add-new-marker-and-pop-up-title) — geocodezip, Sep 11 '15 at 15:25
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, Sep 11 '15 at 15:29

andrew f · Answer 1 · 2015-09-11T14:47:44.400

Just add new instance of google.maps.Marker with its own position, title and infowindow and assign that to your map with map attribute or setMap(map) method of Marker object.

Just like next

    var infowindow1 = new google.maps.InfoWindow({
        content: contentString
    });

    var infowindow2 = new google.maps.InfoWindow({
        content: contentString
    });

    var myLatlng1 = new google.maps.LatLng(17.497859,78.391293);
    var myLatlng2 = new google.maps.LatLng(17.497859,78.391293);

    var image = '../images/marker.png';

    var marker1 = new google.maps.Marker({
        position: myLatlng1,
        map: map,
        title: 'Hello World!',
        icon: image
    });
    var marker2 = new google.maps.Marker({
        position: myLatlng2,
        map: map,
        title: 'Hello World!',
        icon: image
    });

google.maps.event.addListener(marker1, 'click', function() {
    infowindow1.open(map,marker1);
});

google.maps.event.addListener(marker2, 'click', function() {
    infowindow2.open(map,marker2);
});

Thanks for your replay. Will it be display on same map. I mean will those two points display on one map...? — user3635258, Sep 11 '15 at 15:52
@user3635258 Sure, since you're assigning it to one map object — andrew f, Sep 14 '15 at 08:34

score 1 · Answer 2 · answered Apr 24 '17 at 19:56

<script type="text/javascript">
    var locations = [
      ['ModelTown Lahore', 31.484665, 74.326204, 4],
      ['TownShip Lahore', 31.451794, 74.306549, 5],
      ['GreenTown Lahore', 31.435684, 74.304661, 3],
      ['Mughalpura Lahore', 31.573261, 74.363712, 2],
      ['WapdaTown Lahore', 31.425724, 74.266895, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: new google.maps.LatLng(31.435684, 74.304661),
        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,
            animation: google.maps.Animation.BOUNCE,
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
</script>

namal wijekoon · Answer 3 · 2020-12-19T19:58:40.093

Please use the following code to plot any number of markers ;-)

`<!DOCTYPE HTML>                                                            
 <html lang="en">                                                          
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Google Map</title>
  <style>
    #map{
        height: 600px;
        width: 100%;
    }
  </style>                                                                      
 </head>                                                                
<body>                                                                  
<h1>My Google Map`</h1>                                                   
  <div id="map"></div>


<script>
    function initMap(){
      //Map options
        var options = {
            zoom:9,
            center:{lat:42.3601, lng:-71.0589}
        }
        // new map
        var map = new google.maps.Map(document.getElementById('map'), options);
        // customer marker
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png';
        //array of Marrkeers
        var markers = [
          {
            coords:{lat: 42.4668, lng: -70.9495},img:iconBase,con:'<h3> This Is your Content <h3>'
          },
          {
            coords:{lat: 42.8584, lng: -70.9300},img:iconBase,con:'<h3> This Is your Content <h3>'
          },
          {
            coords:{lat: 42.7762, lng: -71.0773},img:iconBase,con:'<h3> This Is your Content <h3>'
          }
        ];

        //loopthrough markers
        for(var i = 0; i <markers.length; i++){
          //add markeers
          addMarker(markers[i]);
        }

        //function for the plotting markers on the map
        function addMarker (props){
          var marker = new google.maps.Marker({
            position: props.coords,
            map:map,
            icon:props.img
          });
          var infoWindow = new google.maps.InfoWindow({
            content:props.con,
          });
          marker.addListener("click", () => {
            infoWindow.open(map, marker);
          });
        }
    }
</script>

<script
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVR9eQglFrAKCpuSWlnCV9Ao9QXEwJJCA&callback=initMap"
  defer
></script>                                                             
</body>                                                       
</html>

`

Add two marker points in google maps

3 Answers3

Linked