Display Google Map with Marker using Latitude & Longitude Coordinates

Facebook Tweet LinkedIn Pin Print EmailShares

This article shows how you can generate Google Map and display it in your webpage when you have latitude and longitude coordinates value.

We will be using HTML and Javascript to display the Google Map.

First of all, you need to get the Google API Key from Google API Console. You need this API key while displaying Google Map on your webpage. You can get the API Key from here: Get API Key

Here is the full source code:

Note that: At the bottom of the code there is a script src included. You need to put your API Key over there like this:
https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx&callback=initMap


<html>
	<head>
		<title>Google Map</title>
		<meta name="viewport" content="initial-scale=1.0">
		<meta charset="utf-8">
		<style>		  
		  #map { 
			height: 300px;	
			width: 600px;			
		  }		  
		</style>		
	</head>	
	<body>		
		<div style="padding:10px">
			<div id="map"></div>
		</div>
		
		<script type="text/javascript">
		var map;
		
		function initMap() {							
			var latitude = 27.7172453; // YOUR LATITUDE VALUE
			var longitude = 85.3239605; // YOUR LONGITUDE VALUE
			
			var myLatLng = {lat: latitude, lng: longitude};
			
			map = new google.maps.Map(document.getElementById('map'), {
			  center: myLatLng,
			  zoom: 14					
			});
					
			var marker = new google.maps.Marker({
			  position: myLatLng,
			  map: map,
			  //title: 'Hello World'
			  
			  // setting latitude & longitude as title of the marker
			  // title is shown when you hover over the marker
			  title: latitude + ', ' + longitude 
			});			
		}
		</script>
		<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY&callback=initMap"
		async defer></script>
	</body>	
</html>

Hope this helps. Thanks.

Related posts: