How to Create Google Map Using HTML5 and JavaScript

March 25, 2018June 25, 2018By reveal 0 Comments

Google Maps JavaScript API is an easy-to-use and fairly powerful JavaScript tool that allows us to form and show maps on an internet site. This article will guide you in setting Google Maps JS API, so building a straightforward map that contains a marker and a polyline form, and a couple of different options. It helps to learn How to Create Google Map Using HTML5 and JavaScript.

How To Create A Simple Google Map API Application

To create an HTML5 google map, the browser you interact with must support HTML5. This means that you need to use newer browser versions, such as Internet Explorer 9.

Many website use maps for all sorts of interesting purposes. This article provides some additional ideas on how you can use the Google Maps API with your browser-based application.
For creating a google map application, you need to know html, css, js.

HTML:

HTML is used to create the markup of the pages. I’ll use some new HTML5 tags for creating this google map.

CSS:

Since most of the CSS enhancements are done by jQuery, it isn’t extremely required extensively. However, I’ll use a few rules to correct or modify some designs as you’ll see later.

JavaScript:

The business logic is entirely written in JavaScript; therefore if you don’t apprehend some key ideas like what’s a Callback or a closure, you need to study it before continuing.

Need A Developer Key

To use this instance, you want to acquire a developer key. Google provides two types key: paid and free. You would like the free key for this instance. The paid key will give significant additional flexibility, and you’ll doubtless want it for any full-fledged application you will create.

However, for experimentation functions, the free key works simply fine. Check that you perceive the terms of service absolutely before you start operating with the Google Maps API. You’ll additionally notice some extra help in using the Google Maps API with JavaScript.

Now Create Google Map Application

The easiest way to begin learning regarding the Google Maps JavaScript API is to examine an easy example. The following content displays a map focused on Dhaka, Bangladesh.

Step-1

Create An HTML file

Open your webpage. If you do not have already have a webpage you would like to insert the map into a new webpage or html file. You’ll use the following HTML5 template; reserve it as ‘map.html’.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Google Map</title>
		<link rel="stylesheet" href="#">
	</head>
	<body>
		<div id="map" ></div>
	</body>
</html>

Step-2

Style the Map Container

You need to set how large the map will be when it is displayed, and you should use CSS to do this. You can add the following to the document <head></head>

	
<style>
	#map {
        height: 500px;
        width: 100%;
   	 }
</style>

Step-3

Include the Google Maps JS file

To do this, paste the following line of codes into your HTML file, inside the <body></body> area, on a new line, just before the closing </body> tag.

	
<script async defer
		src="https://maps.googleapis.com/maps/api/js? callback=initMap">
</script>

The URL contained within the script tag is that the location of a JavaScript file that gets all of the symbols and definitions you wish for using the Maps JavaScript API. This script tag is needed.

The async attribute lets the browser render the remainder of your website where the Maps JavaScript API gets. Once the API is prepared, it’ll call the function fixed using the callback parameter.

Step-4

Create the Map Object

To start writing the JavaScript code that sets up the map, you’ll need to add a <script></script> area to the <body></body> after the map container div. Also inside of this, you can create the map object by calling the Map() function of the google maps object. You will also need to write the function to map container html element.

	
<script>
      	function initMap() {
        	var dhaka = {lat: 23.777176, lng: 90.399452};
        	var map = new google.maps.Map(document.getElementById('map'), {
          		zoom: 4,
          		center: dhaka
        	});
        	var marker = new google.maps.Marker({
          		position: dhaka,
          		map: map
        	});
      	}
</script>

To make it easier to browse a part, the instance provides spinner controls for the latitude and longitude inputs. Moving a whole degree at a time wouldn’t build the application terribly helpful, therefore the two spinner’s modification the inputs by a tenth of a degree at a time.

Notice the employment of the step choice to perform this task. Latitudes vary from 90 degrees north to -90 degrees south, therefore the example reflects this demand. Likewise, longitudes vary from 180 degrees west to –180 degrees east of Greenwich, England.

Get Latitude and Longitude

Latitude and Longitude Finder on Map Get Coordinates https://www.latlong.net/

Hope, these guidelines will help you and if you have any question, please ask us freely through commenting or you can contact us with contact us page.