如何在谷歌地图中创建移动标记

Question

I a using Google Maps in my app.

The user is to be able to place a marker on any place in the map.

To this end I wrote the following code:

var marker;

function myMap() {

  var mapCanvas = document.getElementById("map-canvas");
  var myCenter=new google.maps.LatLng(50.833,-12.9167);
  var mapOptions = {center: myCenter, zoom: 5};
  var map = new google.maps.Map(mapCanvas, mapOptions);

  google.maps.event.addListener(map, 'click', function(event) {

    //marker.setMap(null); // this line does not work
    placeMarker(map, event.latLng);
  });
}

function placeMarker(map, location) {

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

}

The marker is supposed to always move to the place where the user clicked. The line

marker.setMap(null); 

is supposed to remove the old marker (before the new marker is placed). However, with this line in the code I cannot place any markers any more. Not including this line means that every marker stays in the map and is not removed (ie the map is filling up with markers over time).

Answer 1

The problem is that you try to use method setMap after the first click when marker variable doesn't have this method. So, first check if marker has the method and then call it.

google.maps.event.addListener(map, 'click', function(event) {

        // check if setMap is available and call it.
        if(marker.hasOwnProperty('setMap')){
            marker.setMap(null);
        }
        placeMarker(map, event.latLng);

});

Answer 2

Look at the javascript console, you will see Uncaught TypeError: Cannot read property 'setMap' of undefined . The first time, marker is null , you need to only set its map property to null if it already exists.

google.maps.event.addListener(map, 'click', function(event) {

  if (marker) marker.setMap(null);
  placeMarker(map, event.latLng);
});

proof of concept fiddle

code snippet:

 var marker; function myMap() { var mapCanvas = document.getElementById("map-canvas"); var myCenter = new google.maps.LatLng(50.833, -12.9167); var mapOptions = { center: myCenter, zoom: 5 }; var map = new google.maps.Map(mapCanvas, mapOptions); google.maps.event.addListener(map, 'click', function(event) { if (marker) marker.setMap(null); placeMarker(map, event.latLng); }); } function placeMarker(map, location) { marker = new google.maps.Marker({ position: location, map: map }); } google.maps.event.addDomListener(window, "load", myMap); 

 html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="map-canvas"></div>