Getting User Latitude and Longitude Using Google Map

Get your Access Key

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.

Displaying the Map

HTML

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>

Creating the Default Location Object

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

Creating the Google Map Object

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

Marker

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

CSS Style

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