Jan 27, 2013

Custom Google Maps Marker Icons With Numbers Using PHP GD

Posted by Devin R. Olsen on in PHP Tutorials | 1 comment

Today we are going to learn how to use PHP GD to build a PHP server side script that can accept a local or even remote image file, then bake any text we would like into the image and return it back to us as a .png. This is great for when you have the need to use custom marker icons in say Google Maps, but also would like to have numbers on the markers as well.

First, lets talk about why anyone would want to use a PHP script to make real time images for them-self.

The Problem…

Google does not allow you to setup text on your markers when plotting them in Google maps yet (as of 2013), and thus requires you to use a second overlay object like modified infoBoxes that sit on top of your Google map’s markers causing lots of DOM objects.

Another method is to use the Google charts functionality to make Google maps markers for you, and indeed this can provide you with markers that have numbers on them. The problem with Google charts however, is it does not allow you to use a custom icon types, but instead you must choose from Google pre-defined set of icons. Lastly, you could open up Photoshop and create x number of images by hand (or batch script) that renders the numbers into .png files that you then upload to your server and use when building your map’s markers, but if a creative change is needed have fun updating all them images.

So, welcome back to PHP real time server-side method.

[SEE DEMO HERE]

Here are the available url paramaters you can pass to this script:

fontType= The font you want to render your Text in.
- ARIAL
- COMIC
- GEORGIA
- GOTHIC
- IMPACT
- LUCON
- TAHOMA
- TIMES
- TREBUC
- VERDANA
In some cases, simply making better online viagra overnight lifestyle choices can age us before our time. It stops the growth of the cGMP specific phosphodiesterase type 5 enzyme which delays degradation of cGMP which regulates blood flow in the penis. wouroud.com generic viagra for sale Stop cooling your pet when the temperature reaches 103 degrees, and bring her to the veterinarian immediately. viagra 50 mg It is indeed the best soft pill cialis treatment for sexual anxiety, sexual dysfunction, lack of desire, preorgasmia etc.
fontSize =9 (Font Size)
x=13 (Text X position)
y=13 (Text Y position)
r=0 (Text rotation)
color=255,255,255 (Text color)
image=(Custom image from a remote location)
text=1 (Custom Text)

So now we have a 4th option that can render custom text into a custom images from a remote location, on the fly and fully customize all aspects of a markers need styles with no extra markup or setup time.

So, now lets take a look at what this PHP Script (marker-maker.php) looks like:

CreatePNG($imgname)
{
    $color = $_GET['color'];
    list($r, $g, $b) = split('[,.-]', $color);
    $fontSize = intval($_GET['fontSize']);
    $fontType = $_GET['fontType'];
    $x = intval($_GET["x"]);
    $y = intval($_GET["y"])+$fontSize;
    $rot = intval($_GET['r']);
    $text = $_GET["text"];
    $im = imagecreatefrompng($imgname);
    $fontColor = imagecolorallocate($im, $r, $g, $b);

    ImageTTFText($im,$fontSize,$rot,$x,$y,$fontColor,$fontType.".TTF",$text);

    return $im;
}

header('Content-Type: image/png');

$img = CreatePNG($image);

imagealphablending( $img, false );
imagesavealpha( $img, true );
imagepng ($img);
imagedestroy( $img );

First, we setup a variable called $image and assign it to our incoming query value $_GET[‘image’] (in other words, how we gather what we send as image=… in our url.). Next we setup a function called CreatePNG and setup a parameter called $imgname that we can pass to this function.

So that is the first half of this script, the other half is the portion that actually constructs the image as a png file that can be rendered in the browser as such. We first set the documents header to a ‘Context-Type: image/png’ so our browsers will treat this file as a png image format. We then create a new variable called $img and equal it to our CreatePNG function and feed our $image variable from above to this function. Finally, we set a alphablend method on $img so it can retain alpha transparency from its source file, then we save $img to server, call $img from server to render and finally destroy $img from server after client has received the image. Simple enough right?

Lets talk more about the CreatePNG function. It is important to point out that we must gather our other variables that we feed to this script in our url from above in side this function, that is by design. So, our first variable in this function is the $color variable, we gather our incoming value off the url $_GET[‘color’]; and begin to split the values up by red, green and blue (list($r, $g, $b) = split(‘[,.-]’, $color);). Next we collect our incoming values for fontSize, fontType, x, y, r and text, however you will notice that $y, is both equal to the incoming y value + current requested fontSize, this is need because the y-axis measures from bottom up, and thus font size is taken into account.

After we have gathered all the incoming values off our url, we must create the image and font colors before we compile all our variables into one image layer. By setting a new variable called $im and equaling it to the PHP function called imagecreatefrompng() that is then fed our $imgname (or rather incomming image from url) we start our new image’s png “canvas” if you will. Next we set a $fontColor variable to equal another PHP function called imagecolorallocation, and this will basically take our $r,$g and $b (red, green and blue) variables and make an available color to our final render image; you can think of this like you would a painter putting a new color on their painting pallet to make available for them when needed, same idea.

Finally we must render the incoming text we collected as a ImageTTFText PHP function so that we may use our available font types (.TTF font files that live in the same directory as this PHP script) to render our text into our image. Finally we return the image or $im; back to the scope whom requested its results.

And that’s how you create fully custom Google Maps Markers with custom remote images and text. Please note that use of imagecreatefrompng(); requires your PHP server to have the fopen option enabled, please see your system admin about this or read up on phpinfo(); to learn if this is already enabled on your server.

To conclude, all one needs to do now is when building your markers in javascript and setting up each markers options, simply feed it your script’s location along with all the paramaters filled out and text value equal to the index or i of a loop and you should be good, like this:

for(var i = 0; i < some.length; i++){
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title:"Hello World!",
        icon: "http://www.devinrolsen.com/google-maps-marker-icon-counter/marker-maker.php?        fontType=ARIAL&fontSize=9&x=13&y=8&r=0&color=255,255,255&image=http://cclc.know.is        itedesign.net/_resources/img/css/map-pin.png&text="+i
    });
}

Thanks, and enjoy.