How to use Google Maps API for GPS coordinate inputs

For a recent project I had to create a web interface for users to input and store GPS coordinates. To make the process more user friendly, I thought of integrating the Google Maps API to allow the users to directly pinpoint the location instead of making them manually input the latitude and longitude values.

The full code and a detailed breakdown of the code is given below.

LIVE DEMO

The Code

 

The Breakdown

These are the two fields we’re gonna use for the latitude and longitude inputs. Here I’m using the HTML5 number input type to let the browser handle the input validation. The step size is specified as 0.000001 to allow a maximum precision of 6 decimal places. This will give you an accuracy of around 10 cm. You can change this according to your needs. The values are the initial or default values you want. Finally both fields are specified as required.
This is the div where the map would be loaded. You have to specify a height for this div in your css to make it show.
Here we’re loading up the Google Maps API. This file has to be loaded before the rest of the JavaScript we’re gonna write.
This is a function we’re going to use to validate coordinate values. It uses a regex pattern to check whether the latitude is withing -90 to 90 range and longitude is within -180 to 180. The code was taken from this Stak Overflow answer.
Here I’m declaring the variables we’re going to use for the map and marker objects.
This is where the main work is being done. This function would be called when the page is loaded. A breakdown of the function is given below.
First we’re getting the initial values of the input fields. Next, using the function we wrote before, we’re validating the two values. If the values are invalid, we fallback to 0,0  as the default coordinates. Using the values we got, we create a LatLng  object. This will be used to specify the initial position of the map marker and center the map around it.
Here we specify our options for the map and create the map object for the #map-canvas  div. Important things to note here are the center  option; which is sat to the previous LatLng  object we created and the element where we are loading the map.
Next we create a marker for the map. This marker is used by the user to pinpoint the location they want. It’s important that the marker be draggable and the map  option is sat to the previous map object we created.
This will make the input fields update each time the marker is dragged to a new location. Note that the values are fixed to 6. This will round the coordinate values to 6 decimal places. You can change this according to your needs.
If the user wants to manually enter a coordinate, we need to accommodate that too. Therefore if the user makes any change to the input values, the map marker position has to be updated too. This is achieved by calling the moveMarker function  on the input event of the two input fields. The code for moving the marker is given below.
Note that the marker would be moved only if the user’s values are valid.
Finally we wrap up by calling the  initialize function on the window load event.

Lastly if you notice any weird glitches in the map UI, add this to your css.

I hope you find this useful. Let me know in the comments below if you have any issues or questions.

Leave a Reply