Note:

 

 

This is an instruction for acquiring your maps embed code and embedding it in a website.

 

 

If your WordPress website is on a WP-hosted domain, it 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. 

 

The article includes a list of instructions for embedding to:

• Embed a map in a Blogger post.
• General blogs/websites.
• Websites you're building.
• WordPress domain websites.

Google basemaps have monthly view limits that determine the map used based on allowed views: Google basemaps - Views per month.

 

Get the Embed Code

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. 
     For example: View the overlay list, zoom the view, and click and drag the view.

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

      
     OR
   • Image - The user can click anywhere on the embedded map to open a new browser tab displaying the 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 the embed Code

1. When you're ready to embed the map, click the embed code field to copy the text.
    
2. Copied to clipboard. Click Ok.

Embed a map in a Blogger post

Create a post in Blogger

1. Log in to your Blogger account.
    
2. In the top-right corner of the page, click the button: "New Post".
   The app will transfer to the "Post Edit" page.

Paste the embed code

1. In the "Title" field, type in the title of the post.
    
2. Under the "Title" field, click the "< >" button. Then click "HTML view".
    
3. Paste the embed code text into the Blogger post.

   Paste by clicking the text field. Then use your keyboard to press:

   • Quick Key: Ctrl + P (for Windows).
   • Quick Key: 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.

   Note: If the embed code is for an interactive map, the preview is not interactive. The map will only be interactive when published.

    
3. When ready, click the "Publish" button.

View Contents ↑

Embed a map on a blog/website - General

1. Paste the embed code text on your blog or website.

   Paste by clicking the appropriate location. Then use your keyboard to press:

   • Quick Key: Ctrl + V (for Windows).
   • Quick Key: Command + V (for Macs).

    

    

View Contents ↑

Embed a map on a website you're building

Open the HTML file and paste the embed code

1. Open the HTML file in your text editor software. For example; Notepad++, or Sublime Text.
    
2. Paste the code text in the HTML file.

   Paste by clicking on the appropriate location in the HTML file. Then use your keyboard to press:

   • Quick Key: Ctrl + V (for Windows).
   • Quick Key: Command + V (for Macs).

    

    

Preview the HTML file on your computer

1. In the text editor software, save the HTML file.
    
2. To preview the web page, open the HTML file where it's located on your computer.
   You can use your preferred browser software to open the file. For example; Chrome, Safari, or Firefox.

   Note: You can add a CSS-styled border around your map by putting the map’s embed code into "div" tags.

    

View Contents ↑

Embed a map in a WordPress post

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.
    

Paste the embed code

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

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

   • Quick Key: Ctrl + V (for Windows).
   • Quick Key: Command + V (for Macs).

    

   Note: If your WordPress website is on a WP-hosted domain, it cannot include interactive features. The published map must be in image format.

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.

View Contents ↑

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

View Contents ↑

See also

Sharing and Presenting a Map - (E.g. Reddit post)

Share Without Left-side menu - Solved!