Note: This is a general instruction for embedding a map on a blog/website. There's a list of instructions for specific blogs/websites at the end of this article.

Save the map

1. 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.
     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. 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 into your blog or website, copy the embed code text.

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

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

    

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

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

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

    

    

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 website you're building

Embed a map in a WordPress post - (self-hosted domain)

Embed a map in a WordPress post - (WP-hosted domain)

Embed a map in a Blogger post

Embed a map in a Reddit post