	Login		Register

Showing Google Maps with many markers in PHP - Forms generation and validation package blog

Recommend this page to a friend!

Stumble It!

Bookmark in del.icio.us

	All package blogs		Forms generation and validation		Forms generation and validation package blog				Showing Google Maps w...

	Post a comment		See comments (0)		Trackbacks (0)

<< Previous: Rich HTML form select...

>> Next: Validating PHP Form I...

Author: Manuel Lemos

Posted on: 2010-02-04

Package: Forms generation and validation

Categories: New features

Sometimes you need to display Google Maps with a large number of markers. However, adding too many markers makes the map page load too slow.

This article explains how you can use marker cluster feature of the forms map location plug-in to cluster large numbers of markers to make the page load much faster.

By Manuel Lemos

manuellemos.net
<email contact>

Introduction

Using the map location plug-in to display non-form maps

Showing many markers using marker clusters

Adding markers to clusters in practice

Conclusion

Introduction

As you may know, the forms map location plug-in uses the Google Maps API to display a map in a form that lets the users pick a location on the map. The selected location is denoted with a marker.

The coordinates of the selected location are copied to form fields, so the server may receive and process the location coordinates when the form is submitted.

The map location plug-in also makes it easy to display additional markers to the map. Those markers appear in custom locations defined by the application script.

Using the map location plug-in to display non-form maps

This plug-in may also be used to display a simple map with custom markers without having to integrate it in a real form. Just create a form with a single input, which should be the the map input. Then define a read-only map with the markers you want to show.

First, lets define the list of markers in an array. You may notice that the marker definitions have a parameters named Cluster. That is be explained in more detail ahead.


 $my_markers = array(
   array(
     'Latitude' => 37.78156937014928,
     'Longitude' => -122.42340087890625,
     'Information' => 'San Francisco',
     'Link' => 'http://www.ci.sf.ca.us/',
     'Target' => '_blank',
     'Title' => 'Click here to go to the official '.
       'San Francisco government site on a new window',
     'Cluster' => 'common'
   ),
   array(
     'Latitude' => 38.58252615935333,
     'Longitude' => -121.48818969726562,
     'Information' => 'Sacramento',
     'Cluster' => 'common'
   ),
   array(
     'Latitude' => 34.05265942137599,
     'Longitude' => -118.2403564453125,
     'Information' => 'Los Angeles',
     'Link' => 'http://www.ci.la.ca.us/',
     'Title' => 'Click here to go to the official '.
       'Los Angeles government site on this window',
     'Cluster' => 'common'
   ),
   array(
     'Latitude' => 32.71855479966606,
     'Longitude' => -117.16232299804688,
     'Information' => 'San Diego',
     'Cluster' => 'common'
   )
 );

Now lets define the form object and add the map input.


 define('GOOGLE_MAPS_KEY', 'your Google Maps key');

 $form = new form_class;

 $form->AddInput(array(
   'TYPE' => 'custom',
   'CustomClass' => 'form_map_location_class',
   'ID' => 'map',
   'Key' => $key,
   'Markers' => $my_markers,

The Accessible and HideMarker parameters should be used to make the map be a read-only input, so the user cannot select a location as usual.


   'Accessible' => 0,
   'HideMarker' => 1

The ZoomMarkers and BoundsOffset make the plug-in adjust the zoom level, so the specified markers appear all visible in the viewport.

The BoundsOffset parameter may be used to define the size of a margin around the area of the markers to which the zoom level will be adjusted. The unit of this margin size is degrees of latitude and longitude.


   'ZoomMarkers' => 1,
   'BoundsOffset' => 1.0
 ));

Now you just need to call the AddInputPart function to add the map to the form output and call the DisplayOutput to show the form in the HTML page.

Google Maps require that some Javascript be added to the page initialization. So, you also need to use the PageHead, PageLoad and PageUnload functions to make the class return the necessary HTML and Javascript that needs to be integrated in your page header.


 $form->AddInputPart('map');
 echo '<html><head>My map page</title>',
   $form->PageHead(), '</head>';
 echo '<body onload="',HtmlSpecialChars($form->PageLoad()),'"',
   ' onunload="', HtmlSpecialChars($form->PageUnload()), '">';
 $form->DisplayOutput();
 echo '</body><html>';

Showing many markers using marker clusters

When you need to display a map with many markers, the performance of the browser loading the map may degrade exponentially as the number of markers you want to display increases.

When you want to display hundreds or thousands of markers, the browsers tend to become unbearably slow, even when you use the latest generation of fast browsers.

The solution for this performance problem is to resort to cluster marker manager. These are map artifacts that replace markers that are too close by a single cluster icon.

Marker managers are special classes of Javascript objects that implement the logic of displaying the markers. There are many marker managers that perform marker clustering available on the Web.

The form map location plug-in now supports clustering using the MarkerClusterer marker manager. It is an Open Source (Apache 2 license) marker manager Javascript class developed by Xiaoxi Wu.

This marker manager is very good for clustering. It replaces a group of markers by a nice icon with a number on the center that represents the number of markers that were grouped.

The cluster icon shows in different colors depending on the number of clustered markers. When you click on the cluster icon, the marker manager zooms in to show the area that the clustered markers occupy.

This marker manager was used to cluster markers of PHP professionals around the world. It is used only to cluster markers of the professionals in the respective country page.

The use of this marker manager was essential. Some countries, like for instance India and United States, have too many hundreds of listed PHP professionals. The resulting maps look much lighter and faster to navigate, as you may see the map of PHP professionals of India.

The cluster marker icons are those with a rounded shape and a number in the center. You may also notice that some yellow icons overlap the cluster icons. Those represent the PHP professionals that are also premium subscribers of the PHPClasses site.

This example demonstrates how you can include only a subset of markers in a cluster. In this case, the markers of the premium PHP professionals were not included in the cluster. This way, you can make special markers still stand out in a map with clustered markers.

Adding markers to clusters in practice

To add certain markers to a cluster is very easy. The first thing you need to do is to define some details of the marker clusters you want to use in your maps.

You can add more than one cluster to the same map, but usually it is not very useful because the icons of different clusters may overlap and the map may look confusing.

You need to add an entry to the map input definition named Clusters. This should be an associative array that defines the name and the details of each cluster.

In this example, a single cluster named common is defined. It specifies the details of the MarkerClusterer properties. The Manager property specifies the name of the MarkerClusterer Javascript class. The Path property specifies the path of the Javascript file that contains the definition of the MarkerClusterer class code.

The markerclusterer.js file is included in the regular distribution of the forms class.


   'Clusters' => array(
     'common' => array(
       'Manager' => 'MarkerClusterer',
       'Path' => 'markerclusterer.js'
     )
   )

Then you just need to add the Cluster property to the definition of each marker. In our example it should be set to the value 'common'.


 $my_markers = array(
   array(
     'Latitude' => 37.78156937014928,
     'Longitude' => -122.42340087890625,
     'Information' => 'San Francisco',
     'Link' => 'http://www.ci.sf.ca.us/',
     'Target' => '_blank',
     'Title' => 'Click here to go to the official '.
       'San Francisco government site on a new window',
     'Cluster' => 'common'
   ),
   
   /* other marker definitions go here */

 );

Conclusion

The map location plug-in class makes it much easier to display maps using Google maps with many markers.

As you may have noticed, you do not have to write a single line of Javascript. The forms class and the map location plug-in do it all for you, just by writing a few lines of PHP code.

The code in the article is taken from the forms maps location example script test_map_location_input.php.

Feel free to post a comment here if you have questions or suggestions to improve further these forms package features.