Google Maps Using PHP and Javascript

Published: 2007-05-12

The following code snippets will demonstrate a method of dynamically placing single or multiple markers onto a Google Map using PHP and Javascript. The examples allows you to specify some of Google's optional API parameters such as the Zoom function and Map types.

Ok, so it's always a little messy embedding html within a php class, it's just that originally this code was designed to work with multiple dynamic markers so the thought of generating javascript from lots of data sets in lots of files made that the lesser of two evils. Luckily it makes the system very easy to setup, use and maintain.

Download Files (.zip)

How To

Firstly you'll have to upload the javascript file to a publicly available directory, in this example we use /javascripts/gmap.js. The file contains all the required Javascript, including the onload events which set the maps center point and the functions to load the markers generated by PHP.

Secondly your script will need access to the WXGoogleMap class. There are two static methods, ::map - used to generate a single point marker and ::map_multiple_markers - used to place multiple markers.

For both of these examples you'll need a Google API key which can be obtained from http://www.google.com/apis/maps/signup.html.

Example 1 - ::map

WXGoogleMap::map($google_key str, $location str, $info str, $param array)

The following code will generate a map using the default params.

echo WXGoogleMap::map('google_key', 'Birmingham', 'This is Birmingham'); ?>

You can customise a map layout by passing an optional array parameter, possible parameters and values are listed at the end of this article.

Example 2 - ::map_multiple_markers

WXGoogleMap::map_multiple_markers($google_key str, $param array)

The following code generates a map with multiple markers. Markers are set inside an array and assigned to 'WXMapPoints' in the $param array. Each marker can have the keys 'location' - a postcode or town, city and 'info' - the information to be displayed inside the infoWindow onclick.

	
$points = array();
$points[] = array('marker'=>'Swadlincote','info'=>'Swad
woohoo');
$points[] = array('marker'=>'Birmingham','info'=>'Birmingham');
$param = array('WXMapPoints'=>$points,'WXMapZoom');
	
WXGoogleMap::map_multiple_markers($google_key, $param)

As you can see this makes it fairly easy to pass in datasets generated on the fly from databases or xml feeds. As the the first example, it's possible to pass a number of optional parameters along with the WXMapPoints to customise the map view.

Optional Parameters

The following is a list of optional parameters can be set inside the $param array.

Availible Maps

WXMapType: (default - G_NORMAL_MAP)
G_NORMAL_MAP vector map with roads and road names
G_SATELLITE_MAP satalite map
G_HYBRID_MAP combined satalite map with vector overlay

Zoom Level

WXMapZoom: (default - 12)
0 furtherst
17 closest

Display 'Map Type' option

WXMapTypeControl: (default false)
true : false display Satalite, Hybrid, Roads option

Zoom Control Size

WXMapZoomControl: (default 'small')
'small' : 'large' : false displays zoom functionality in differing formats -false displays nothing

Display Zoom Control

WXMapZoomScrollControl: (defaults true)
true : false allows user to zoom using mouse scroller

Display Map Blow Up

WXMapBlowUpMap: (defaults false)
true : false displays a map close up in the information box

This example sets the UK as the maps center but it's a simple process to change it to any worldwide destination.

More from this section