Javascript – Allowing users to add markers to google maps and getting the coordinates

google mapsgoogle-maps-api-3javascript

What i want to do is embed a map on my website and allow users to place markers on it (also if there is a way to control how many markers a user can put on the map?) and i also want to get the coordinates of these markers once they have been put on the map. From the documentation that i've read for google maps javascript api V3, i can place markers on the map myself, but i dont see a way to let users put them up on the map. Is there a way to do it?

Best Answer

Source: http://code.google.com/apis/maps/documentation/javascript/events.html Scroll down to accessing arguments in UI events.

var map;
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

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

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

  map.setCenter(location);
}

Related Solutions

Javascript – Google Maps API v3: How to remove all markers

Simply do the following:

I. Declare a global variable:

var markersArray = [];

II. Define a function:

function clearOverlays() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

google.maps.Map.prototype.clearOverlays = function() {
  for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
  }
  markersArray.length = 0;
}

III. Push markers in the 'markerArray' before calling the following:

markersArray.push(marker);
google.maps.event.addListener(marker,"click",function(){});

IV. Call the clearOverlays(); or map.clearOverlays(); function wherever required.

That's it!!

Google-maps – How to change the color of a Google Maps marker

With version 3 of the Google Maps API, the easiest way to do this may be by grabbing a custom icon set, like the one that Benjamin Keen has created here:

http://www.benjaminkeen.com/google-maps-coloured-markers/

If you put all of those icons at the same place as your map page, you can colorize a Marker simply by using the appropriate icon option when creating it:

var beachMarker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: 'brown_markerA.png'
});

This is super-easy, and is the approach I'm using for the project I'm working on currently.

Best Answer

Related Solutions

Javascript – Google Maps API v3: How to remove all markers

Google-maps – How to change the color of a Google Maps marker

Related Topic