CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3colorsgoogle-maps-markers
wiesson
wiesson

Reputation: 6832

Google maps v3 default marker path with other colors

My goal is to change the color of the nice looking default google maps marker. Therefore, I'm looking for the path / shape of the default (red) one. I've found this to change to color: 

function pinSymbol(color) {
    return {
        path: '???' 
        fillColor: color,
        fillOpacity: 1,
        strokeColor: '#000',
        strokeWeight: 2,
        scale: 1
    };
}

So, by invoking the function, I would like to change the color (e.g. icon: pinSymbol("#666"). However, I don't know where to find the path? I'm not looking for the v2 / plain marker!

New marker

// edit: I've found this path: 

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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',

(from an answer to the question: Google Maps API 3 - Custom marker color for default (dot) marker)

How to generate the smooth gradient?

Upvotes: 18

Views: 18062

Answers (3)

geocodezip
geocodezip

Reputation: 161384

Using the path you provided in your question:

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: 1,
        scale: 1
    };
}

proof of concept fiddle

screenshot of resulting map

code snippet:

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: 1,
    scale: 1
  };
}
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')
  });

  var marker1 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.5, -122.0),
    icon: pinSymbol('green')
  });
  var marker2 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.6, -122.2),
    icon: pinSymbol('orange')
  });
  var marker3 = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(47.7, -122.1),
    icon: pinSymbol('yellow')
  });
}
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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<div id="content_window"></div>

Upvotes: 5

user719662
user719662

Reputation:

By inspecting the Maps' code in action, I've found that in Google Maps JS API V3 the default URL of the marker is https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png , and the marker itself is a 22x40 PNG file. To recolor it, you'd have to probably use CSS filters/JS etc. or manually re-hue it in raster graphics editor.

map marker PNG

Upvotes: 3

ztan
ztan

Reputation: 6931

I think you can change the icon by doing this marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png')

Or you can refer to the customize marker image documentation.

Also, you can use the predefined symbols for your path. Sample code:

var marker = new google.maps.Marker({
    id: "some-id",
    icon: {
        path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
        strokeColor: "red",
        scale: 3
    },
    map: map,
    title: "some-title",
    position: myLatlng
});

Upvotes: -1

Related Questions