Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
85
rated 0 times [  90] [ 5]  / answers: 1 / hits: 16036  / 11 Years ago, thu, october 10, 2013, 12:00:00

I'm using a transparent PNG as my marker, and would like for the transparent area to be filled a certain color. I previously accomplished this using marker shadows, but those don't work with the visual refresh (i.e. v3.14).



Thanks!


More From » css

 Answers
10

A trick could be to manipulate the PNG image with PHP, if this is an option. The following script takes 4 parameters: the image source, the amount of red, green and blue.



image.php script:



$src = $_GET['src'];

$r = $_GET['r'];
$g = $_GET['g'];
$b = $_GET['b'];

$image = @imagecreatefrompng($src);

// Create a new true color image with the same size
$w = imagesx($image);
$h = imagesy($image);
$color = imagecreatetruecolor($w, $h);

// Fill the new image with desired color
$bg = imagecolorallocate($color, $r, $g, $b);
imagefill($color, 0, 0, $bg);

// Copy original transparent image onto the new image
imagecopy($color, $image, 0, 0, 0, 0, $w, $h);

// Serve the image
header(Content-type: image/png);
imagepng($color);
imagedestroy($color);


In javascript, call image.php with the desired parameters:



var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map,
icon: 'path/to/image.php?src=http://maps.google.com/mapfiles/marker.png&r=100&g=125&b=255'
});


Original image:



Original



Output image:



Output


[#75097] Wednesday, October 9, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
devlin

Total Points: 474
Total Questions: 113
Total Answers: 100

Location: Sweden
Member since Fri, Apr 16, 2021
3 Years ago
;