Note:

This is an instruction for embedding a map in a WordPress post on a self-hosted domain. So the embedded map can include interactive features. For example, the map user can:

• Zoom the view.
• Click-and-drag the view.
• Toggle the display of the overlay list.

To learn how to embed a map in a post on a WP-hosted domain, visit this link:
Embed a map in a WordPress post - (WP-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 either:
   • Interactive - You set the options for how the user can interact with embedded map accessories.
     OR
   • 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]"
    
3. (Optional) For interactive maps, you can change the "Theme". Select the radio button for either:
   • Light - The map footer is light gray.
     OR
   • Dark - The map footer is dark gray.
    
4. Under the "Width" heading, type in the number of pixels for the width of the embed.

   Note:

   For Interactive maps, the width limit is 1500px.

   For Image maps, the width limit is:

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

    

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

   Note:

   For Interactive maps, the height limit is 1500px.

   For Image maps, the height limit is:

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

    

    
6. (Optional) For interactive maps, this list explains what happens when you click to check each of the option checkboxes.

   Use Current View - The embedded map's initial zoom-level is determined by the zoom-level in Scribble Maps when you copied the embed code.

   See option checkbox: Auto-fit Content.

    

   Auto-fit Content - The map automatically zooms to fit all of the saved overlays.

   Note: "Auto-fit Content" is prioritized over the checkbox, "Use Current View".

    

   Map Type Control - The user can select a different map type from the same map provider. For example:

   • Google > Hybrid can be changed to
     Google > Road.
      
   • ESRI > Satellite can be changed to
     ESRI > Topography.

   Zoom Control - The user can change the zoom-level by using the "+"/"-" buttons in the embedded map. When the user tries to use the mouse’s scroll wheel without pressing "ctrl", this message will appear: "Use ctrl + scroll to zoom the map".

   See option checkbox: Disable ctrl+zoom.

   Search Control - The user can click the Magnifying Glass Icon to type a location's name into the search field.

   Legend Control - Checkbox feature N/A.
   Possible solutions:

   • If you create a legend on the map, the user can click-and-drag the edge of the legend to move it to a new location.
   • If you enable "Allow Toggle" for an item in the legend editor window, the user can toggle the item's display on/off in the embedded map.

   Share Icon - The user can access the map’s Share Icon's options, including sharing the map via: Facebook, Twitter, or email. The user can also copy the map's:

   • URL ("scribblemaps.com/[yourmap]").
   • Embed code (iframe).

   Marker Clustering - Checkbox feature N/A.

   Definition:

   In the Map View, 2 or more markers can overlap. When marker clustering is activated, the overlapping markers are removed, and a green circle displays the quantity of removed markers.

   Possible solution:

   Before saving the map, you can activate marker clustering by:

   1. Clicking the Gear Icon in the bottom-left corner of the map footer.
      You will see the "SETTINGS" window.
       
   2. Under the "Other Settings" heading > "Marker Clustering" sub-heading, click the "On" radio button.

   Enable Drag - The user can click-and-drag the map to view another section.

   Disable ctrl+zoom - Removes the requirement for the user to press "ctrl" when using the mouse's scroll wheel to zoom the map.

   Note: For this checkbox to affect the map, the "Zoom Control" checkbox must be checked.

   See option checkbox: Zoom Control.

    

   GPS Control - The GPS Tracking button is displayed in the embedded map. When the user clicks the button, a pop-up appears asking the user to enable GPS Tracking in their browser settings.

   Note: To make the message appear in the preview window, you may need to manage your browser settings. This example is for Chrome browsers.

   1. In the "Get Widget" window, click the "Preview" button.
       
   2. In the preview window, click the GPS Tracking button.
       
   3. Click the GPS Tracking Icon displaying the red "X" square.
      The icon is located in the top-right corner of the preview window.

   Overlay List - The overlay list is displayed in the initial view of the map. The user can also toggle whether the overlay list is displayed.

   Map Title - The map title is displayed in the center of the map footer.

    
7. (Optional) Click the "Preview" button to view a pop-up window displaying how the map embed will look.
   For interactive maps, the selections in the option checkboxes are applied to the preview window.

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 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 + P (for Windows).
   • Command + P (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