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
Embedding a Custom Map
Additional Info

Embedding a Google Map

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

In Google Maps
  1. Visit Google Maps.
  2. Type in any street address or geographic location and click the Search button.
    google-maps
  3. Select Share and a popup will appear, as illustrated below.
  4. Select Embed a map and copy the code from the box. The code will begin with <iframe.
Google Maps - Share Embed
Open Google Maps → Search for a Location → Share → Embed → Copy HTML
In the WordPress.com Block Editor
  1. Edit the Page or Post you want to add the Google Map to.
  2. Add a new HTML Block.
    Google Calendar - HTML Block
  3. Paste the Embed code you copied from your Google Map.
    Google Maps - HTML
    HTML Block → Google Maps Embed code
  4. Publish, or Update your page or post.
  5. The next time you edit your page or post, you will notice the Embed code has been converted to shortcode.
Google Maps - Shortcode
Google Maps Embed converted to Shortcode

If you are using the Classic Editor, you can switch to the HTML tab in the editor to paste the Embed code.

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 site using the following instructions.

In Google Maps
  1. Visit My Maps.
  2. Choose either a map you have already created or create a brand new one.
  3. Once you have the map you would like to use, click Share.
    walk-through-town
  4. A window will appear, as illustrated below:
    sharing-settings

    If your window says something other than “Public on the web”, click on Change and select Public.
    public-map

    Save those changes and close out of the Sharing window.
  5. 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.
    embed-on-site
  6. This will open a window with an embed link. Copy the entire code.
    embed-this-map
In the WordPress.com Block Editor
  1. Edit the Page or Post you want to add the Google Map to.
  2. Add a new HTML Block.
    Google Calendar - HTML Block
  3. Paste the Embed code you copied from your Google Map.
    Google Maps - HTML
    HTML Block → Google Maps Embed code
  4. Publish, or Update your page or post.
  5. The next time you edit your page or post, you will notice the Embed code has been converted to shortcode.
Google Maps - Shortcode
Google Maps Embed converted to Shortcode

If you are using the Classic Editor, you can switch to the HTML tab in the editor to paste the Embed code.

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.
  • 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.
    google-map-size
  • If you want to have text next to the map, you can use a Columns Block to embed the code in one column, and text in the other.
Still confused?

Contact support.

Not quite what you're looking for?

Get Help