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");
imagepng($im);
imagedestroy($im);
exit;

About these ads