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.<\/p>\n
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.<\/p>\n
Many website use maps for all sorts of interesting purposes. This\u00a0article\u00a0provides some additional ideas on how you can use the Google Maps API with your browser-based application.
\nFor creating a google map application, you need to know html, css, js.<\/p>\n
HTML is used to create the markup of the pages. I\u2019ll use some new HTML5 tags for creating this google map.<\/p>\n
Since most of the CSS enhancements are done by jQuery, it isn\u2019t extremely required extensively. However, I\u2019ll use a few rules to correct or modify some designs as you\u2019ll see later.<\/p>\n
The business logic is entirely written in JavaScript; therefore if you don\u2019t apprehend some key ideas like what\u2019s a Callback or a closure, you need to study it before continuing.<\/p>\n
To use this instance, you want to acquire a developer key.\u00a0Google provides two types key: paid and free.<\/strong>\u00a0You would like the free key for this instance. The paid key will give significant additional flexibility, and you\u2019ll doubtless want it for any full-fledged application you will create.<\/p>\n 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\u2019ll additionally notice some extra help in using the Google Maps API with JavaScript.<\/p>\n 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.<\/p>\n Read Also:\u00a0The Best News, Magazine, Blog and Multipurpose Theme<\/a><\/strong><\/p>\n 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\u2019ll use the following HTML5 template; reserve it as \u2018map.html\u2019.<\/p>\n 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><\/p>\n 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.<\/p>\n 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.<\/p>\n The async attribute lets the browser render the remainder of your website where the Maps JavaScript API gets. Once the API is prepared, it\u2019ll call the function fixed using the callback parameter.<\/p>\n To start writing the JavaScript code that sets up the map, you\u2019ll 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.<\/p>\n 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\u2019t build the application terribly helpful, therefore the two spinner\u2019s modification the inputs by a tenth of a degree at a time.<\/p>\n 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 \u2013180 degrees east of Greenwich, England.<\/p>\n Latitude and Longitude Finder on Map Get Coordinates\u00a0https:\/\/www.latlong.net\/<\/a><\/p>\nNow Create Google Map Application<\/h3>\n
Step-1<\/u><\/h2>\n
Create An HTML file<\/h4>\n
<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t\t<meta charset=\"utf-8\">\r\n\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n\t\t<title>Google Map<\/title>\r\n\t\t<link rel=\"stylesheet\" href=\"#\">\r\n\t<\/head>\r\n\t<body>\r\n\t\t<div id=\"map\" ><\/div>\r\n\t<\/body>\r\n<\/html>\r\n\r\n<\/pre>\n
Step-2<\/u><\/h2>\n
Style the Map Container<\/h4>\n
\t\r\n<style>\r\n\t#map {\r\n height: 500px;\r\n width: 100%;\r\n \t }\r\n<\/style>\r\n\r\n<\/pre>\nStep-3<\/u><\/h2>\n
Include the Google Maps JS file<\/h4>\n
\t\r\n<script async defer\r\n\t\tsrc=\"https:\/\/maps.googleapis.com\/maps\/api\/js? callback=initMap\">\r\n<\/script>\r\n \r\n<\/pre>\n
Step-4<\/u><\/h2>\n
Create the Map Object<\/h4>\n
\t\r\n<script>\r\n \tfunction initMap() {\r\n \tvar dhaka = {lat: 23.777176, lng: 90.399452};\r\n \tvar map = new google.maps.Map(document.getElementById('map'), {\r\n \t\tzoom: 4,\r\n \t\tcenter: dhaka\r\n \t});\r\n \tvar marker = new google.maps.Marker({\r\n \t\tposition: dhaka,\r\n \t\tmap: map\r\n \t});\r\n \t}\r\n<\/script>\r\n \r\n<\/pre>\nGet Latitude and Longitude<\/h3>\n