Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google map V3 user adding markers

I need some code that allows users to add their own markers to my map. Does anybody have an example?

Thanks!

var initialLocation;
var siberia = new google.maps.LatLng(60, 105);
var newyork = new google.maps.LatLng(40.69847032728747, -73.9514422416687);
var browserSupportFlag =  new Boolean();

var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var parliament = new google.maps.LatLng(59.327383, 18.06747);
var marker;
var map;


function initialize() {
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



  // Try W3C Geolocation (Preferred)
  if(navigator.geolocation) {
    browserSupportFlag = true;
    navigator.geolocation.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeolocation(browserSupportFlag);
    });
  // Try Google Gears Geolocation
  } else if (google.gears) {
    browserSupportFlag = true;
    var geo = google.gears.factory.create('beta.geolocation');
    geo.getCurrentPosition(function(position) {
      initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
      map.setCenter(initialLocation);
    }, function() {
      handleNoGeoLocation(browserSupportFlag);
    });
  // Browser doesn't support Geolocation
  } else {
    browserSupportFlag = false;
    handleNoGeolocation(browserSupportFlag);
  }

  function handleNoGeolocation(errorFlag) {
    if (errorFlag == true) {
      alert("Geolocation service failed.");
      initialLocation = newyork;
    } else {
      alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
      initialLocation = siberia;
    }
  }
}

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


  $.ajax({
     url: 'myPHP',
     data: location,
     succes: function(){
       alert('marker was added');
     },
     error: function(){
       alert('marker wasn't added');
       marker.setMap(null);
     }
  });
}

</script>
like image 822
user547794 Avatar asked Dec 25 '10 09:12

user547794


2 Answers

It's not a hard job:

  • Set a click event on the map

    google.maps.event.addListener(map, 'click', function(event) {
      placeMarker(event.latLng);
    });
  • Place the marker and make an AJAX call to the server to save the location in the database:

    function placeMarker(location) {
      var marker = new google.maps.Marker({
          position: location, 
          map: map
      });
    
    
      map.setCenter(location);
    
    
      $.ajax({
         url: 'myPHP',
         data: location,
         succes: function(){
           alert('marker was added');
         },
         error: function(){
           alert('marker wasn't added');
           marker.setMap(null);
         }
      });
    }
like image 192
Harmen Avatar answered Sep 22 '22 10:09

Harmen


Or, use MarkerManager for maps API v3 and rid yourself of any kind of other little mistake you could make implementing this (like moving markers etc)

like image 32
Hans Westerbeek Avatar answered Sep 20 '22 10:09

Hans Westerbeek