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>
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); } }); }
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With