How to create google map in javascript?

In this article we will teach you how to create google map in javascript.

Google Maps is a web mapping service developed by Google. It offers satellite imagery, aerial photography, street maps, 360° interactive panoramic views of streets, real-time traffic conditions, and route planning for traveling by foot, car, bicycle and air, or public transportation.

There are some types of google map:

  • ROADMAP (normal, default 2D map)
  • SATELLITE (photographic map)
  • HYBRID (photographic map + roads and city names)
  • TERRAIN (map with mountains, rivers, etc.)

Read here in detail about google map javascript api.

Uses of google maps in website or mobile apps:

You can use google map in javascript for the following purposes in your website or mobile apps.

  • To show contact address on google maps.
  • For Store locations on google maps.
  • To track live locations of vehicles or persons.
  • For navigation to specific address or path.
  • To get current address of point.
  • In google my business.

If you want to create google map by using the google map javascript api paste the code given below in your webpage.

<!DOCTYPE html>
<html lang="en-US">
<head>

	<!-- google map -->
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&sensor=false"></script>
	<!-- google map -->

	<style type="text/css">
	#map{
		width: 100%;
		height: 500px;
	}
</style>

</head>

<body>

	<div class="map" id="map"></div>

	<script type="text/javascript">

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

		function init() {

			var mapOptions = {
				zoom: 2,
				center: new google.maps.LatLng(63.6452439,96.5098363),
				streetViewControl: false,
				heading: 90,
				tilt: 90,

			};

			var mapElement = document.getElementById('map');

			var map = new google.maps.Map(mapElement, mapOptions);

			/*marker*/

			var contentString = '<div id="content">'+
			'<div id="siteNotice">'+
			'</div>'+
			'<center><h3>Google Map</h3><a href="https://maps.google.com/?q=Russia" target="_blank">See Directions</a></center>'+
			'<div id="bodyContent">'+
			'<p></p>'+
			'<p></p>'+
			'</div>'+
			'</div>';

			var infowindow = new google.maps.InfoWindow({
				content: contentString
			});

			var marker = new google.maps.Marker({
				position: new google.maps.LatLng(63.6452439,96.5098363),
				map: map,
				title: 'PHOENIX',
				clickable:true
			});

			infowindow.open(map, marker);

			marker.addListener('click', function() {
				infowindow.open(map, marker);
			});

			/*marker*/

		}

	</script>

</body>

</html>

Now you need a API_KEY click here to create Google Map Javascript API KEY. Get API KEY and add in https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry&sensor=false given in above code.

You can also use this AIzaSyCA7qMLbjrJLGF9YN0ydY4Xdbzx3b6QFQE google maps js api free.

And To customize the map code given above read the options available in google map javascript api.

If you want to create custom google map design or want to customize google map with multiple markers and polylines. Read our article How to make custom google map design in javascript.

And if you want more tutorials and tricks about javascript then visit our Javascript page and follow us on facebooktwittertumblrlinkdedin and if you like this article then share this.