Computer Science Mojo

~ David's Notes on coding, software and computer science




Post

How to add Google Map Embed API for websites

Category: Web     Tag: HTML   Mapping   Web  
By: David     On: Sun 06 September 2015     

Embed and set up a Google maps window into your website or blog post which comes with unlimited free usage

Reading

1. The code from Google Maps Embed API

The simplest form of Google Maps:

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY
    &q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
  • width height: map size
  • key: get it in step 2
  • q: search query

2. The API key and credentials

2.1 Go to Google Developer Console and create a project
2.2 API Library > Google Maps Embed API
2.3 Credentials > Add credentials > API key > Browser key
2.4 Give the key a suitable name and in "Accept requests from these HTTP referrers" add the websites that this key will be used on
2.5 Copy the key into your code replacing API_KEY

3. The result