Get latitude/longitude coordinates from a Google map using a marker

Question

I just wondered if anyone knew of a simple script available that will do the following:

Load a google map in view, when clicked it displays a marker that will save the lat and long values to a variable?

Does anyone know if something like this already exists in PHP?

Thanks in advance

Answer 1

Perhaps you are looking for something similar to this Latitude-Longitude Finder Tool . The example code is was API v2. Below is trimmed down version of the code using Google Maps API v3:

var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Set lat/lon values for this property',
    draggable: true
});
google.maps.event.addListener(marker, 'dragend', function(a) {
    console.log(a);
    // bingo!
    // a.latLng contains the co-ordinates where the marker was dropped
});

Demo

Explanation: you must set the draggable property of the marker to true. You can then hook a callback function to that marker's dragend event; the new co-ordinates are passed to the function and you can assign them to a JavaScript variable or form field.

Answer 2

// add a click event handler to the map object
    GEvent.addListener(map, "click", function(overlay, latLng)
    {
        // display the lat/lng in your form's lat/lng fields
        document.getElementById("latFld").value = latLng.lat();
        document.getElementById("lngFld").value = latLng.lng();
    });

I thinks when you will get the lat-lng then you can place marker.

Answer 3

Check out Google maps API v.3. From the events page :

 google.maps.event.addListener(map, 'click', function(event) {
   // use event.latLng to place a google.maps.Marker
 });

Answer 4

the below code works well

var latlng = new google.maps.LatLng(51.4975941, -0.0803232);
var map = new google.maps.Map(document.getElementById('map'), {
    center: latlng,
    zoom: 11,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Set lat/lon values for this property',
    draggable: true
});

google.maps.event.addListener(marker, 'dragend', function (event) {
    document.getElementById("latbox").value = this.getPosition().lat();
    document.getElementById("lngbox").value = this.getPosition().lng();
});

Answer 5

I have managed the following so far - how could I amend this to move the marker position when I click anywhere on the map

http://jsfiddle.net/ZW9jP/

I've added the following but it doesnt seem to do anything

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