Getting User Latitude and Longitude Using Google Map
Reading Time:
Reading Time:
It is often necessary for us to get the user’s coordinates (i.e. latitude and longitude). This will be helpful for us to calculate the user’s distance from a particular coordinates, which you might have in a database. We can get this information from the users using the Google Map API. Google has provided the GMaps API for developers to access their service for free, but only up to some limit.
Before we begin, to use the Google Map service you need to get a access key which you can grab from the Google API Console. You need to have a Google Account to get access to the API console.
Once you get the “access key” it is pretty easy to integrate the Map into you website. Add the following script tag in your page, with your access key pasted in it.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={paste_your_access_key_here}&sensor=false"></script>
The script above includes the necessary scripts required for showing the map.
We need a container to store the Map. We also need to store the latitude and longitude in an input, but we don’t want the user to see the creepy numbers showing up when the cursor is moved over the Map
<div class="row">
<!-- Hidden fields to hold the latitude and longitude -->
<input type="hidden" name="latitude" id="latitude" value="" />
<input type="hidden" name="longitude" id="longitude" value="" />
<!-- GMap Container -->
<div class="google-map" id="map"></div>
</div>
Once the HTML is done we can use the Google Map API to create the Map. First we will create a LatLng
object of Google Map to specify the initial coordinates when the map loads.
var defaultLatLng = new google.maps.LatLng(13.0839, 80.2700);
Then we use the LatLng
object that we created to create the Options
object for the map. We then use this Options
object and create a new Google Map Object. We must also pass the container element of the Map. In our case it is map
div.
// Get the map container element
var mapContainer = document.getElementById("map");
// Set the default options for the map
var myOptions = {
zoom: 8,
center: defaultLatLng
};
var map = new google.maps.Map(mapContainer, myOptions);
Now as our map is ready, next we need to create the “Marker” with which the user can specify their coordinates.
var marker = new google.maps.Marker({
draggable: true, // Boolean, to set the draggable action to true.
position: defaultLatLng, // The default latitude and longitude object.
map: map, // The Map Object that we created.
title: "Drag to your Location"
});
After creating the marker, we need to bind the dragend
event to the marker for getting the latitude and longitude when the marker is dragged to a location. In the event listener function we get the location’s latitude and longitude and we must set it in the hidden fields.
google.maps.event.addListener(marker, 'dragend', function(event) {
document.getElementById("latitude").value = this.getPosition().lat();
document.getElementById("longitude").value = this.getPosition().lng();
});
The width and height of the map must be specifies so that the map can be displayed.
.google-map {
height: 300px;
width: 100%;
border: 1px solid lightgray;
}
Once all this is done load the page and the map should show up. Hope this helps you to build sites for getting user’s location.
If you have any questions or request leave a comment