Google Map Blocks

Google has changed the way that Google Maps are embedded. While the Google Maps block still works, it is no longer the best way to embed Google Maps on your site. Instead, follow theses instructions.

Go to https://maps.google.com and search for the location you wish to appear in your map. Ideally, it will be a named location like "Busch Stadium" If the named location is known to Google Maps, the name of the location should appear next to a pin on the map and in the main location label for the map (usually along with a picture and description). If you search for a street address, Google may suggest named locations. If an appropriate named location is listed, select it. For example, if you search for "700 Clark Ave, St. Louis, MO 63102", Google Maps will list "Busch Stadium" as one of the items "At this location".

Once the map is displaying the desired information, press the "Share" icon. A panel will appear.

Choose the "Embed map" tab.

Since we're going to size the map directly in the code snippet that Google provides, you can ignore the size options.

Copy the code snippet provided.

Add an HTML Block to your page and paste in the Google Maps embed code snippet. It will look something like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3117.140702379427!2d-90!2sBusch+Stadium!5e0!3m2!1sen!2sus!4v1493741932300" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

Change the width value from a number (like 600 in this example) to 100%. So, it will be:

width="100%"

Change the height value to change the height of the embedded map. This is the number of pixels tall the map will be. There are 96 pixels to an inch, so for example, if you want the map to be about three inches tall you could enter 300 like:

height="300"

Save the block changes and publish when ready.

secret