CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3
user3635258
user3635258

Reputation: 53

Add two marker points in google maps

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);
    });
}

Upvotes: 0

Views: 3309

Answers (3)

namal wijekoon
namal wijekoon

Reputation: 101

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>

`

Upvotes: 0

Maaz Mahmood
Maaz Mahmood

Reputation: 11

<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>

Upvotes: 1

andrew f
andrew f

Reputation: 11

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);
});

Upvotes: 1

Related Questions