Using Google maps in a WordPress plugin admin function

Google Maps API in Wordperss AdminFor a car dealer we build a number of plugins for his website. One plugin shows occasions and visitors can click on a car for more information. While clicking, information is saved in the database.

Unfortunately at the moment the geo information is related to the IP address and not the actual location, so it is a bit arbitrary. Nevertheless we created a very simple map in the admin section of the plugin to show click freqencies on towns.

No additional selection for filtering is added. This article shows how easy it is to add an option to your plugin and use external API’s like Google Maps

Google Maps API

In order to add a Google map to your site, you need to get a Google Maps API key for that site. This allows you to embed the maps into your web pages, and provides you with the terms and services for using the API key.

Google Maps API in Wordperss Admin

Some things you should know before you sign up for an API key:

  1. You must have a Google Account to get an API key. And that API key will be attached to your account.
  2. There is no limit to the pageviews you may generate using the Maps API.
  3. The Maps API does not currently contain advertising, but if they change that you will receive 90 days notice via Google announcment lists.
  4. Your service must be freely accessible to end users.
  5. You may not alter or obscure the logos or attribution on the map.

Additional information is available on the signup page

To use all the possibilities of Google Maps API, a good suggestion is to start here here.

Structure of the plugin

Google Maps API in Wordperss Admin

  1. In the plugin a menu option is added that can be clicked to show the map. This option will point to Hitlist.php.
  2. In the Hitlist.php the body of the HTML is defined which will be loaded when the option is clicked. Only the body is defined, for all the additional work is done by WordPress.
  3. The Google API we load directly from Google.
  4. Map.js holds the javascript code which is executing an AJAX call to the server, processes the data and builds the map.
  5. This is your php script on the server that generates the JSON with the structure of the sample below. A sample script is not shown, but the JSON sample must be of help.

The file structure of the plugin

JSON data structure from the server (5)

The structure of our JSON is fairly simple, for it will only contain places, their coordinates and a color that quantifies the intensity of clicks (green, yellow and red). Below is a sample of data coming from the server.

  • The first element is the place with the click count total for that place.
  • The second element is the longitude
  • The third elemenet is the latitude
  • The fourth element is the z-index marker, which makes it possible to bring point forward on the map by using higher values. We don’t use it in our sample.
  • The fifth element is the color, which will be used to determine the color of the point on the map (red, green, yellow).

This sample is the data returning from the server and which will be offered to the map javascript holding the Google Map API code (map.js).

Adding menu option to the WordPress Plugin (1)

It is assumed that is known how to write a WordPress plugin. When this experience is available the following code should be quite clear. Our samples assumes that the plugin name is CarSoftware. Please modify this for your own purposes.

First the file CarSoftware.php file is modified to add the "hitlist" menu option to the admin functions.

  1. The InsertAdminMenuLink is adding the menu option to the existing menu of this plugin. 
  2. In the AdminPages function the slug is queried through a switch statement. 
  3. The  case statement is pointing to the internal function HitlistMap which is sending the hitlist.php in the folder html to the browser.

html/Hitlist.php sending the map to the browser (3)

The Hitlist.php is a pretty straightforwarded script that most importantly loads the Google Map API and the map.js JavaScript. Furthermore there is a placeholder for the map (#map_canvas) and some styling.

map.js, building the Google Map (4)

In the source code below comment is added to explain every detail of the code.

Johan van de Merwe
Dedicated to professional software development since 1985. Has worked since 1992 as IT manager in several international operating companies. Since 2007 CEO and Sencha Ext JS web application developer at Enovision GmbH.


    • admin

      Google Map plugins mostly have effect on the frontend of a WordPress site. This article is about having a Google map as part of your backend plugin, not the frontend.

Leave a Reply