The Google Maps plugin allows you to embed, customize, and use Google maps in posts, pages and your sidebar. You can also display local images and let your site visitors get directions in seconds.
Once you have activated the Google Maps plugin in Plugins > All you can use it as follows:
What's On This Page?
Organize Google Maps API Key
Google Maps now requires users to organize their own Google Maps API Key and provide them with your payment information by adding your credit card information. If visitor usage of your maps exceeds the limits of their free plan you will begin payment. You can learn more about Google’s pricing model here.
The alternative option is you can create your map using Open Street Maps and embed into a text widget or a page using their HTML code located in their share option on the right hand side of their map. Open Street Maps is free to use.
You create your Google API key as follows:
1. Visit the Google Developers Console.
2. If this is your first time creating an API key you will first need to create a new project.
3. Next you will give your project a name and add your blog/website URL.
4. After clicking Create you will be presented with an API key with a name that matches your entry in the previous step.
5. Visit the API Console.
6. Select your Google Maps project from the list
7. From the console left side menu, select Billing.
8. Click Enable billing.
9. If you don’t have a billing account, create one.
10. Select your location, fill out the form, and click Submit and enable billing.
11. Go to Settings > Google Maps Pro.
12. Click on the Options tab and replace the current Google Maps API key with your Google Maps API key.
13. Click Save Changes.
Add to Post or Page
1. Go to Posts > Add New (or Pages > Add New)
2. Write your post.
3. Place your cursor where you want the map to be inserted and then click on the Google Maps icon.
2. Enter the location you want to display and then click Add Marker.
- This adds a place marker to your map and displays the location at the bottom of the map.
3. To add more location(s), just add the address(es) and then click Add Marker.
4. Alternatively you can add a location(s) by zooming in on your map, click on Drop Marker to add a Marker to your Map and then drag/drop it to the desired location.
5. Give your map a name.
6. Zoom in on your place marker(s) so your readers have the best map view of your location.
You can even change to street view by dragging the person icon onto the street location.
Below is what street view looks like:
7. Click on the Place Marker if you want to change the Title of location or add Information about the location.
You can also click on the Icon to change the Marker’s icon.
Below are some of the icons you can choose from:
8. Now click on Map Options to set your Map preferences.
Map options allow you to customize the look of your map.
Associate map with this post: select if you want to be able to create mashups from your maps.
Map size: allows you to change the default size of your Google Map.
Show posts: Used to add a link to the post associated with the Google map directly beneath the Google Map. You might use this option if the map was added to your sidebar.
Show map: Controls if the map is shown. For example, you might choose to hide the map if you wanted to embed a ‘Get directions’ only option.
Below is an example of ‘Get directions’ only.
Show marker list: Controls if the marker title and information is displayed below the map.
Below is what your Google map looks like if you deselect ‘Show Marker list”:
Show images strip: used to display Panoramio images below your map.
Below is an example of a Google Maps with Panoramio images below the map:
Show Panoramio overlay: used to display Panoramio images over your map.
Below is an example of a Google Maps with Panoramio images overlay:
Map alignment: Controls the alignment of the map in your post. Options are left, center, right.
9. Click Apply once you have chosen your map options.
10. Click Save changes in the Add Map window.
11. Click Insert this map.
12. The Add Map window will close and the map will be added to your visual editor using Google maps shortcode as shown below.
13. When you view your published post you will see your Google Map embedded in your post.
The Google Maps widget can be used to add an existing map, create a new map or add a mashup of maps to your sidebar.
1. Go to Appearance > Widgets
2. Click on the desired Sidebar to expand (so you can add the widgets)
3. Drag the Google Maps widget from the Available Widgets into the desired Sidebar.
4. The widget will automatically open.
5. Add your widget title.
6. Select which map(s) you want to use or create a new map by clicking on Create new map.
Map choices are:
- Current posts: Displays all Google Maps that are attached to post(s) that are shown on the current page.
- All Posts: Displays all Google Maps attached to all published posts.
- All: Displays all your existing Google Maps including any not attached to posts.
- Random Map: Randomly displays a map from your existing Google Maps.
- Use this map: Allows you to select from an existing map.
- Create new map: Allows you to create a new map.
7. Select your Show options.
Show options are:
- Show as one map: Combines multiple maps that you’ve selected to use into the one map.
- Show map: Controls if the map is shown. For example, you might choose to hide the map if you wanted to embed a ‘Get directions’ only option.
- Show marker list: Controls if the marker title and information is displayed below the map. When Show marker list is deselected you only see the map displayed.
- Show images strips: used to display Panoramio images below your map.
- Show posts in markers: Used to add a link to the post associated with the Google map directly beneath the Google Map.
8. Click Save at the bottom of the widget.
9. When you view your blog you will see your Google Maps displayed in the sidebar.
Creating map mashups
Mashups can be easily created by using Map Query shortcode in posts.
You need to have selected “Associate map with this post” in the Map Options window when creating a map for that map to be displayed using Map Query tag shortcode.
The following shortcodes can be used in posts to create mashups:
[map query=”all”] – This shows all maps associated with any posts on the site.
[map query=”current”] – This shows all maps associated with posts currently on the site.
[map query=”random”] – This shows a random existing map. It always displays a single map.
[map query=”tag=tagname”] – This shows all maps associated with any posts tagged with that tag on the site. For example, [map query=”tag=New York”] displays all maps associated with posts tagged New York.
Google Maps Default options
The Google Maps settings page controls the default map settings.
1. Go to Settings > Google Maps Pro
2. Click on Options tab.
3. Select your preferred Google Maps defaults from the options available.
3. Click Save Changes.
- Default map height: Controls the height of the map.
- Default map width: Controls the width of the map.
- Default map type: Controls which type of Google Map is embedded. Changes to Default map type applies to newly created maps only; not previously created maps.
- Default map zoom: Options are Earth, Continent, Region, Near by cities, City Plan and Details. Setting this to Region makes it easier to zoom in on your place marker.
- Default map units: options are metric or Imperial.
- Default image size: Controls the size of the Panoramio images.
- Default image limit: Sets the number of Panoramio images displayed below the map.
- Default map alignment: options are left, center and right.
- Snapping: When snapping is enabled it will try to find a reasonable address or location to drop the place marker.