Google Map marker text - google-maps

Question

I have found this icon: http://chart.apis.google.com/chart?cht=mm&chs=60x102&chco=ffffff,70a3c1,70a3c1&ext=.png
I'm wondering if it's possible to place text on this icon. Basically what I'm looking for is an icon with a dynamic color and text. A simple PHP script that dynamically generates an icon based on a images and text would also be great.

Answer 1

You can create image from png (using PHP GD )
$yourimage = imagecreatefrompng($originalImage);
Add in your html page this tag
<img src="test_icon.php?text=yourtext">
and the add the text you need
this way using test_icon.php
test_icon.php
<?php
header("Content-type: image/png");
$yourOrigImage = "group_icon.png";
if(file_exists($yourOrigImage)) {
$newImage = imagecreatefrompng($yourOrigImage);
imagesavealpha($newImage, true); // this for keep the png's transparency important
if(!$newImage) {
die("im is null");
}
$black = imagecolorallocate($newImage, 0, 0, 0);
$width = 36; // the width of the image
$height = 36; // the height of the image
$font = 4; // font size
$text = $_GET['text']; // text
$leftTextPos = 4;
$outputImage = "group_icon_".$text.".png";
imagestring($newImage, $font, $leftTextPos, 9, $text, $black);
imagepng($newImage, $outputImage, 0);
imagedestroy($newImage);
}
?>

Answer 2

Two options:
The third party MarkerWithLabel library.
fiddle
code snippet:
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new MarkerWithLabel({
position: map.getCenter(),
map: map,
icon: "http://chart.apis.google.com/chart?cht=mm&chs=60x102&chco=ffffff,70a3c1,70a3c1&ext=.png",
labelContent: "A",
labelAnchor: new google.maps.Point(15, 90),
labelClass: "labels", // the CSS class for the label
labelInBackground: false
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.labels {
color: black;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 30px;
text-align: center;
width: 30px;
white-space: nowrap;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script>
<div id="map_canvas"></div>
Add a label to the native google.maps.Marker
fiddle
code snippet::
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
icon: "http://chart.apis.google.com/chart?cht=mm&chs=60x102&chco=ffffff,70a3c1,70a3c1&ext=.png",
label: "A"
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>