CuteHits: Blogger Community Platform

Adding Google Map to your web page

by · Published · Updated

Post Views: 231

By Visiting this tutorial you will be able to find out about below:

*. How to Enable Google Map API from Google’s API Console

*. How to get Google API key, Using Google API console

*. How to get Google API Key,

*. Enable Google Map for specific address

*. Show google map based on your address

1. Visit https://code.google.com/apis/console  which have list of  APIs Console and log in with your Google Account.

2. From the right side under “APIs & auth ”  You will see APIs . Click on APIs

3. Enable the service “Google Maps Embed API ” . By default all the services/APIs are disabled by default you need to enable the required APIs untill unless you wouldn’t enable those services you wouldn’t be able to use these API. Since we need to use Google Maps for our website so we need to enable “Googe Maps Embed API”. Click on Off to make it On.

Google_API_Console

How to get Google API Keys:

1. Click on “Credentials ” under “APIs & auth ” section

2. Click on “Create New Key” button and select “Browser Key”

Once you will click on it . It will as from the URL from where you will create request for Google Map. After providing the URL’s you will see the keys .

Google_API_Console.png

Now You are ready with API keys. You just need to write proper code for it.

Source code to display Google Maps


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

</head>

<body>

<iframe

width="600"

height="450"

frameborder="0" style="border:0"

src="<a href="https://www.google.com/maps/embed/v1/place?key=--YOUR">https://www.google.com/maps/embed/v1/place?key=</a><a href="https://www.google.com/maps/embed/v1/place?key=--YOUR">--YOUR</a> GOOGLE KEY--

&amp;q=A-1+Morna,+Sector-35,+Golf+Course+Road,+Noida,+UP,+India"&gt;

&lt;/iframe&gt;

&lt;/body&gt;

&nbsp;

&lt;/html&gt;

 

In the above code you can see you need to pass your address under q=–YOUR-ADDRESS–

make sure under your address all spaces will be replaced with +. before passing it to iframe

 

 

 

 

 

 

 

 

Related posts:

Javascript example to get comma separated checked value from multi checkbox
The following two tabs change content below.
My Twitter profileMy Facebook profileMy Google+ profileMy LinkedIn profile

Chandra Shekhar

GCP Architect
Chandra Shekhar Pandey is Google certified Cloud engineer, I am Magento2 Trained developer. Having huge experience in designing cloud solution. I have around 12 years of experience with world enterprise IT companies and fortune 500 clients. During my architecture design I am always caring about high availability, fast performance and resilient system. From the programmer background I have huge experience in LAMP stack as well. Throughout my carrier I have worked on Retail, E-Learning, Video Conferencing and social media domain. The motive of creating cutehits was just to share the knowledge/solutions I get to know during my day to day life so that if possible I can help someone for same problems/solutions. CuteHits.com is a really a very effort for sharing knowledge to rest of the world. For any query/suggestion about same you can contact me on below details:- Email: shekharmca2005 at gmail.com Phone: +91-9560201363
My Twitter profileMy Facebook profileMy Google+ profileMy LinkedIn profile

Latest posts by Chandra Shekhar (see all)

Tags:

You may also like...