Plot events, photos, places, etc on Google Maps using a simple WordPress shortcode which is built using Google Maps API.
Everything below can be achieved easily with a simple plugin, XML file to provide the markers and a configurable shortcode
- Plot Multiple Locations on a Map
- Marker Clustering (markerclusterer)
- Ability to click each marker to get more details i.e. through a Marker popup
- Marker’s info popup details is customizable through shortcode and CSS
- Ability to set initial zoom level
Step 1: Get an API Key for Google Maps API
First of all we need an API key for Google Maps. You can get an API key from Google Developer Console
Here are the steps to create an API Key
1. Visit Google Developer console Projects page and create a project as per your requirement
2. Go to API Manager and select the project created in above step
3. Enable Google Maps JavaScript API and Google Maps Embed API
4. Click the Credentials link
5. Click New Credentials and select API Key. On the options page select Browser Key
6. Add your domain name as shown in below screenshot

7. Finally click the Create button which will generate the API Key
Step 2: Install the Google Maps plotter plugin
- Download the plugin files from WordPress plugins repository
- Install and activate the plugin
Step 3: Generate XML file for the Google Map markers
Make sure you have the markers XML file ready.
XML markers file can also be dynamically created through php from your database or it could just be a static file in below format
Sample XML file for the markers
|
<markers> <marker name="Some Place" topic="Some Topic" address="1st Street, City, Country" lat="6.8722333" lng="79.8632416" date="14-Feb-16" contact="" presenter="Mary" type="event"/> <marker name="Some other Place" topic="Some other Topic" address="2nd Street, City, Country" lat="72.68" lng="79.8632416" date="15-Feb-16" contact="" presenter="John" type="event"/> </markers> |
Read how to generate XML file dynamically – coming soon
Step 4: Display Google Map
Now just display the map on a page, post, custom post, widget, etc using below shortcode
|
[PW_PLOT_GOOGLE_MAP xml_file_path="/xml/sample_markers.xml" zoom=2 html="topic,Topic|presenter,Presenter|date,Date|contact,Telephone / Mobile" ] |
Zoom => In above shortcode the initial zoom level is set to 2
html => will display the marker popup text
Data attributes are separated with a bar (|)
Each data attribute has the data attribute matching to the XML file and the corresponding comma separated label
e.g. topic is the data attribute you wish to display while Topic is the label to it
Above html will display the popup as below after clicking the 1st Marker
Topic: Some Topic
Presenter: Mary
Date: 14-Feb-16
Telephone / Mobile:
Step 5: Stylize Google Maps Marker popup text
Now the last thing is to stylise the marker popup text
If you notice the source code for the marker. It is as below
|
<span id=“gplotter_attr_topic”>Topic</span><span id=“gplotter_data_topic”>Some Topic</span> |
So the label and the data associated with it can be easily styled using the IDs in your CSS
|
#gplotter_attr_topic{ } #gplotter_data_topic{ } |