Note:

This is an instruction for embedding a map in a WordPress post on a WP-hosted domain. So the embedded map cannot include interactive features. The published map must be in image format.

 

If your WordPress website is on a self-hosted domain, you can publish an interactive map. To learn how, visit this link:
Embed a map in a WordPress post - (self-hosted domain)

 

At the end of this article, there's a list of instructions for:

• General blogs/websites.
• Specific blogs/websites.

 

Create a post in WordPress

1. Login to your WordPress account.
    
2. In the top-right corner of the page, click the button: "Write".
   The app will transfer to the "New Post" page.
    
3. Leave the browser tab open. We'll return to WordPress later.

Save the map

1. In a new browser tab, open Scribble Maps at:
   https://www.scribblemaps.com/create 
    
2. Open the map.

   These are the possible methods:
   

   Load a map from the Your Maps window

   Load a map by using the Map ID - "Menu > Load Import"

   Upload an offline map file - "Menu > Load From Computer"

    
3. (Optional) Make any changes to the map.

   Note: Changes saved to the map automatically register on the embedded map.

    
4. In the top toolbar, click the "MENU" button.
    
5. Under the "Scribble Maps" heading, click the "Save Map" button.
   The "SAVE MAP" window will appear.
    
6. Click the button: "SAVE MAP".
   The "Map Saved" window will appear.

Configure the map embed

1. In the "Map Saved" window, click the button: "Widget / Embed".
   The "GET WIDGET" window will appear.
    
2. Under the "Type" heading, select the radio button for:
   Image - The user can click anywhere on the embedded map to open a new browser tab displaying your map.

   The map is hosted at: "scribblemaps.com/[yourmap]"

   Note: Interactive maps are not available for WP-hosted domains.

    
3. Under the "Width" heading, type in the number of pixels for the width of the embed.

   Note:

   For Image maps, the width limit is:

   • 650px for users who have Free accounts. 
   • 1500px for users who have Pro accounts.

    

    
4. Under the "Height" heading, type in the number of pixels for the height of the embed.

   Note:

   For Image maps, the height limit is:

   • 450px for users who have Free accounts.
   • 1500px for users who have Pro accounts.

    

    
5. (Optional) Click the "Preview" button to view a pop-up window displaying how the map embed will look.

Copy and paste the embed code

1. When you're ready to embed the map, copy the embed code text.

   Copy by clicking the embed code field. Then use your keyboard to press:

   • Ctrl + C (for Windows).
   • Command + C (for Macs).

    

    
2. Return to the WordPress browser tab.
    
3. In the "Title" field, type in the title of the post.
    
4. Under the "Title" field, click on the field: "Start writing or type / to choose a block". Then click the "+" button that appears.
    
5. In the pop-up window, type in: "HTML". Then click the "Custom HTML" button.
    
6. Paste the embed code text into the WordPress post.

   Paste by clicking the field: "Write HTML…". Then use your keyboard to press:

   • Ctrl + V (for Windows).
   • Command + V (for Macs).

    

Publish the post

1. Add the rest of the content to the post. For example; text, links, or images.
    
2. Test the display by clicking the "Preview" button.
    
3. When ready, click the "Publish" button.

Google basemaps - Views per month

Note: Once your Google map exceeds the number of read-only visits per month, your basemap will revert to a Scribble Maps basemap or similar equivalent map.

• Pro Basic - 1,500 views/month
• Pro Business - 5,000 views/month

See also

Embed a map on a blog/website - General

Embed a map on a website you're building

Embed a map in a Blogger post

Embed a map in a Reddit post