Download! Download Point responsive WP Theme for FREE!

How to Integrate Google Map in your Website

Today we will discuss about “How to Integrate Google Map in your Website”

So Let’s see

How to Integrate Google Map in your Website

How to Integrate Google Map in your Website

STEP 1 :

Go to https://developers.google.com/maps/

Click on what type of plateform that you want google map.

I am explaining you for the web (see the screenshot below)

How to Integrate Google Map in your Website

 

STEP 2 :

1.2 get started with javascript API v3

Click JavaScript

How to Integrate Google Map in your Website

STEP : 3

Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.

How to Integrate Google Map in your Website

 

STEP: 4

Activate Google Maps JavaScript API v3as shown below

How to Integrate Google Map in your Website

 

After enabling the Google Map Javascript API you have to accept the terms as shown

How to Integrate Google Map in your Website

 

Next you have to add your site details

How to Integrate Google Map in your Website

How to Integrate Google Map in your Website

 

 

Click the Web Application (Accessed by Web Browsers over a network)

How to Integrate Google Map in your Website

 

 

You are all done with your website integration

STEP : 5

Add code below and test you website

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY"&gt;
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, "load", initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

How to Integrate Google Map in your Website

This is all about How to Integrate Google Map in your Website

 

 

If you have any queries or suggestions please comment below