Shortcodes

Google Maps

Google Maps offers powerful, user-friendly mapping technology and local business information — including business locations, contact information, and driving directions.

Embedding a Google Map

You can embed a Google Map into your WordPress.com blog using the following instructions.

  1. Visit Google Maps.
  2. Type in any street address or geographic location and click the Search button.
  3. Once your map is fully loaded, click on the Menu icon found in the upper left corner of your browser window.
  4. Select Share or embed map and a popup will appear, as illustrated below.
  5. Select the Embed tab as above and copy the code from the box. The code will begin with <iframe.
  6. In your WordPress.com dashboard, go to Posts  Add New or Pages  Add New (or open an existing post/page in editing mode). Open the Text Editor and paste the code directly into your post or page.
  7. Click Save Draft, Update, or Publish depending on the status of your post or page. You will notice that the code has changed. WordPress has converted the HTML code into the working shortcode.

Here is an example of what the embedded map will look like.

↑ Table of Contents ↑

Embedding a Custom Map

You can embed a Custom Google Map into your WordPress.com blog using the following instructions.

  1. Visit Google Maps.
  2. Click on the Menu icon found in the upper left corner of your browser window.
    maps menu
  3. Select My Maps, and choose either a map you have already created or to create a brand new one.
    Screen Shot 2015-08-14 at 2.01.08 PM
  4. Once you have the map you would like to use, click ShareScreen Shot 2015-08-14 at 2.01.56 PM
  5. A window will appear, as illustrated below.

    If your window says something other than “Public on the web”, click on Change and select Public.
    googlemaps-public
    Save those changes and close out of the Sharing window.
  6. Click the More icon next to the Share button (it looks like three vertical dots), and a menu will appear. Select Embed on my site from that list.
    Screen Shot 2015-08-14 at 2.09.15 PM
  7. This will open a window with an embed link. Copy the entire code.
    googlemaps-embedcode
  8. In your WordPress.com dashboard, go to Posts  Add New or Pages  Add New (or open an existing post/page in editing mode). Open the Text Editor and paste the code directly into your post or page.
  9. Click Save DraftUpdate, or Publish depending on the status of your post or page. You will notice that the code has changed. WordPress has converted the HTML code into the working shortcode.

Here is an example of what the embedded map will look like.

↑ Table of Contents ↑

Additional Info

  • When adding Google Maps to your WordPress.com blog, do NOT manually open the shortcode as you normally do with other services (i.e. do not begin typing the shortcode and then paste the Maps code). This will not work.
  • If your code isn’t working, try using a physical address. Addresses created with longitude and latitude coordinates rather than a physical address may not give you a workable code.
  • If your custom map doesn’t load correctly, make sure that your generated shortcode still links to mapsengine.google.com and did not change to maps.google.com.googlemaps-enginecheck
  • You can insert multiple maps into a single post or page.
  • To change the dimension of the map, click on the drop down menu during step 4 above. This will automatically update the iframe code.
  • To make text flow around the map, you can add an alignment option in the shortcode:
    • align=”left” – The map will appear on the left, with text flowing to the right.
    • align=”right” – The map will appear on the right, with text flowing to the left.

    maps-alignment

Still confused?

Contact support.

Not quite what you're looking for?

Get Help