Google Maps Marker — set background color

Question

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!

Solution 1

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:

Output image:

Solution 2

Set the optimized-option of the marker to false, then you may apply custom css to the marker-img by using the selector:

img[src="path/to/custom/marker.png"]

<edit/>

to be able to use the same image with multiple colors simply add the color as URI-fragment, then you will get a unique selector even with the same image:

JS:

new google.maps.Marker({
  optimized: false,
  icon: 'path/to/custom/marker.png#red'
  //other properties
});

CSS:

#map-canvas img[src="path/to/custom/marker.png#red"]{
 background-color:red;
}

Of course the CSS-rules may also be set dynamically via JS when you don't want to hardcode them, see: styleSheet.insertRule()

Demo with multiple background-colors for the same image(including dynamic rule-insertion) :

http://jsfiddle.net/doktormolle/vngp1hdr/

Solution 3

I think Dr. Molle is right

You simply just apply css to the marker image.

To make the marker not to use canvas, you need to set optimized to false.

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-34.397, 150.644),
  map: map,
  optimized: false,
  icon: "http://i.stack.imgur.com/su8w5.png"
});

With just css set, you can apply background to all markers.

img[src="path/to/custom/marker.png"] {
   background-color: black;
}

I am using Tomas example, and modified it

http://jsfiddle.net/Qrj2n/2/

Comments

[mustafa.0x]

This solution isn't very suitable as multiple markers use the same marker icon.

[mustafa.0x]

I want to set the background color of the marker, not of the icon. That way, I don't have to create an icon for every hex color that exists.

[mustafa.0x]

I'm hoping for something Javascript only, but thanks, this is a possibility I guess.

[MrUpsidown]

Have a look at this example: blog.mridey.com/2009/09/… it is about creating a marker label (OverlayView) under the marker. Maybe you can adapt this to your needs.

[Tomas]

@mustafa.0x then you should be more clear in your question. You wrote *"I'm using a transparent PNG as my marker, and would like for the transparent area to be filled a certain color" - which suggest you are talking about transparent area of the PNG! Sorry but then its a poorly written question. You should describe what you want and why, we are not here to guess your mind.

[mustafa.0x]

Haha, cheeky, aren't you? :) I didn't downvote you; no need to be snarky.

[Tomas]

@mustafa.0x I know it wasn't you :) It's not a revenge. It's that I just really think that your question is poorly written. BTW my answer would be a solution to the question as you wrote it.

[mustafa.0x]

Thanks, your link provided sufficient inspiration. :)

[kontur]

Not sure if a version update changed this, but I can't seem to find any img tags with the icon; possibly they are served as background images, so this won't work any more?

[Dr.Molle]

It still works for me, added a demo(note that the optimized-option of the markers must be set to false).