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!

Answer 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:

Answer 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/

Answer 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: "https://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/

Answer 4

I have encountered the quite similar issue. I wish to convert my icon background to to transparent instead.

I believe the easiest way is to convert your existing icon (png,jpg,bitmap) to gif format by making the background transparent. You can use the following online tool to help you do it. It is extremely easy.

The following is the example of the icon with transparent output in google map. Hope it helps.

Answer 5

OK, where's the difficulty? If you want the semi-transparent colors, just create then in the icon, like here I have 50% transparent green:

And then put it on the map:

http://jsfiddle.net/Qrj2n/

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