Dynamic Google Maps Markers i.e. with Labels

Yesterday I had a little experience that pretty much looked like this

The main challenge was that I had implemented Google Maps, integrated MarkerCluster and got it to look like this.

Client liked the cluster but wanted it to be clickable (for popups). Unfortunately,  MarkerCluster doesn’t support clicks, and Google’s Marker doesn’t support those little numbers on top of the Markers. So I created a little hack that solves the problem as shown below.

The solution is pretty simple as the code below shows. Basically I created a blank marker and used PHP GD to write the appropriate count on the marker. Pretty simple right? Fortunately it works! 😀

One issue though, caching is important if you wanna go live with this solution. No point creating the same markers over and over again.

$im = imagecreatefrompng($this->Html->url('/img/marker_blank.png', true)); # Set Full URL of marker image (cakephp helper)
imagealphablending($im, false);
imagesavealpha($im, true);
$orange = imagecolorallocate($im, 220, 210, 60);
$px = (imagesx($im) - 7.5 * strlen($count)) / 2;
imagestring($im, 3, $px+1, 9, $count, $orange);
header("Content-type: image/png");

2 thoughts on “Dynamic Google Maps Markers i.e. with Labels

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s