The new Google Maps is much more aesthetically appealing to our eyes but many features were left behind. Gradually Google is implementing some of the most useful tools that were available in the earlier version. With the previous version it was easy to find out the coordinates of a location in decimal degrees format (DDD: 40.604036, -8.665247) but this option has not yet been implemented in the new Google Maps.
At the time of writing the only way to find out these coordinates is through the URL.
With a click on the map a box in the upper left corner appears showing the GPS coordinates. With a click on these coordinates the URL of the page is changed and the DDD coordinates can be found at the end of the URL.
The following example shows the full address of a location after clicking on its GPS coordinates.
https://www.google.com/maps/preview#!q=40%C2%B0+38.396'%2C+-8%C2%B0+36.570'&data=!4m14!2m13!1m12!3m8!1m3!1d10723!2d-8.6007929!3d40.6367078!3m2!1i1366!2i680!4f13.1!4m2!3d40.6399333!4d-8.6095
With Google Maps API we can easily create our own coordinate search system in decimal degrees format.
Before you start this tutorial view a demonstration of the map or download the necessary code.
DEMO DOWNLOADUpdate (April 3, 2014)
In late February, the Google Maps team brought back the ability to right click on the map to get map coordinates. Thus, it is again possible to get directions to or from the place as well as view the latitude and longitude.
Implementation of a latitude and longitude finder
With Google Maps API it's very simple to implement a "find my latitude longitude" system. First, it is necessary to make use of the event that detects a click on the map and insert a marker on the map. At the same time we store the coordinates of latitude and longitude in the text boxes available at the top of the page.
The following code demonstrates how to start the map and detect a click on the map. The comments included in the code should be sufficient for you to understand the process.
// required variables
var map;
var marker;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.601203,-8.668173),
zoom: 9,
mapTypeId: 'roadmap'
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// This event detects a click on the map
google.maps.event.addListener(map, "click", function(event) {
// Get lat lng coordinates
// This method returns the position of the click on the map
var lat = event.latLng.lat().toFixed(6);
var lng = event.latLng.lng().toFixed(6);
// Call createMarker() function to create a marker on the map
createMarker(lat, lng);
// getCoords() function inserts lat and lng values into text boxes
getCoords(lat, lng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Now let's view the code to create the marker on the map, with the addition of the event that detects drag movement of the marker for a precise placement.
// Function that creates the marker
function createMarker(lat, lng) {
// The purpose is to create a single marker, so
// check if there is already a marker on the map.
// With a new click on the map the previous
// marker is removed and a new one is created.
// If the marker variable contains a value
if (marker) {
// remove that marker from the map
marker.setMap(null);
// empty marker variable
marker = "";
}
// Set marker variable with new location
marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
draggable: true, // Set draggable option as true
map: map
});
// This event detects the drag movement of the marker.
// The event is fired when left button is released.
google.maps.event.addListener(marker, 'dragend', function() {
// Updates lat and lng position of the marker.
marker.position = marker.getPosition();
// Get lat and lng coordinates.
var lat = marker.position.lat().toFixed(6);
var lng = marker.position.lng().toFixed(6);
// Update lat and lng values into text boxes.
getCoords(lat, lng);
});
}
Updating the latitude and longitude values of the text boxes can be made as follows.
// This function updates text boxes values.
function getCoords(lat, lng) {
// Reference input html element with id=”lat”.
var coords_lat = document.getElementById('lat');
// Update latitude text box.
coords_lat.value = lat;
// Reference input html element with id=”lng”.
var coords_lng = document.getElementById('lng');
// Update longitude text box.
coords_lng.value = lng;
}
The usefulness of this small Google Maps coordinates detection system is limited. However, the methods may be adapted to more complex systems and enable a very interesting interaction with the API.
As usual, all doubts and comments are welcome.
Please use the comments section below so that all can share on the information.
Miguel Marnoto
My expertise in the Google Maps JavaScript API v3 is a consequence of my enthusiasm about maps and recognition of the importance that Google Maps service has on people lives.
You have outdone yourself this time. This is bunch of useful information about google maps coordinate. You have told us the best ways for getting coordinates in new Google maps. Thanks...
ReplyDeleteExcellent tutorial, it helped me a lot. Now I would like that instead of an initial position, I can geolocate the user. How could I add that?
ReplyDeleteHi, How to get coordinates to multiple marker?
ReplyDelete