March 24, 2015 By Arushad

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

<div id="wrapper">				
	<label for="lat">Latitude</label>					    	
	<input name="lat" id="lat-input" type="number" value="3.080410" placeholder="Latitude" step="0.000001" required>									  	
							
	<label for="lng">Longitude</label>
	<input name="lng" id="lng-input" type="number" value="101.532111" placeholder="Longitude" step="0.000001" required>
				
	<!-- map would be loaded here -->
	<div id="map-canvas"></div>						
</div>

<!-- The JavaScript -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script text="type/javascript">
	//function to validate a coordinate
	//http://stackoverflow.com/questions/11475146/javascript-regex-to-validate-gps-coordinates
	function check_lat_lon(lat, lon){
	  	ck_lat = /^(-?[1-8]?\d(?:\.\d{1,18})?|90(?:\.0{1,18})?)$/;
		ck_lon = /^(-?(?:1[0-7]|[1-9])?\d(?:\.\d{1,18})?|180(?:\.0{1,18})?)$/;
	  	var validLat = ck_lat.test(lat);
	  	var validLon = ck_lon.test(lon);
	  	return (validLat && validLon);
	}
			
	var myMap; //map variable			
	var myMarker; //the position selection marker					
			
	//setting up map
	function initialize() {	
		//get default values
		var lat = document.getElementById('lat-input').value;
		var lng = document.getElementById('lng-input').value;	

		//if invalid values given default to 0,0
		if (!check_lat_lon(lat, lng)) {
			lat = 0.0;
			lng = 0.0;
		}

		var myLatlng = new google.maps.LatLng(lat, lng); //initial position				
		var mapOptions = {
		    zoom: 13, //set zoom level
		    center: myLatlng, //center map to initial position
		    disableDefaultUI: false, //display the map UI				    
			streetViewControl: false, //hide street view 
			panControl: true, //show pan controls 					
		 };
				
		//initialize the map inside #map-canvas div
		myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);			

		//initialize the marker to select the location	  			
		myMarker = new google.maps.Marker({
			animation: google.maps.Animation.DROP, //animate the marker in
		    position: myLatlng, //set the marker to initialize position
		    draggable: true, //make the marker draggable
		    map: myMap, //load the marker in the map			    
		});
				
		//update the input fields after the marker has been dragged
		google.maps.event.addListener(myMarker, 'dragend', function(evt){
    		document.getElementById('lat-input').value = evt.latLng.lat().toFixed(6);
    		document.getElementById('lng-input').value = evt.latLng.lng().toFixed(6);
    	});        	
        		
    	//move the marker to new location when input fields updated
    	document.getElementById('lat-input').addEventListener('input', moveMarker);
    	document.getElementById('lng-input').addEventListener('input', moveMarker);
	}											
						
	//move marker when user changes text
	//function to move the maker
	function moveMarker() {							
		//get the specified coordinate values
		var lat = document.getElementById('lat-input').value;
		var lng = document.getElementById('lng-input').value;									
		//move the marker only if the values are valid					
		if ( check_lat_lon(lat, lng) ) {
			myMarker.setPosition( new google.maps.LatLng( lat, lng ) );
			myMap.panTo( new google.maps.LatLng( lat, lng ) );
		}
	}

	//initialize the map after the DOM has been loaded
	google.maps.event.addDomListener(window, 'load', initialize);		
</script>

<label for="lat">Latitude</label>

<label for="lng">Longitude</label>

</div>

//function to validate a coordinate

//http://stackoverflow.com/questions/11475146/javascript-regex-to-validate-gps-coordinates

function check_lat_lon(lat, lon){

ck_lat = /^(-?[1-8]?\d(?:\.\d{1,18})?|90(?:\.0{1,18})?)$/;

ck_lon = /^(-?(?:1[0-7]|[1-9])?\d(?:\.\d{1,18})?|180(?:\.0{1,18})?)$/;

var validLat = ck_lat.test(lat);

var validLon = ck_lon.test(lon);

return (validLat && validLon);

}

var myMap; //map variable

var myMarker; //the position selection marker

//setting up map

function initialize() {

//get default values

var lat = document.getElementById('lat-input').value;

var lng = document.getElementById('lng-input').value;

//if invalid values given default to 0,0

if (!check_lat_lon(lat, lng)) {

lat = 0.0;

lng = 0.0;

}

var myLatlng = new google.maps.LatLng(lat, lng); //initial position

var mapOptions = {

zoom: 13, //set zoom level

center: myLatlng, //center map to initial position

disableDefaultUI: false, //display the map UI

streetViewControl: false, //hide street view

panControl: true, //show pan controls

};

//initialize the map inside #map-canvas div

myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

//initialize the marker to select the location

myMarker = new google.maps.Marker({

animation: google.maps.Animation.DROP, //animate the marker in

position: myLatlng, //set the marker to initialize position

draggable: true, //make the marker draggable

map: myMap, //load the marker in the map

});

//update the input fields after the marker has been dragged

google.maps.event.addListener(myMarker, 'dragend', function(evt){

document.getElementById('lat-input').value = evt.latLng.lat().toFixed(6);

document.getElementById('lng-input').value = evt.latLng.lng().toFixed(6);

});

//move the marker to new location when input fields updated

document.getElementById('lat-input').addEventListener('input', moveMarker);

document.getElementById('lng-input').addEventListener('input', moveMarker);

}

