How to add marker on google map with two locations?

Question

I would like to add markers on google map with two locations, that are clickable. When I click on the button it should change the map marker with the location.

 <script>
    var map;
    function initialize()
    {
        map = new google.maps.Map(document.getElementById('map-canvas'), {
            center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position
            zoom: 14,

        });
        var marker = new google.maps.Marker({
            position: newLocation(),
            map: map,
            title: 'AGM-CORP',
            icon: 'img/agm-marker.png'
        });
    }

    function newLocation(newLat, newLng)
    {
        map.setCenter({
            lat: newLat,
            lng: newLng
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
    $(document).ready(function ()
    {
        $("#1").on('click', function ()
        {
            newLocation(52.302516, 16.414546);
        });

        $("#2").on('click', function ()
        {
            newLocation(51.706478, 15.274753);
        });
    });
</script>
<div id="map-canvas"></div>
</div>
    <h3>Zobacz lokalizację:</h3>
    <button id="1" style="padding:10px; cursor:pointer;">Siedziba Firmy</button>
    <button id="2" style="padding:10px;cursor:pointer;">Kopalnia Kruszyw</button>
</div>

Possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — Vivek, Jun 04 '18 at 07:12
Yup, that's exactly how you do it. You create an array of your locations and their lat/lng and info window information. This is a great site for converting addresses to lat and lng https://www.latlong.net/ — Rick Calder, Jun 04 '18 at 07:18

score 0 · Answer 1 · answered Jun 04 '18 at 07:22

this function will only switch the location of the view:

map.setCenter({
   lat: newLat,
   lng: newLng
});

use this instead:

new google.maps.LatLng(-25.363882,131.044922);

secondly to you need to add event listner to the marker object for it to work properly:

// create markers on the map
marker1 = new google.maps.Marker({ ... })
marker2 = new google.maps.Marker({ ... })
marker3 = new google.maps.Marker({ ... })

// add event listener
marker1.addListener('click', function() { ... })
marker2.addListener('click', function() { ... })

further check out the docs they are pretty straight forward.

Sunil B N · Accepted Answer · 2018-06-04T15:40:51.513

0

var map = null
var marker = null;
var myLatLng = {
  lat: 52.302516,
  lng: 16.414546
};

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(myLatLng.lat, myLatLng.lng),
    zoom: 14,
  });

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

function updateMap(lat, lng) {;
  myLatLng.lat = lat;
  myLatLng.lng = lng
  map.setCenter(myLatLng);
  marker.setPosition(myLatLng);
}


$(document).ready(function() {
  $("#1").on('click', function() {
    updateMap(52.302516, 16.414546);
  });

  $("#2").on('click', function() {
    updateMap(51.706478, 15.274753);
  });
});

I am initing the map with new marker. Working jffiddle is here

edited Jun 04 '18 at 15:40

answered Jun 04 '18 at 07:31

Sunil B N

4,159
1
31
52

I have copied your code but it is strange because the map doesn't show on my page... – Blosom Jun 04 '18 at 07:46
The map shows only when I click the button. Not while I refresh the page on load – Blosom Jun 04 '18 at 07:49
1

google.maps.event.addDomListener(window, 'load', initMap); – Blosom Jun 04 '18 at 07:54
Why you should reInit the map for every time you click the button ?. Its inefficient – Vignesh Raja Jun 04 '18 at 07:57
So what do you recommend? – Blosom Jun 04 '18 at 08:31
@VigneshRaja I have updated accordingly.. No need to setMap to null also. – Sunil B N Jun 04 '18 at 09:24
Is that really working ? The marker is not aligned to center – Vignesh Raja Jun 04 '18 at 10:11
small bug, variable was initialized twice.. its working.. try again – Sunil B N Jun 04 '18 at 15:41

score 0 · Answer 3 · answered Jun 04 '18 at 07:55

This will work. Have a global variable that holds the marker. Whenever the location is changed, set the marker in the position of Lat and Lng using the setPosition method and use setCenter method to show the marker in the center. No need to init the map every time.

var map,marker;
function initialize()
{
    map = new google.maps.Map(document.getElementById('googleMap'), {
        center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position
        zoom: 6,
    });
    setLocation(52.302516,16.414546);
}

function setLocation(newLat, newLng)
{
    var latlng = new google.maps.LatLng(newLat,newLng);
    if(marker) //Remove the marker, if already set
    {
        marker.setMap(null);
    }
    marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'AGM-CORP'
    });
    map.setCenter(latlng);

}

$(document).ready(function ()
{
    $("#1").on('click', function ()
    {
        setLocation(13.070814558816117, 80.2656996835234);
    });

    $("#2").on('click', function ()
    {
        setLocation(59.4739316352335,-110.89646088128342);
    });
});

How to add marker on google map with two locations?

3 Answers3

Linked