Creating your first map

This article covers creating and publishing your first map with WP Google 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 Google 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 (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 | Center | 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 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 → CategoriesHow 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

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 Google 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?

5 Comments

  • Kim Sleno says:

    Thank you it was easy to use and looks great!

  • Natarajan says:

    Hi ,

    Thanks for the document. I clearly explains how to save and display the map in website.

    Thanks alot.

  • Giovanny says:

    Hi, I have installed WP Google Maps, I can see MAPS in my navigation link, but inside My Maps, don´t appear “My first map” and I can´t create maps.
    Can you help me, please?
    Tks

  • Stephan says:

    Thanks in Advance –
    I upgraded to Pro, and installed the add-on plugin.
    I created a new map with new GPS and added the correct marker for the address.
    But the Map for a previous, deleted, address still shows on the map page.
    How do I fix this!?

    • admin says:

      Hi
      You simply need to remove the old shortcode and replace it with your new map’s shortcode

      Kind regards
      Nick