How To Embed A Map To Your Website

by Rubie Tiburcio

Integrating with the Google Maps API is quite intuitive. With Sitecast Editor, we simplify the way to add locations into your websites.

Create A Block

In the Sitecast Editor, create a new block. In this example, we will call it location. This will serve as a reusable code block for your map.

Google Embed Map API

Get familiar with the Google Embed Map API Documentation, request an API Key, copy and paste the following code:

<iframe src="//www.google.com/maps/embed/v1/place?q=Harrods,Brompton%20Rd,%20UK
      &zoom=17
      &key=YOUR_API_KEY">
</iframe>

Replace YOUR_API_KEY with your newly created Google API Key and save your changes.

Attach Block To Screen

Attach the location block to any of your screens to view your changes in your development environment.

{{ blocks.location.body }}

Leverage Bootstrap Framework

To make the location responsive, we will use the embed-responsive, embed-responsive-21by9, and embed-responsive-item Bootstrap classes.

Your new code:

<div class="container embed-responsive embed-responsive-21by9">
    <iframe
      class="embed-responsive-item"
        width="600"
        height="450"
        frameborder="0" style="border:0"
      src="//www.google.com/maps/embed/v1/place?q=Harrods,Brompton%20Rd,%20UK
      &zoom=14
      &key=YOURAPIKEY" allowfullscreen>
  </iframe>
</div>

Sitecast And Google Map API

Map View

If you want to change the view mode of your map, simply append the parameter &maptype=satellite to the src url.

Now you have added a map to your page, you can optimize it for all the viewports, add the block anywhere in your website or web apps, or leverage the integrated Content Management System to make the coordinates dynamic. Keep exploring and keep having fun building amazing web pages. Good luck!