Plot multiple places on Google Maps – WordPress plugin

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

Screen Shot 2016-02-14 at 10.25.38 PM

7. Finally click the Create button which will generate the API Key

Step 2: Install the Google Maps plotter plugin

  1. Download the plugin files from WordPress plugins repository 
  2. 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

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

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

So the label and the data associated with it can be easily styled using the IDs in your CSS



Google Maps PHP API – Reverse Geocode

Reverse Geocoding is finding address by providing latitude and longitude


Geocoding an address using Google Maps PHP API

Geocoding address means finding Latitude and Longitude for physical address. This uses Google Maps PHP API.

E.g. Let’s assume we need to plot some events happening in various locations on Google Maps

Geocoding all events to find their latitude and longitude using below function

If the address provided is in a way google can understand, the above function returns $data_arr in array format where

latitude => $data_arr[0]

longitude => $data_arr[1]

Clean up Microsoft Word mark up in HTML

People are so used to using Microsoft word to type their content that it is not practical to even think of asking them to change and start thinking from a web perspective to produce a clean HTML and standards compliant markup using Adobe Dreamweaver or some other useful editor.
But the basic purpose of a CMS is to decentralize the content uploading process and to be able to achieve this Microsoft Word is the biggest hurdle CMS users all over are facing.

Till date there is no foolproof solution to this problem. Tools like HTML tidy, htmLawed etc do a descent job however it largely depends on how those tools are configured.
HTML tidy can work at the Apache level which is the most cleanest way whereas htmLawed works at the application level.

I liked htmLawed as it is very simple to use and quite flexible to change its configuration for different applications.
Here are some steps to use htmLawed

  1. Download latest source code of htmLawed and unzip to a local directory
  2. Upload the file htmLawed.php
  3. Include the above file on the page where you will be entering the wysiwyg data in the CMS database using an include statement include(“/path/to/file/htmLawed.php”)
  4. Depending upon the type of application, you can use any of the sample configurations. For other configuration, read the documentation.
    a. For a blog application where you want to accept only a few tags in comments like strong, paragraph, links, underline and italics

    b. For the rest of the articles