Custom Google Maps Circle Markers with PHP: Create Dynamic Map Icons

Looking to create custom Google Maps circle markers with PHP? This tutorial shows you how to generate dynamic circular map icons with custom colors and text – perfect for making your maps stand out.

Previously, I shared how to create dynamic Google Maps markers in the classic pin style. Today, I’m expanding on that with a solution for circular markers that offers even more flexibility for your mapping projects.

Creating Custom Circle Markers for Google Maps

This implementation uses the ‘Image Smooth Arc’ function by Ulrich Mierendorff to create perfectly smooth circular markers. I’ve developed a simple PHP script that generates these markers dynamically with customizable text and colors.

Basic Circle Marker Examples

Here are some examples of the circle markers with different text values:

Custom Colored Circle Markers

You can also customize the color of your markers by adding a color parameter:

How to Implement Custom Circle Markers

To use these markers in your project, you’ll need to:

1. Download the Image Smooth Arc library by Ulrich Mierendorff
2. Download a modified Arial font and host it in the same directory
3. Save the PHP code below to a file (e.g., cmarker.php)

The PHP Code

<?php
    include ("imageSmoothArc_optimized.php");

    $color = $_GET['color'];
    if (!$color) {$color = "ff776b";} //default google map color
    $color = str_replace("#", "", $color);
    $string = $_GET['text'];

    $font = realpath('arial.ttf');

    //unfortunately we still must do some offsetting
    switch (ord(substr($string,0,1))) {
        case 49: //1
            $offset = -2;
            break;
        case 55: //7
            $offset = -1;
            break;
        case 65: //A
            $offset = 1;
            break;
        case 74: //J
            $offset = -1;
            break;
        case 84: //T
            $offset = 1;
            break;
        case 99: //c
            $offset = -1;
            break;
        case 106: //j
            $offset = 1;
            break;
    }
    if (strlen($string) == 1) {
        $fontsize = 10.5;
    } else if (strlen($string) == 2) {
        $fontsize = 9;
    } else {
        $fontsize = 10.5;
        $offset = 0; //reset offset
        $string = chr(149);
    }

    $bbox = imagettfbbox($fontsize, 0, $font, $string);
    $width = $bbox[2] - $bbox[0] + 1;
    $height = $bbox[1] - $bbox[7] + 1;

    $im = imagecreatetruecolor(20, 20);

    //add the alpha
    $trans_colour = imagecolorallocatealpha($im, 0, 0, 0, 127);
    imagefill($im, 0, 0, $trans_colour);

    imageAlphaBlending($im, true);
    imageSaveAlpha($im, true);

    $bord_ellipse = array (0, 0, 0, 0);
    imageSmoothArc($im, 9, 10, 17, 17, $bord_ellipse, 0, 2*M_PI); //x, y, width, height

    $fill_ellipse = array (hexdec(substr($color,0,2)), hexdec(substr($color,2,2)), hexdec(substr($color,4,2)), 0);
    imageSmoothArc($im, 9, 10, 16, 16, $fill_ellipse, 0, 2*M_PI); //x, y, width, height

    $black = imagecolorallocate($im, 0, 0, 0);
    imagettftext($im, $fontsize, 0, 11 - $width/2 + $offset, 9 + $height/2, $black, $font, $string);

    header("Content-type: image/png");
    imagepng($im);
    imagedestroy($im);
?>

Using the Markers in Google Maps

To use these custom markers in your Google Maps application, you’ll need to set the marker icon to the URL of your PHP script with the desired parameters:

// JavaScript example for Google Maps API
const marker = new google.maps.Marker({
    position: {lat: -34.397, lng: 150.644},
    map: map,
    icon: 'cmarker.php?text=A&color=c89bff'
});

Troubleshooting Common Issues

Note: If you encounter a “Call-time pass-by-reference has been removed” error with ‘imageSmoothArc_optimized.php’, replace all instances of ‘&$’ with ‘$’ in the library file.

This solution offers a flexible way to create custom circular markers for your Google Maps projects. For more advanced mapping solutions, check out the Google Maps JavaScript API documentation on custom markers.