CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
user1560834
user1560834

Reputation: 151

Google Maps api v3 - map with a single marker only

I'm creating a map in Google Maps that I want to have only one marker. When the user clicks on the map for the first time, a marker would be created (with a circle around it). When the user clicks again, the old marker (and circle) is shifted to the new location.

So basically, this would be done by either moving the marker and circle, or by deleting them and creating a new marker and circle.

At the moment I'm trying to use the latter method, but unfortunately it's not working. Could anyone help?

<script>
  //Initial variables (map and the markers array, which we're going to try to get rid of)
  var map;
  var markersArray = [];

  //and GO!
  function initialize()
  {
    //need to correct our starting location - over UK would be nice
    var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
    var mapOptions =
    {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
    //listen out for clicks and, when clicked, add a marker
    google.maps.event.addListener(map, 'click', function(event)
    {
      addMarker(event.latLng);
    });
  }

  // Add a marker to the map and push to the array.
  function addMarker(location)
  {
    markersArray = [];
    setAllMap(null);
    var marker = new google.maps.Marker(
    {
      position: location,
      map: map,
      draggable: true
    });
    //create a circle
    var circle = new google.maps.Circle(
    {
      map: map,
      radius: 3000
    });
    //bind the circle to the marker we've also just created
    circle.bindTo('center', marker, 'position');
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

Upvotes: 3

Views: 4315

Answers (1)

Bryan Weaver
Bryan Weaver

Reputation: 4473

If you only want one marker at a time you do not need an array to store markers. You have to make sure you clear the map property of the marker and the circle using the setMap method and passing null. The circle is wrong, you do not have all the options you need and there is no bindTo method. Here is the circle documentation.

I saw that you set the marker's draggable propery to true so you also need to add a dragend event on the marker to relocate the circle to the markers new position using the setCenter method on the circle.

here is a complete example:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps</title>
    <style>
    #map_canvas{
        height:800px;
        width:800px;
    }   
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false">
    </script>
    <script>        
      var marker, myCircle, map;
      function initialize() {
        var myLatlng = new google.maps.LatLng(37.7699298, -122.4469157);
        var mapOptions = {
          zoom: 12,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), 
            mapOptions);

        google.maps.event.addListener(map, 'click', function(event){
            addMarker(event.latLng);
        });
      }

      function addMarker(latLng){       
        //clear the previous marker and circle.
        if(marker != null){
            marker.setMap(null);
            myCircle.setMap(null);
        }

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

        //circle options.
        var circleOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: latLng,
            radius: 3000
          };
         //create circle
        myCircle = new google.maps.Circle(circleOptions);

        //when marker has completed the drag event 
        //recenter the circle on the marker.
        google.maps.event.addListener(marker, 'dragend', function(){
            myCircle.setCenter(this.position);
        });     
    }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas"></div>
  </body>
</html>

Upvotes: 4

Related Questions