Google Maps Marker - Set Background Color

Google Maps Marker — set background color

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:

google map api v3 background color

although you removed everything there still be blank tiles present.

You may try to hide those tiles, the following CSS works for me:

  /*the desired background for the map*/
#map_canvas{background-color:#fff !important}

  /*hides the tiles (and maybe more^^)*/
#map_canvas div div div div div div img{visibility:hidden}

Javascript, Change google map marker color

In Google Maps API v3 you can try changing marker icon. For example for green icon use:

marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Or as part of marker init:

marker = new google.maps.Marker({
    icon: 'http://...'
});

Other colors:

• http://maps.google.com/mapfiles/ms/icons/blue-dot.png
• http://maps.google.com/mapfiles/ms/icons/red-dot.png

Etc.

How can I change the color of a Google Maps marker?

Since maps v2 is deprecated, you are probably interested in v3 maps: https://developers.google.com/maps/documentation/javascript/markers#simple_icons

For v2 maps:

http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview

You would have one set of logic do all the 'regular' pins, and another that does the 'special' pin(s) using the new marker defined.

change google map marker color to a color of my choice

One option would be to define an SVG symbol for the marker icon. SVG icon colors can be set in their constructor.

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

Then use it like this:

var marker1 = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(47.5, -122.0),
  icon: pinSymbol('green')
});

proof of concept fiddle

code snippet:

function initialize() {
  var latlng = new google.maps.LatLng(47.605, -122.2);
  var myOptions = {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
  var marker = new google.maps.Marker({
    map: map,
    position: latlng,
    icon: pinSymbol('red')
  });

  var marker1 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.5, -122.0),
    icon: pinSymbol('#7CFC00')
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.6, -122.3),
    icon: pinSymbol('orange')
  });
  var marker3 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.7, -122.1),
    icon: pinSymbol('yellow')
  });
}

function pinSymbol(color) {
  return {
    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
    fillColor: color,
    fillOpacity: 1,
    strokeColor: '#000',
    strokeWeight: 2,
    scale: 1
  };
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

How to change the InfoWindow Background color

I came up with a simple solution. This might not be a very elegant solution but it works fine if you don't have huge styling needs.

Since we can add our own html and style it. The marker background element is mainly the one which causes problem. For simple styling, instead of learning a whole new library, we can just remove that element using jQuery.

Insert this code in your init function and it will remove the background element.

google.maps.event.addListenerOnce(map, 'idle', function(){
    jQuery('.gm-style-iw').prev('div').remove();
}); 

Now, you are free to style your own divs. I styled the infoWindow in my project using this approach.

Hope it will help.

set fill color marker google map

You can use Symbols

function pinSymbol(color) {
    return {
        path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

example fiddle

code snippet:

var data = [  /* ['Lat', 'Long', 'Name', 'Color'], */  [47.5, -122.0, 'Test 1', '#56df23'],  [47.6, -122.2, 'Test 2', '#0023f6'],  [47.7, -122.1, 'Test 2', 'yellow']];
function initialize() {  var latlng = new google.maps.LatLng(47.605, -122.333);  var myOptions = {    zoom: 10,    center: latlng,    mapTypeId: google.maps.MapTypeId.ROADMAP  };  var map = new google.maps.Map(document.getElementById("map_canvas"),    myOptions);  var marker = new google.maps.Marker({    map: map,    position: latlng,    icon: pinSymbol('red')  });
  for (var i = 0; i < data.length; i++) {    var marker1 = new google.maps.Marker({      map: map,      position: new google.maps.LatLng(data[i][0], data[i][1]),      icon: pinSymbol(data[i][3])    });  }}
function pinSymbol(color) {  return {    path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',    fillColor: color,    fillOpacity: 1,    strokeColor: '#000',    strokeWeight: 2,    scale: 1  };}
google.maps.event.addDomListener(window, 'load', initialize);

html,body,#map_canvas {  height: 500px;  width: 500px;  margin: 0px;  padding: 0px}

<script src="https://maps.googleapis.com/maps/api/js"></script><div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

Google Maps API 3 - Custom marker color for default (dot) marker

You can dynamically request icon images from the Google charts api with the urls:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569

Which looks like this: the image is 21x34 pixels and the pin tip is at position (10, 34)

And you'll also want a separate shadow image (so that it doesn't overlap nearby icons):

http://chart.apis.google.com/chart?chst=d_map_pin_shadow

Which looks like this: the image is 40x37 pixels and the pin tip is at position (12, 35)

When you construct your MarkerImages you need to set the size and anchor points accordingly:

    var pinColor = "FE7569";
    var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));
    var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
        new google.maps.Size(40, 37),
        new google.maps.Point(0, 0),
        new google.maps.Point(12, 35));

You can then add the marker to your map with:

        var marker = new google.maps.Marker({
                position: new google.maps.LatLng(0,0), 
                map: map,
                icon: pinImage,
                shadow: pinShadow
            });

Simply replace "FE7569" with the color code you're after. Eg:

Credit due to Jack B Nimble for the inspiration ;)

---

Related Topics