Creating your first map

This article covers creating and publishing your first map with WP Go Maps.

The following sections can be found in this help file:

Creating your First Map and Understanding the Basic Settings

After you’ve installed the WP Go Maps (WPGM) plugin, you should see a new Maps link in the left navigation menu of your WordPress Dashboard (left sidebar when you are logged into WP Admin).

chrome_2016-08-31_11-58-42

Clicking on the Maps link will take you to the page shown below. This is where you can edit your map or create new maps once you’ve upgraded to the Pro Add-on.

chrome_2016-08-31_11-49-52

Click on the Edit link to edit the map. This will take you to the Create Your Map page shown below.

image09

General Settings

    • Shortcode: This is the shortcode you will copy to display your map on a post or page (this will be explained in detail below).
    • Map Name: Edit this to change the name of the Map (it does not show up on the front end).
    • Map Dimensions: This is where you can set the dimensions (width and height) of your map. Values can be changed from pixels to percentile (%) if desired. Make your map responsive (mobile-friendly) by setting the width to 100% and the height to 400px.
    • Click on the Save Map button. Your map will load again with the dimensions you inserted.
    • Zoom Level: The starting Zoom Level for your displayed map can be changed by dragging the blue circle on the bar.
    • You can also set the zoom on the Preview Map on the lower-half of the page using the mouse scroll wheel or zoom controls. Press the Save Map button.
    • Starting location: Using your mouse, click and drag the Preview Map to the desired starting location and then press the Save Map button.
    • Map Alignment: Change the alignment of the displayed map.  (Left | Centre | Right | None).
  • Map Type: (Roadmap| Satellite | Hybrid | Terrain).

image01

Roadmap

image06

Satellite

image11

Hybrid

image02

Terrain

Saving Your Map

To save the changes to your Map, click the Save Map button.

Advanced Options

This article does not deal with advanced options; you can find information about them in the following documentation articles:

Creating your First Marker

Scroll down to find the Markers section of the page.

chrome_2016-08-31_11-51-49

To add a Marker to your Map, fill in the fields as described below.

    • Title: Use this field to give a descriptive name for your marker. This shows up at the top of your marker’s InfoWindow when clicked on by a user.
    • Address/GPS: Insert the address or GPS coordinates of the location you want to mark. The plugin will place the marker on the map based on this setting. If the placed marker is not in the exact position that you want, you can drag it to the preferred location. This is the only required field on this settings panel.
    • Description: Use this to describe your marker in more detail. You can use HTML here.
    • Pic URL: If you want to use an image in the InfoWindow for your marker, either paste the full image URL (including http://) in the text box or click the Upload Image button to upload an image to the Media Library.
    • Link URL: If you would like a link in the marker’s InfoWindow, insert the full URL here (including http://). This URL will allow visitors to open a web page from the marker’s InfoWindow.
    • Custom marker: This allows you to use a custom PNG image as the marker icon instead of the default image (the red tear drop). How to add custom markers.
    • Category: If you want to assign the marker to a particular category, select the category here (you must create the category first). To create Map Categories see WordPress Dashboard → Maps → Categories. How to add custom marker categories.
  • Animation: (None | Bounce | Drop).

image04

    • None: Marker appears normally on the Map (static – no movement).
    • Bounce: Marker jumps up and down on the Map continuously.
  • Drop: Marker drops in from above when the Map is loaded and then stops moving.

InfoWindow open by default

Select whether the Marker’s InfoWindow opens by default. The default value is No, which shows the InfoWindow only when the Visitor clicks on the Marker.

Display on front-end

Select whether to show this Marker on the front-end of your website. The default value is Yes.

Once you’ve entered all your settings, click on the Add Marker button. Your new marker should now appear on the map as well as in the marker list.

Displaying Your Map on Your WordPress Site

Firstly, navigate to the page you would like to display.

Next, to display your map on your website, simply add a WP Go Maps block to the page from the Gutenberg “Add Block” menu.

We do not currently support preview on the back end.

You can reach the map editor directly from the panel on the right, and view our documentation from there too.

Displaying Your Map on Your WordPress Site (without Gutenberg)

To display your map on your website, you must copy and paste the Map Shortcode to a Post or Page. The Map Shortcode can be found at the top of the Create your Map page.

image00

Copy and paste this Shortcode onto a Post or Page. It should look like this:

image10

Once you’ve finished editing your post or page content, click the Publish button.

Your Map should display on the published post or page (front-end).

This covers creating your first map with the WP Go Maps plugin. If you need further assistance, feel free to post on our Support Forums or visit our Support Desk.

Was this article helpful to you?