Using the Google Ajax loader with Wordpress and Hybrid theme

Google Maps is fully integrated with the Google Ajax loader, which provides a convenient way to access a number of the Google APIs. The Google Ajax loader is extremely lightweight, and the relevent APIs can be called as and when necessary.

An aim of mine recently was to use the Google Ajax loader and use the Google Maps namespace on certain pages of a Wordpress installation which was to be used as a CMS. Using the Ajax loader makes a lot of sense in this case as you can load the appropriate API to serve specific functionality on a page by page basis. The Wordpress install uses the Hybrid theme which provides some great features out of the box such as inclusive SEO with overridable meta keywords and descriptions, and an extensible framework using number of filters in which theme developers can override and inject custom code.

To make use of Google Maps using the Google Ajax loader on a given page, we followed this procedure.

1. In \wordpress_dir\wp_content\themes\hybrid\header.php add another call to wp_enqueue_script after those that already exist, like the following, which allows access to the Ajax loader within your Wordpress pages:

<?php wp_enqueue_script('google.ajax', 'http://www.google.com/jsapi?key=_api_key_here_'); ?>

wp_enqueue_script is the standard way of loading scripts in Wordpress and has advantages over hard coding it as a script tag, such as only loading a given script if a previous dependancy has loaded, useful for loading a JQuery plugin conditional on the JQuery framework itself being loaded.

2. Install the raw HTML plugin. This will let us write in-line JS necessary for a contact us page or the like, without conflicting with Wordpress’ formatting or automatic paragraph generation.

3. Create a new page and wrap the JS necessary to create and setup the map within raw tags and paste onto the desired page.

The following code loads the Google Maps API v2, defines an initialise() function, and uses the Google AJAX loader setOnLoadCallback() function to call initialise() when everything is good to go. initialise() sets the map up on a div element with an id of ‘map’, and creates a marker with an information window, placed at the latitude and longitude specified.

<!--start_raw--> <script type="text/javascript"> google.load("maps", "2");

function initialize() { var map = new google.maps.Map2(document.getElementById("map")); var point = new google.maps.LatLng(37.4419, -122.1419); var marker = new google.maps.Marker(point); map.setCenter(point, 15); map.addOverlay(marker);

google.maps.Event.addListener(marker, "click", function() { marker.openInfoWindowHtml('info html fragment'); });

map.setUIToDefault();

} google.setOnLoadCallback(initialize); </script> <!--end_raw-->

If you’ve previously used the Google Maps API independently of the Google Ajax loader you need to remember that for any objects you create you need to replace the G prefix (i.e. GMap2) with the google.maps. prefix (so ’GMap’ becomes ’google.maps.GMap2’).

With this in place you can quite easily load other Google APIs as neccesary, and keep the overhead of loaded scripts in Wordpress to a bare minimum.