Codeable info

Using Google Maps To Display Locations

Posted on by in WordPress Tutorials

Several social network icons, namely Facebook and Myspace, have integrated GPS location support into their already extensive features list. Users can now “check in” with their current location and allow friends or family to see where they are in relation to a geographical map.

This feature, or GPS tagging option is also referred to as Location services. Locations, places and landmarks can all be displayed on a simple aerial layout through the use of a web hosted map service (Google Maps).

The location services feature is an excellent one to implement on any site and is something that, believe it or not, everyone can take advantage of. Facebook and Myspace may have thrown GPS tagging into the spotlight, but they certainly did not invent it, nor are they the only companies in the world to take advantage of said support.

With the help of Google Maps any blog or website can integrate GPS tagging into posts, site content or even local advertising banners.

Bloggers and writers can provide their readers with a more direct reference through the use of such a feature. For instance, if a writer reviews a particularly well established restaurant they can directly reference its location by adding a Google Map GPS marker, their readers can then interact with the map and decide if the restaurant is close enough to visit, or not.

In this tutorial we are going to learn how to integrate GPS tagging or take advantage of location services through the use of Google Maps.

Before continuing however those interested will need to sign up with Google to receive a Google Maps API key. This key can then be used to activate the related code and display a Google map on any blog post or website.

Displaying A Landmark

The following code must be placed in your “Functions.php” source file for the active theme of your blog (be sure to do a complete database backup before altering the file, just in case):

function googlemap_shortcode( $atts ) {
    extract(shortcode_atts(array(
        'width' => '500px',
        'height' => '300px',
        'apikey' => 'GM-API-Key-Here',
        'marker' => '',
        'center' => '',
        'zoom' => '13'
    ), $atts));
 
    if ($center) $setCenter = 'map.setCenter(new GLatLng('.$center.'), '.$zoom.');';
    if ($marker) $setMarker = 'map.addOverlay(new GMarker(new GLatLng('.$marker.')));';
 
    $rand = rand(1,100) * rand(1,100);
    return '
	function initialize() {
	  if (GBrowserIsCompatible()) {
	    var map = new GMap2(document.getElementById("map_canvas_'.$rand.'"));
	    '.$setCenter.'
	    '.$setMarker.'
	    map.setUIToDefault();
	  }
	}
	initialize();
    ';
}
add_shortcode('googlemap', 'googlemap_shortcode');

In the code above you must enter your Google Maps API key in the section marked “GM-API-Key-Here”. The GPS markers and map service WILL NOT work without a personalized Google Maps API key.

In order to use the feature in posts and on websites you will need to implement the command tag which calls upon the Google Maps function. Not only will you need to implement the call tag, but the map coordinates and information as well for the location in question. More specifically the “center”, “marker”, and “zoom” coordinates tell the map what location to display.

The code to implement the feature is as follows:

[googlemap]

However to also implement specific coordinates the code must be entered like so:

[googlemap zoom="#" center="X, Y" marker="X, Y" width="500px"]

Of course the “#” entry must be replaced with a zoom rating for the map and the “X” and “Y” entries must be replaced with the X and Y coordinates for the related location.

Otherwise if the information is entered correctly you (or your writers) will now be able to directly reference locations and landmarks using the Google Maps service.

)
Codeable info

Comments (1)

Comment by Sam Brentnall says:

Hi,

Is this using google maps api v3 or v2?

Regards,

Codeable info