Introduction
Google map is the useful tool for finding the direction and location. Google map can easily be inserted in our website or project using API.
In this tutorial, we will be learning about inserting the map in our project or website. The use of map on company website is to find out the exact location of that company.
Some steps to be followed for inserting the map to the website.
Get an API key
Yes, you are required to get a google maps API key to fetch the location from map. It is a random API key provided for every developer by google. You can login and in google cloud platform, and create your own API.
Create the html container for the map
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body{
height:100%;
}
#map{
height:60%;
}
</style>
</head>
<body>
</html>
Add external JavaScript by google inside the html file
<script src="https://maps.googleapis.com/maps/api/js?key= << API KEY >> &libraries=places"></script>
Write the JavaScript code to place the google map.
var myLatLng = {lat: 51.5, lng: -0.1};
var mapOptions = {
center: myLatLng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//create map
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
Check the screenshot of the output below:
Normally I do not read article on blogs however I would like to say that this writeup very forced me to try and do so Your writing style has been amazed me Thanks quite great post
I just could not depart your web site prior to suggesting that I really loved the usual info an individual supply in your visitors Is gonna be back regularly to check up on new posts
obviously like your website but you need to test the spelling on quite a few of your posts Several of them are rife with spelling problems and I to find it very troublesome to inform the reality on the other hand Ill certainly come back again
helloI really like your writing so a lot share we keep up a correspondence extra approximately your post on AOL I need an expert in this house to unravel my problem May be that is you Taking a look ahead to see you