//move marker when user changes text

//function to move the maker

function moveMarker() {

//get the specified coordinate values

var lat = document.getElementById('lat-input').value;

var lng = document.getElementById('lng-input').value;

//move the marker only if the values are valid

if ( check_lat_lon(lat, lng) ) {

myMarker.setPosition( new google.maps.LatLng( lat, lng ) );

myMap.panTo( new google.maps.LatLng( lat, lng ) );

}

//initialize the map after the DOM has been loaded

google.maps.event.addDomListener(window, 'load', initialize);

</script>

The Breakdown

<label for="lat">Latitude</label>
<input name="lat" id="lat-input" type="number" value="3.080410" placeholder="Latitude" step="0.000001" required>									  	
				
<label for="lng">Longitude</label>
<input name="lng" id="lng-input" type="number" value="101.532111" placeholder="Longitude" step="0.000001" required>

<label for="lat">Latitude</label>

<label for="lng">Longitude</label>

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.

<div id="map-canvas"></div>

1	<div id="map-canvas"></div>

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.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

1	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

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.

function check_lat_lon(lat, lon){
	ck_lat = /^(-?[1-8]?\d(?:\.\d{1,18})?|90(?:\.0{1,18})?)$/;
	ck_lon = /^(-?(?:1[0-7]|[1-9])?\d(?:\.\d{1,18})?|180(?:\.0{1,18})?)$/;
	var validLat = ck_lat.test(lat);
	var validLon = ck_lon.test(lon);
	return (validLat && validLon);
}

function check_lat_lon(lat, lon){

ck_lat = /^(-?[1-8]?\d(?:\.\d{1,18})?|90(?:\.0{1,18})?)$/;

ck_lon = /^(-?(?:1[0-7]|[1-9])?\d(?:\.\d{1,18})?|180(?:\.0{1,18})?)$/;

var validLat = ck_lat.test(lat);

var validLon = ck_lon.test(lon);

return (validLat && validLon);

}

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.

var myMap; //map variable			
var myMarker; //the position selection marker

1 2	var myMap; //map variable var myMarker; //the position selection marker

Here I’m declaring the variables we’re going to use for the map and marker objects.

function initialize() {	
	//get default values
	var lat = document.getElementById('lat-input').value;
	var lng = document.getElementById('lng-input').value;	

	//if invalid values given default to 0,0
	if (!check_lat_lon(lat, lng)) {
		lat = 0.0;
		lng = 0.0;
	}
		
	var myLatlng = new google.maps.LatLng(lat, lng); //initial position				
	var mapOptions = {
	    zoom: 13, //set zoom level
	    center: myLatlng, //center map to initial position
	    disableDefaultUI: false, //display the map UI				    
		streetViewControl: false, //hide street view 
		panControl: true, //show pan controls 					
	 };
				
	//initialize the map inside #map-canvas div
	myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);			
	//initialize the marker to select the location	  			
	myMarker = new google.maps.Marker({
		animation: google.maps.Animation.DROP, //animate the marker in
	    position: myLatlng, //set the marker to initialize position
	    draggable: true, //make the marker draggable
	    map: myMap, //load the marker in the map			    
	});
				
	//update the input fields after the marker has been dragged
	google.maps.event.addListener(myMarker, 'dragend', function(evt){
    	document.getElementById('lat-input').value = evt.latLng.lat().toFixed(6);
    	document.getElementById('lng-input').value = evt.latLng.lng().toFixed(6);
    });        	
        		
    //move the marker to new location when input fields updated
    document.getElementById('lat-input').addEventListener('input', moveMarker);
    document.getElementById('lng-input').addEventListener('input', moveMarker);
}

function initialize() {

//get default values

var lat = document.getElementById('lat-input').value;

var lng = document.getElementById('lng-input').value;

//if invalid values given default to 0,0

if (!check_lat_lon(lat, lng)) {

lat = 0.0;

lng = 0.0;

}

var myLatlng = new google.maps.LatLng(lat, lng); //initial position

var mapOptions = {

zoom: 13, //set zoom level

center: myLatlng, //center map to initial position

disableDefaultUI: false, //display the map UI

streetViewControl: false, //hide street view

panControl: true, //show pan controls

};

//initialize the map inside #map-canvas div

myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

//initialize the marker to select the location

myMarker = new google.maps.Marker({

animation: google.maps.Animation.DROP, //animate the marker in

position: myLatlng, //set the marker to initialize position

draggable: true, //make the marker draggable

map: myMap, //load the marker in the map

});

//update the input fields after the marker has been dragged

google.maps.event.addListener(myMarker, 'dragend', function(evt){

document.getElementById('lat-input').value = evt.latLng.lat().toFixed(6);

document.getElementById('lng-input').value = evt.latLng.lng().toFixed(6);

});

//move the marker to new location when input fields updated

document.getElementById('lat-input').addEventListener('input', moveMarker);

document.getElementById('lng-input').addEventListener('input', moveMarker);

}

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.

//get default values
var lat = document.getElementById('lat-input').value;
var lng = document.getElementById('lng-input').value;	

//if invalid values given default to 0,0
if (!check_lat_lon(lat, lng)) {
	lat = 0.0;
	lng = 0.0;
}
		
var myLatlng = new google.maps.LatLng(lat, lng); //initial position

//get default values

var lat = document.getElementById('lat-input').value;

var lng = document.getElementById('lng-input').value;

//if invalid values given default to 0,0

if (!check_lat_lon(lat, lng)) {

lat = 0.0;

lng = 0.0;

}

var myLatlng = new google.maps.LatLng(lat, lng); //initial position

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.

var mapOptions = {
	zoom: 13, //set zoom level
	center: myLatlng, //center map to initial position
	disableDefaultUI: false, //display the map UI			  
	streetViewControl: false, //hide street view 
	panControl: true, //show pan controls 				
};
				
//initialize the map inside #map-canvas div
myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var mapOptions = {

zoom: 13, //set zoom level

center: myLatlng, //center map to initial position

disableDefaultUI: false, //display the map UI

streetViewControl: false, //hide street view

panControl: true, //show pan controls

};

//initialize the map inside #map-canvas div

myMap = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

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.

//initialize the marker to select the location	  			
myMarker = new google.maps.Marker({
    animation: google.maps.Animation.DROP, //animate the marker in
    position: myLatlng, //set the marker to initialize position
    draggable: true, //make the marker draggable
    map: myMap, //load the marker in the map			    
});

//initialize the marker to select the location

myMarker = new google.maps.Marker({

animation: google.maps.Animation.DROP, //animate the marker in

position: myLatlng, //set the marker to initialize position

draggable: true, //make the marker draggable

map: myMap, //load the marker in 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.

//update the input fields after the marker has been dragged
google.maps.event.addListener(myMarker, 'dragend', function(evt){
    	document.getElementById('lat-input').value = evt.latLng.lat().toFixed(6);
    	document.getElementById('lng-input').value = evt.latLng.lng().toFixed(6);
});

//update the input fields after the marker has been dragged

google.maps.event.addListener(myMarker, 'dragend', function(evt){

document.getElementById('lat-input').value = evt.latLng.lat().toFixed(6);

document.getElementById('lng-input').value = evt.latLng.lng().toFixed(6);

});

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.

//move the marker to new location when input fields updated
document.getElementById('lat-input').addEventListener('input', moveMarker);
document.getElementById('lng-input').addEventListener('input', moveMarker);

//move the marker to new location when input fields updated

document.getElementById('lat-input').addEventListener('input', moveMarker);

document.getElementById('lng-input').addEventListener('input', moveMarker);

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.

//move marker when user changes text
//function to move the maker
function moveMarker() {							
	//get the specified coordinate values
	var lat = document.getElementById('lat-input').value;
	var lng = document.getElementById('lng-input').value;									

	//move the marker only if the values are valid					
    	if ( check_lat_lon(lat, lng) ) {
 		myMarker.setPosition( new google.maps.LatLng( lat, lng ) );
    		myMap.panTo( new google.maps.LatLng( lat, lng ) );
    	}
}

//move marker when user changes text

//function to move the maker

function moveMarker() {

//get the specified coordinate values

var lat = document.getElementById('lat-input').value;

var lng = document.getElementById('lng-input').value;

//move the marker only if the values are valid

if ( check_lat_lon(lat, lng) ) {

myMarker.setPosition( new google.maps.LatLng( lat, lng ) );

myMap.panTo( new google.maps.LatLng( lat, lng ) );

}

Note that the marker would be moved only if the user’s values are valid.

//initialize the map after the DOM has been loaded
google.maps.event.addDomListener(window, 'load', initialize);

1 2	//initialize the map after the DOM has been loaded google.maps.event.addDomListener(window, 'load', initialize);

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.

#map-canvas img {
	max-width: none;
}

#map-canvas img {

max-width: none;

}

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

In Tips and Tricks Leave a comment

How to use Google Maps API for GPS coordinate inputs

The Code

The Breakdown

Leave a ReplyCancel reply