Google Maps api v3 - circle without fill or unclickable fill - google-maps-api-3

.. and sorry for my english.
I'm trying to create circle without fill with google maps api v3. I know that I can set opacity (and fill disapired), but this no-visible fill is still clickable. I need to set fill unclickable, but stroke have to be clickable. Under my circle there are few points and lines, that have to be clickable and circle is upper, than lines, for example. My idea was move circle to different pane, but I didn't find way how to do it. Is there a solution for it?
Thanks!
Ajax
[EDIT]
Here is code sample. My problem is, that I'm not able to click on map or line inside blue circle.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_GMAP+API_KEY&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var lat = 49;
var lon = 15;
var myOptions = {
center: new google.maps.LatLng(lat,lon),
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, "click", function(clickEvt) {
alert('mapClicked');
});
var line = new google.maps.Polyline({
path: [new google.maps.LatLng(lat + 0.001, lon + 0.001),new google.maps.LatLng(lat - 0.001, lon - 0.001)],
strokeColor: '#00FF00',
map: map
});
google.maps.event.addListener(line, "click", function() {
alert('Line clicked');
});
var circle = new google.maps.Circle({
strokeColor: '#0000FF',
strokeWeight: 2,
fillOpacity: 0,
map: map,
center: new google.maps.LatLng(lat, lon),
radius: 100
});
google.maps.event.addListener(circle, 'click', function(event) {
alert('circle clicked');
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>


set 'clickable: false` in the circle option object to allow the click event be detected in the map layer.
var circle = new google.maps.Circle({
strokeColor: '#0000FF',
strokeWeight: 2,
fillOpacity: 0,
map: map,
center: new google.maps.LatLng(lat, lon),
radius: 100,
clickable: false
});
reference: Unclickable fill in Circle?


Try this: draw 2 circles, one for your outline (clickable) and one for your fill (not clickable). The fill circle should be slightly smaller, and set its z-index to sit on top of the other one, preventing you clicking on anything but the outline circle. The problem will be the other items you want to remain clickable underneath the circle.

Related

Google map with css "transform:scale"

Good afternoon,
I have an issue with a google map and css "transform:scale".
My aim is to scale the map to 1.1 if the map is hovered. But if i do this i cant click the markern anymore. I have tried to solve it with jquery but i got no success.
Anybody here who has a solution?
Here is a fiddle: JSFIDDLE
I tought that first switch the scaled size, then load the map, and then switch to old size will get it to work, but no success.
Here is my abortive try..
$("#map").hover(function(){
$("#map").width(880).height(617.1).load('/index.html', function () {
initialize();
}).width(800).height(561);
});
Thanks for helping
Manuel Strohmaier

The problem is quite easy to explain, but unfortunately I haven't good solution now.
Take a look: http://take.ms/2E3fV
On image I mark rectangle which shows where exactly is now an element wchich responds for a click action on google map marker. So simply, when You scale map with CSS, each image scales too but position coordinates (left, right, top, bottom) don't change.
Theoreticaly You can inspect Google Map's code and fix this position in any way, but:
it's not universal solution (not for dynamic pin for example)
it can be changed in future (class name, or even whole solution)
it's rather hack than solution

what's your intens using transform:scale ?
why don't you use zoom for that ?
check my code snippet i edited from yours, may be this help you...
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var myLatlng2 = new google.maps.LatLng(-22.363882, 125.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var contentString = "Pls help me to get the right position :)"
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker1 = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'First Marker'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Sec Marker'
});
google.maps.event.addListener(marker1, 'mouseover', function () {
map.setZoom(14);
infowindow.open(map, marker1);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
#map {
height: 400px;
width: 400px;
margin: auto;
padding: 0px;
top:100px;
}
.scale {
transition: all .2s ease-in-out;
}
#map.scale:hover {
transform: scale(1.9);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<body>
<div id="map" class="map scale"></div>
</body>

How to make an info window clickable?

I have the below code, based on one of the API samples. A click on the map creates a marker. A click on the marker opens up an info window. Now I want a click on the info window to do something. E.g. a click anywhere might close it, as opposed to the little cross in the corner. Or a click on it might open a new URL. Etc.
Unfortunately it seems there is no "click" event for info windows.
The closest I've got is shown as a commented out line below: I wrap my info window content in a div, and give that an onClick. This works, but there is a big border around it. I really want to be able to click anywhere in the info window box.
Is there a way?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Click Test</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
google.maps.visualRefresh = true; //New look visuals.
function initialize() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '400px';
mapdiv.style.height = '600px';
}
var mapOptions = {
zoom:3,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
//content: "<div onClick='test1()'>(lat,lng):<br/>"+location.lat()+","+location.lng()+"</div>"
content: "(lat,lng):<br/>"+location.lat()+","+location.lng()
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
infowindow.addListener('click',test1); //Does nothing
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function test1(){alert("test1");}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
UPDATE:
This image shows the problem when I use a clickable div inside the content (background set to red to show the extent of the region I can make clickable, and also that I can style; if I set a negative margin I just get scrollbars, not a bigger region!). It is the whole white area I want to be clickable, not just that red rectangle.

I decided to use InfoBox found in the Google Maps Utility Library. So in the header add a link to the library. Then replace the new google.maps.InfoWindow() line with this one:
var infowindow = new InfoBox({
closeBoxURL:"",
content: '<div onClick="test1();return false;" style="background:white;opacity:0.8;padding:8px">(lat,lng):<br/>'+
location.lat()+","+location.lng()+"</div>"
});
By setting closeBoxUrl to a blank string I get no close option. I added a large padding just so you can see that clicking right to the edge does indeed work.
You can also do it this way. I also use the boxClass option so the formatting is done in CSS:
var infoContent=document.createElement('div');
infoContent.innerHTML="(lat,lng):<br/>"+location.lat()+","+location.lng();
infoContent.onclick=test1;
var infowindow = new InfoBox({
closeBoxURL:"",
boxClass:"marker_popup",
content: infoContent,
});
(Aside, if doing it this way, on just some browsers it creates a marker below the InfoBox! Simplest fix is to change test1 so it looks like: function test1(event){alert("test1");event.preventDefault();return false;} )
P.S. I chose InfoBox over InfoBubble, as the latter has no documentation, and it had no obvious advantages to compensate for that major flaw! InfoBox has documentation and a reference. (links are for version 1.1.9)

Ember.js: Google Maps View

I'm trying to create a View for Google Maps, and actually got it to work according to some examples I found.
the problem is that the map draws correctly only the first time the page is displayed,
if routes are changed and then a map is being drawn again it looks "distorted".
the examples I found are "one page" part of apps.
View:
App.LocationView = Ember.View.extend({
templateName: 'location',
MapView: Ember.View.extend({
map: null,
latitudeBinding: 'controller.content.geometry.lat',
longitudeBinding: 'controller.content.geometry.lng',
didInsertElement: function() {
var mapOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(this.$().get(0),mapOptions);
this.set('map',map); //save for future updations
this.$().css({ width: "550px", height: "400px" });
},
reRenderMap : function(){
var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
this.get('map').setCenter(newLoc);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(this.get('latitude'), this.get('longitude')),
map: this.get('map')
});
}.observes('latitude','longitude')
})
});
I show the map with {{view view.MapView}} inside a div#map-holder, in my 'location' template.
I also apply this CSS to the div to "fix" Bootstrap messing with the map controls:
#map-holder img {
max-width: none;
}
how can I fix this ?
EDIT: jsfiddle - http://jsfiddle.net/bsphere/jYfg3/
go to 'settings' and then back to 'map' to see the distorted map

It seems like this is not exactly related to Ember, but to the map redrawing and resizing. With your fiddle, if you resize the browser window, you can see the map displays correctly.
When I saw it, I tried to put the this.$().css({ width: "550px", height: "400px" }); before the contrusction of the map, and it seems to work.

distance of a polyline

I am working in a polyline and I need to obtain the distance of this. So if anyone can help I would be very gratefully.
Best regards.
This is my code:
function polyline() {
downloadUrl("xmlPolyline.asp", function(data) {
var xml = xmlParse(data);
var markersPath = xml.documentElement.getElementsByTagName("marker");
var path = [];
for (var i = 0; i < markersPath.length; i++) {
var lat = parseFloat(markersPath[i].getAttribute("lat"));
var lng = parseFloat(markersPath[i].getAttribute("lng"));
pointPath = new google.maps.LatLng(lat,lng);
path.push(pointPath);
}//finish loop
polyline = new google.maps.Polyline({
path: path,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
//new polyline
polyline.setMap(map);
}); //end download url
}

It's easy - using built in functions in the geometry library...
const polyLengthInMeters = google.maps.geometry.spherical.computeLength(yourPolyline.getPath().getArray());
To use the geometry library you declare it when you load the map api
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={YOUR_KEY}&sensor=false&libraries=geometry"></script>
for more info see:
Google API Polyline reference
Google API mcvArray reference
Google API Spherical geometry reference

The "geometry" library has a computeDistanceBetween method.
This will return the result in meters:
var polylineLength = 0;
for (var i = 0; i < markersPath.length; i++) {
var lat = parseFloat(markersPath[i].getAttribute("lat"));
var lng = parseFloat(markersPath[i].getAttribute("lng"));
var pointPath = new google.maps.LatLng(lat,lng);
path.push(pointPath);
if (i > 0) polylineLength += google.maps.geometry.spherical.computeDistanceBetween(path[i], path[i-1]);
}
alert("the length of the polyline is "+polylineLength+" meters");
Update: There is now also a computeLength in the geometry library:
computeLength(path[, radius])
Parameters:
path: Array|MVCArray
radius: number optional
Return Value: number
Returns the length of the given path.
const polyline = new google.maps.Polyline({
path: polylineCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
var polylineLength = google.maps.geometry.spherical.computeLength(polyline.getPath());
proof of concept fiddle
code snippet:
// This example creates a 2-pixel-wide red polyline showing the path of
// a drive from New York, NY to Newark, NJ
function initMap() {
const map = new google.maps.Map(document.getElementById("map"),{
center: {lat:40.71248,lng: -74.006200},
zoom: 10
});
const polyline = new google.maps.Polyline({
path: polylineCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
map: map
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < polyline.getPath().getLength(); i++) {
console.log(polyline.getPath().getAt(i).toUrlValue(6));
bounds.extend(polyline.getPath().getAt(i));
}
map.fitBounds(bounds);
var polylineLength = google.maps.geometry.spherical.computeLength(polyline.getPath());
document.getElementById('info').innerHTML = polylineLength.toFixed(2)+" meters, "+(polylineLength/1000).toFixed(2)+" km, "+(polylineLength/1609).toFixed(2)+" miles";
console.log(polylineLength.toFixed(2)+" meters, "+(polylineLength/1000).toFixed(2)+" km, "+(polylineLength/1609).toFixed(2)+" miles");
}
// per Google Directions service 13.9 mi. About 31 mins
// 13.9 mi = 22.36988 km
const polylineCoordinates = [
{lat:40.712480,lng:-74.006200},
{lat:40.712450,lng:-74.006150},
{lat:40.712310,lng:-74.005810},
{lat:40.712300,lng:-74.005810},
{lat:40.712300,lng:-74.005800},
{lat:40.712290,lng:-74.005790},
{lat:40.712280,lng:-74.005780},
{lat:40.712260,lng:-74.005770},
{lat:40.712250,lng:-74.005770},
{lat:40.712130,lng:-74.005700},
{lat:40.712130,lng:-74.005700},
{lat:40.712090,lng:-74.005830},
{lat:40.712050,lng:-74.005970},
{lat:40.712020,lng:-74.006090},
{lat:40.711980,lng:-74.006230},
{lat:40.711930,lng:-74.006390},
{lat:40.711930,lng:-74.006440},
{lat:40.711830,lng:-74.006810},
{lat:40.711800,lng:-74.006950},
{lat:40.711770,lng:-74.007050},
{lat:40.711690,lng:-74.007420},
{lat:40.711670,lng:-74.007480},
{lat:40.711660,lng:-74.007510},
{lat:40.711660,lng:-74.007550},
{lat:40.711660,lng:-74.007570},
{lat:40.711660,lng:-74.007600},
{lat:40.711660,lng:-74.007650},
{lat:40.711670,lng:-74.007690},
{lat:40.711680,lng:-74.007710},
{lat:40.711690,lng:-74.007740},
{lat:40.711710,lng:-74.007780},
{lat:40.711710,lng:-74.007780},
{lat:40.711750,lng:-74.007840},
{lat:40.711800,lng:-74.007920},
{lat:40.711850,lng:-74.007990},
{lat:40.711870,lng:-74.008010},
{lat:40.711910,lng:-74.008050},
{lat:40.711950,lng:-74.008070},
{lat:40.711970,lng:-74.008090},
{lat:40.712000,lng:-74.008120},
{lat:40.712080,lng:-74.008270},
{lat:40.712380,lng:-74.008930},
{lat:40.712470,lng:-74.009130},
{lat:40.712650,lng:-74.009520},
{lat:40.712730,lng:-74.009680},
{lat:40.712730,lng:-74.009680},
{lat:40.712790,lng:-74.009650},
{lat:40.713280,lng:-74.009260},
{lat:40.713430,lng:-74.009140},
{lat:40.713810,lng:-74.008840},
{lat:40.714270,lng:-74.008480},
{lat:40.714370,lng:-74.008400},
{lat:40.714890,lng:-74.008000},
{lat:40.714940,lng:-74.007970},
{lat:40.715200,lng:-74.007750},
{lat:40.715440,lng:-74.007560},
{lat:40.715480,lng:-74.007520},
{lat:40.715960,lng:-74.007150},
{lat:40.716000,lng:-74.007110},
{lat:40.716040,lng:-74.007070},
{lat:40.716530,lng:-74.006680},
{lat:40.717080,lng:-74.006240},
{lat:40.717170,lng:-74.006180},
{lat:40.717600,lng:-74.005830},
{lat:40.717680,lng:-74.005770},
{lat:40.717780,lng:-74.005680},
{lat:40.717870,lng:-74.005620},
{lat:40.717960,lng:-74.005540},
{lat:40.717960,lng:-74.005540},
{lat:40.718020,lng:-74.005530},
{lat:40.718050,lng:-74.005520},
{lat:40.718110,lng:-74.005480},
{lat:40.718180,lng:-74.005430},
{lat:40.718230,lng:-74.005390},
{lat:40.718270,lng:-74.005380},
{lat:40.718300,lng:-74.005360},
{lat:40.718330,lng:-74.005340},
{lat:40.718370,lng:-74.005320},
{lat:40.718410,lng:-74.005300},
{lat:40.718600,lng:-74.005230},
{lat:40.718670,lng:-74.005220},
{lat:40.718880,lng:-74.005180},
{lat:40.718940,lng:-74.005180},
{lat:40.719010,lng:-74.005170},
{lat:40.719060,lng:-74.005170},
{lat:40.719110,lng:-74.005170},
{lat:40.719370,lng:-74.005180},
{lat:40.719730,lng:-74.005200},
{lat:40.719850,lng:-74.005190},
{lat:40.719950,lng:-74.005190},
{lat:40.720280,lng:-74.005180},
{lat:40.720480,lng:-74.005190},
{lat:40.720630,lng:-74.005210},
{lat:40.721030,lng:-74.005250},
{lat:40.721380,lng:-74.005280},
{lat:40.721470,lng:-74.005280},
{lat:40.721740,lng:-74.005330},
{lat:40.721830,lng:-74.005340},
{lat:40.721930,lng:-74.005360},
{lat:40.722090,lng:-74.005380},
{lat:40.722130,lng:-74.005390},
{lat:40.722180,lng:-74.005390},
{lat:40.722230,lng:-74.005380},
{lat:40.723010,lng:-74.005060},
{lat:40.723630,lng:-74.004810},
{lat:40.723630,lng:-74.004810},
{lat:40.723650,lng:-74.004890},
{lat:40.723660,lng:-74.005000},
{lat:40.723670,lng:-74.005050},
{lat:40.723690,lng:-74.005280},
{lat:40.723710,lng:-74.005440},
{lat:40.723730,lng:-74.005700},
{lat:40.723760,lng:-74.005980},
{lat:40.723760,lng:-74.005980},
{lat:40.723810,lng:-74.006060},
{lat:40.723820,lng:-74.006150},
{lat:40.723840,lng:-74.006250},
{lat:40.723850,lng:-74.006290},
{lat:40.723860,lng:-74.006310},
{lat:40.723870,lng:-74.006360},
{lat:40.723890,lng:-74.006420},
{lat:40.723910,lng:-74.006470},
{lat:40.723940,lng:-74.006530},
{lat:40.723970,lng:-74.006590},
{lat:40.724000,lng:-74.006640},
{lat:40.724010,lng:-74.006670},
{lat:40.724030,lng:-74.006690},
{lat:40.724070,lng:-74.006740},
{lat:40.724110,lng:-74.006800},
{lat:40.724150,lng:-74.006840},
{lat:40.724200,lng:-74.006890},
{lat:40.724210,lng:-74.006900},
{lat:40.724240,lng:-74.006930},
{lat:40.724270,lng:-74.006950},
{lat:40.724300,lng:-74.006960},
{lat:40.724330,lng:-74.006980},
{lat:40.724360,lng:-74.006990},
{lat:40.724390,lng:-74.006990},
{lat:40.724440,lng:-74.006990},
{lat:40.724500,lng:-74.006990},
{lat:40.724580,lng:-74.006990},
{lat:40.724620,lng:-74.006990},
{lat:40.724710,lng:-74.007010},
{lat:40.724770,lng:-74.007000},
{lat:40.724850,lng:-74.006990},
{lat:40.724850,lng:-74.006980},
{lat:40.724890,lng:-74.006980},
{lat:40.724960,lng:-74.006970},
{lat:40.725010,lng:-74.006970},
{lat:40.725070,lng:-74.006970},
{lat:40.725120,lng:-74.006970},
{lat:40.725190,lng:-74.006960},
{lat:40.725290,lng:-74.006960},
{lat:40.725370,lng:-74.006980},
{lat:40.725420,lng:-74.006990},
{lat:40.725510,lng:-74.007020},
{lat:40.725580,lng:-74.007070},
{lat:40.725610,lng:-74.007110},
{lat:40.725640,lng:-74.007170},
{lat:40.725660,lng:-74.007220},
{lat:40.725690,lng:-74.007320},
{lat:40.725720,lng:-74.007420},
{lat:40.725720,lng:-74.007440},
{lat:40.725740,lng:-74.007560},
{lat:40.725750,lng:-74.007670},
{lat:40.725780,lng:-74.007910},
{lat:40.725800,lng:-74.008140},
{lat:40.725820,lng:-74.008270},
{lat:40.725830,lng:-74.008380},
{lat:40.725850,lng:-74.008600},
{lat:40.725850,lng:-74.008610},
{lat:40.725870,lng:-74.008750},
{lat:40.725880,lng:-74.008850},
{lat:40.725900,lng:-74.009080},
{lat:40.725930,lng:-74.009320},
{lat:40.725950,lng:-74.009540},
{lat:40.725950,lng:-74.009550},
{lat:40.726010,lng:-74.010020},
{lat:40.726010,lng:-74.010040},
{lat:40.726070,lng:-74.010490},
{lat:40.726190,lng:-74.011430},
{lat:40.726220,lng:-74.011670},
{lat:40.726260,lng:-74.012150},
{lat:40.726320,lng:-74.012590},
{lat:40.726350,lng:-74.012820},
{lat:40.726360,lng:-74.012840},
{lat:40.726390,lng:-74.013070},
{lat:40.726420,lng:-74.013290},
{lat:40.726450,lng:-74.013540},
{lat:40.726640,lng:-74.014940},
{lat:40.726690,lng:-74.015300},
{lat:40.726730,lng:-74.015540},
{lat:40.726870,lng:-74.016470},
{lat:40.726950,lng:-74.016930},
{lat:40.726980,lng:-74.017160},
{lat:40.727020,lng:-74.017400},
{lat:40.727200,lng:-74.018560},
{lat:40.727270,lng:-74.019020},
{lat:40.727570,lng:-74.020930},
{lat:40.727700,lng:-74.021810},
{lat:40.727740,lng:-74.022040},
{lat:40.727990,lng:-74.023670},
{lat:40.728030,lng:-74.023900},
{lat:40.728070,lng:-74.024140},
{lat:40.728210,lng:-74.025070},
{lat:40.728390,lng:-74.026230},
{lat:40.728500,lng:-74.026930},
{lat:40.728550,lng:-74.027510},
{lat:40.728570,lng:-74.027750},
{lat:40.728600,lng:-74.027990},
{lat:40.728680,lng:-74.028930},
{lat:40.728700,lng:-74.029160},
{lat:40.728830,lng:-74.030580},
{lat:40.728870,lng:-74.031050},
{lat:40.728900,lng:-74.031350},
{lat:40.728940,lng:-74.031760},
{lat:40.728940,lng:-74.031790},
{lat:40.728960,lng:-74.032020},
{lat:40.728970,lng:-74.032030},
{lat:40.728990,lng:-74.032150},
{lat:40.729020,lng:-74.032330},
{lat:40.729070,lng:-74.032480},
{lat:40.729110,lng:-74.032580},
{lat:40.729160,lng:-74.032720},
{lat:40.729170,lng:-74.032760},
{lat:40.729270,lng:-74.033070},
{lat:40.729530,lng:-74.033860},
{lat:40.729960,lng:-74.035160},
{lat:40.730040,lng:-74.035410},
{lat:40.730060,lng:-74.035460},
{lat:40.730120,lng:-74.035590},
{lat:40.730150,lng:-74.035680},
{lat:40.730190,lng:-74.035780},
{lat:40.730220,lng:-74.035840},
{lat:40.730290,lng:-74.035950},
{lat:40.730330,lng:-74.036020},
{lat:40.730400,lng:-74.036100},
{lat:40.730590,lng:-74.036330},
{lat:40.730710,lng:-74.036500},
{lat:40.730780,lng:-74.036580},
{lat:40.730840,lng:-74.036670},
{lat:40.730910,lng:-74.036780},
{lat:40.730970,lng:-74.036880},
{lat:40.731030,lng:-74.036980},
{lat:40.731040,lng:-74.037000},
{lat:40.731100,lng:-74.037100},
{lat:40.731140,lng:-74.037200},
{lat:40.731160,lng:-74.037240},
{lat:40.731220,lng:-74.037360},
{lat:40.731320,lng:-74.037580},
{lat:40.731340,lng:-74.037630},
{lat:40.731360,lng:-74.037680},
{lat:40.731380,lng:-74.037740},
{lat:40.731390,lng:-74.037800},
{lat:40.731450,lng:-74.038480},
{lat:40.731470,lng:-74.038720},
{lat:40.731540,lng:-74.039420},
{lat:40.731560,lng:-74.039510},
{lat:40.731590,lng:-74.039710},
{lat:40.731610,lng:-74.039940},
{lat:40.731620,lng:-74.040130},
{lat:40.731710,lng:-74.041100},
{lat:40.731710,lng:-74.041100},
{lat:40.731560,lng:-74.041130},
{lat:40.731430,lng:-74.041150},
{lat:40.731270,lng:-74.041170},
{lat:40.731210,lng:-74.041180},
{lat:40.731050,lng:-74.041200},
{lat:40.730820,lng:-74.041240},
{lat:40.730800,lng:-74.041240},
{lat:40.730720,lng:-74.041250},
{lat:40.730480,lng:-74.041300},
{lat:40.730350,lng:-74.041310},
{lat:40.730180,lng:-74.041330},
{lat:40.730180,lng:-74.041330},
{lat:40.730130,lng:-74.040980},
{lat:40.730110,lng:-74.040900},
{lat:40.730070,lng:-74.040660},
{lat:40.730040,lng:-74.040520},
{lat:40.730030,lng:-74.040430},
{lat:40.730010,lng:-74.040300},
{lat:40.730000,lng:-74.040170},
{lat:40.729970,lng:-74.039910},
{lat:40.729950,lng:-74.039720},
{lat:40.729950,lng:-74.039720},
{lat:40.729520,lng:-74.039790},
{lat:40.729380,lng:-74.039810},
{lat:40.729330,lng:-74.039820},
{lat:40.729210,lng:-74.039840},
{lat:40.729200,lng:-74.039840},
{lat:40.729180,lng:-74.039850},
{lat:40.728980,lng:-74.039880},
{lat:40.728960,lng:-74.039880},
{lat:40.728960,lng:-74.039890},
{lat:40.728950,lng:-74.039890},
{lat:40.728940,lng:-74.039890},
{lat:40.728670,lng:-74.039940},
{lat:40.728300,lng:-74.040000},
{lat:40.727960,lng:-74.040060},
{lat:40.727790,lng:-74.040090},
{lat:40.727630,lng:-74.040040},
{lat:40.727270,lng:-74.040110},
{lat:40.726690,lng:-74.040200},
{lat:40.726640,lng:-74.040200},
{lat:40.726510,lng:-74.040220},
{lat:40.726480,lng:-74.040230},
{lat:40.725800,lng:-74.040330},
{lat:40.725380,lng:-74.040400},
{lat:40.725200,lng:-74.040420},
{lat:40.725120,lng:-74.040430},
{lat:40.725010,lng:-74.040450},
{lat:40.724810,lng:-74.040490},
{lat:40.724680,lng:-74.040510},
{lat:40.724090,lng:-74.040590},
{lat:40.723620,lng:-74.040660},
{lat:40.723240,lng:-74.040720},
{lat:40.723000,lng:-74.040760},
{lat:40.722910,lng:-74.040770},
{lat:40.722240,lng:-74.040890},
{lat:40.721780,lng:-74.040960},
{lat:40.721500,lng:-74.041000},
{lat:40.721260,lng:-74.041020},
{lat:40.720810,lng:-74.041090},
{lat:40.720110,lng:-74.041200},
{lat:40.719820,lng:-74.041250},
{lat:40.719640,lng:-74.041290},
{lat:40.719260,lng:-74.041340},
{lat:40.719020,lng:-74.041370},
{lat:40.718740,lng:-74.041410},
{lat:40.718690,lng:-74.041480},
{lat:40.718600,lng:-74.041620},
{lat:40.718390,lng:-74.041960},
{lat:40.718290,lng:-74.042110},
{lat:40.718270,lng:-74.042130},
{lat:40.718250,lng:-74.042150},
{lat:40.718230,lng:-74.042170},
{lat:40.718200,lng:-74.042180},
{lat:40.718150,lng:-74.042200},
{lat:40.717990,lng:-74.042240},
{lat:40.717840,lng:-74.042270},
{lat:40.717760,lng:-74.042290},
{lat:40.717650,lng:-74.042310},
{lat:40.717650,lng:-74.042310},
{lat:40.717700,lng:-74.042740}
];
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 90%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Polylines</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry&v=weekly"
defer
></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="info"></div>
<div id="map"></div>
</body>
</html>

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

I've seen lots of other questions similar to this (here, here and here), but they all have accepted answers that don't solve my problem. The best solution I have found to the problem is the StyledMarker library, which does let you define custom colours for markers, but I can't get it to use the default marker (the one you get when you do a google maps search - with a dot in the middle), it just seems to provide markers with a letter in, or with a special icon.

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 ;)

If you use Google Maps API v3 you can use setIcon e.g.
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 colours:
Blue marker
Red marker
Purple marker
Yellow marker
Green marker
Use the following piece of code to update default markers with different colors.
(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_ROSE)

Here is a nice solution using the Gooogle Maps API itself. No external service, no extra library. And it enables custom shapes and multiple colors and styles. The solution uses vectorial markers, which googlemaps api calls Symbols.
Besides the few and limited predefined symbols, you can craft any shape of any color by specifying an SVG path string (Spec).
To use it, instead of setting the 'icon' marker option to the image url, you set it to a dictionary containing the symbol options. As example, I managed to craft one symbol that is quite similar to the standard marker:
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 M -2,-30 a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
};
}
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: pinSymbol("#FFF"),
});
I you are careful to keep the shape key point at 0,0 you avoid having to define marker icon centering parameters. Another path example, the same marker without the dot:
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',
And here you have a very simple and ugly coloured flag:
path: 'M 0,0 -1,-2 V -43 H 1 V -2 z M 1,-40 H 30 V -20 H 1 z',
You can also create the paths using a visual tool like Inkscape (GNU-GPL, multiplatform). Some useful hints:
Google API just accepts a single path, so you have to turn any other object (square, cercle...) into a path and join them as a single one. Both commands at the Path menu.
To move the path to the (0,0), go to the Path Edit mode (F2) select all
the control nodes and drag them. Moving the object with F1, won't change the path node coords.
To ensure the reference point is at (0,0), you can select it alone and edit the coords by hand on the top toolbar.
After saving the SVG file, which is an XML, open it with an editor, look for the svg:path element and copy the content of the 'd' attribute.

Well the closest thing I've been able to get with the StyledMarker is this.
The bullet in the middle isn't quite a big as the default one though. The StyledMarker class simply builds this url and asks the google api to create the marker.
From the class use example use "%E2%80%A2" as your text, as in:
var styleMaker2 = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{text:"%E2%80%A2"},styleIconClass),position:new google.maps.LatLng(37.263477473067, -121.880502070713),map:map});
You will need to modifiy StyledMarker.js to comment out the lines:
if (text_) {
text_ = text_.substr(0,2);
}
as this will trim the text string to 2 characters.
Alternatively you could create custom marker images based on the default one with the colors you desire and override the default marker with code such as this:
marker = new google.maps.Marker({
map:map,
position: latlng,
icon: new google.maps.MarkerImage(
'http://www.gettyicons.com/free-icons/108/gis-gps/png/24/needle_left_yellow_2_24.png',
new google.maps.Size(24, 24),
new google.maps.Point(0, 0),
new google.maps.Point(0, 24)
)
});

I've extended vokimon's answer a bit, making it a bit more convenient for changing other properties as well.
function customIcon (opts) {
return Object.assign({
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',
fillColor: '#34495e',
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 1,
}, opts);
}
Usage:
marker.setIcon(customIcon({
fillColor: '#fff',
strokeColor: '#000'
}));
Or when defining a new marker:
const marker = new google.maps.Marker({
position: {
lat: ...,
lng: ...
},
icon: customIcon({
fillColor: '#2ecc71'
}),
map: map
});

Hi you can use icon as SVG and set colors. See this code
/*
* declare map and places as a global variable
*/
var map;
var places = [
['Place 1', "<h1>Title 1</h1>", -0.690542, -76.174856,"red"],
['Place 2', "<h1>Title 2</h1>", -5.028249, -57.659052,"blue"],
['Place 3', "<h1>Title 3</h1>", -0.028249, -77.757507,"green"],
['Place 4', "<h1>Title 4</h1>", -0.800101286, -76.78747820,"orange"],
['Place 5', "<h1>Title 5</h1>", -0.950198, -78.959302,"#FF33AA"]
];
/*
* use google maps api built-in mechanism to attach dom events
*/
google.maps.event.addDomListener(window, "load", function () {
/*
* create map
*/
var map = new google.maps.Map(document.getElementById("map_div"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
/*
* create infowindow (which will be used by markers)
*/
var infoWindow = new google.maps.InfoWindow();
/*
* create bounds (which will be used auto zoom map)
*/
var bounds = new google.maps.LatLngBounds();
/*
* marker creater function (acts as a closure for html parameter)
*/
function createMarker(options, html) {
var marker = new google.maps.Marker(options);
bounds.extend(options.position);
if (html) {
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(html);
infoWindow.open(options.map, this);
map.setZoom(map.getZoom() + 1)
map.setCenter(marker.getPosition());
});
}
return marker;
}
/*
* add markers to map
*/
for (var i = 0; i < places.length; i++) {
var point = places[i];
createMarker({
position: new google.maps.LatLng(point[2], point[3]),
map: map,
icon: {
path: "M27.648 -41.399q0 -3.816 -2.7 -6.516t-6.516 -2.7 -6.516 2.7 -2.7 6.516 2.7 6.516 6.516 2.7 6.516 -2.7 2.7 -6.516zm9.216 0q0 3.924 -1.188 6.444l-13.104 27.864q-0.576 1.188 -1.71 1.872t-2.43 0.684 -2.43 -0.684 -1.674 -1.872l-13.14 -27.864q-1.188 -2.52 -1.188 -6.444 0 -7.632 5.4 -13.032t13.032 -5.4 13.032 5.4 5.4 13.032z",
scale: 0.6,
strokeWeight: 0.2,
strokeColor: 'black',
strokeOpacity: 1,
fillColor: point[4],
fillOpacity: 0.85,
},
}, point[1]);
};
map.fitBounds(bounds);
});
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map_div" style="height: 400px;"></div>

since version 3.11 of the google maps API, the Icon object replaces MarkerImage. Icon supports the same parameters as MarkerImage. I even found it to be a bit more straight forward.
An example could look like this:
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};
for further information check this site

As others have mentioned, vokimon's answer is great but unfortunately Google Maps is a bit slow when there are many SymbolPath/SVG-based markers at once.
It looks like using a Data URI is much faster, approximately on par with PNGs.
Also, since it's a full SVG document, it's possible to use a proper filled circle for the dot. The path is modified so it is no longer offset to the top-left, so the anchor needs to be defined.
Here's a modified version that generates these markers:
var coloredMarkerDef = {
svg: [
'<svg viewBox="0 0 22 41" width="22px" height="41px" xmlns="http://www.w3.org/2000/svg">',
'<path d="M 11,41 c -2,-20 -10,-22 -10,-30 a 10,10 0 1 1 20,0 c 0,8 -8,10 -10,30 z" fill="{fillColor}" stroke="#ffffff" stroke-width="1.5"/>',
'<circle cx="11" cy="11" r="3"/>',
'</svg>'
].join(''),
anchor: {x: 11, y: 41},
size: {width: 22, height: 41}
};
var getColoredMarkerSvg = function(color) {
return coloredMarkerDef.svg.replace('{fillColor}', color);
};
var getColoredMarkerUri = function(color) {
return 'data:image/svg+xml,' + encodeURIComponent(getColoredMarkerSvg(color));
};
var getColoredMarkerIcon = function(color) {
return {
url: getColoredMarkerUri(color),
anchor: coloredMarkerDef.anchor,
size: coloredMarkerDef.size,
scaledSize: coloredMarkerDef.size
}
};
Usage:
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(latitude, longitude),
icon: getColoredMarkerIcon("#FFF")
});
The downside, much like a PNG image, is the whole rectangle is clickable. In theory it's not too difficult to trace the SVG path and generate a MarkerShape polygon.

In Internet Explorer, this solution does not work in ssl.
One can see the error in console as:
SEC7111: HTTPS security is compromised by this,
Workaround : As one of the user here suggested replace
chart.apis.google.com to chart.googleapis.com for the URL path to avoid SSL error.

You can use this code it works fine.
var pinImage = new google.maps.MarkerImage("http://www.googlemapsmarkers.com/v1/009900/");<br>
var marker = new google.maps.Marker({
position: yourlatlong,
icon: pinImage,
map: map
});

Combine a symbol-based marker whose path draws the outline, with a '●' character for the center. You can substitute the dot with other text ('A', 'B', etc.) as desired.
This function returns options for a marker with the a given text (if any), text color, and fill color. It uses the text color for the outline.
function createSymbolMarkerOptions(text, textColor, fillColor) {
return {
icon: {
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: fillColor,
fillOpacity: 1,
strokeColor: textColor,
strokeWeight: 1.8,
labelOrigin: { x: 0, y: -30 }
},
label: {
text: text || '●',
color: textColor
}
};
}

I try two ways to create the custom google map marker, this run code used canvg.js is the best compatibility for browser.the Commented-Out Code is not support IE11 urrently.
var marker;
var CustomShapeCoords = [16, 1.14, 21, 2.1, 25, 4.2, 28, 7.4, 30, 11.3, 30.6, 15.74, 25.85, 26.49, 21.02, 31.89, 15.92, 43.86, 10.92, 31.89, 5.9, 26.26, 1.4, 15.74, 2.1, 11.3, 4, 7.4, 7.1, 4.2, 11, 2.1, 16, 1.14];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {
lat: 59.325,
lng: 18.070
}
});
var markerOption = {
latitude: 59.327,
longitude: 18.067,
color: "#" + "000",
text: "ha"
};
marker = createMarker(markerOption);
marker.setMap(map);
marker.addListener('click', changeColorAndText);
};
function changeColorAndText() {
var iconTmpObj = createSvgIcon( "#c00", "ok" );
marker.setOptions( {
icon: iconTmpObj
} );
};
function createMarker(options) {
//IE MarkerShape has problem
var markerObj = new google.maps.Marker({
icon: createSvgIcon(options.color, options.text),
position: {
lat: parseFloat(options.latitude),
lng: parseFloat(options.longitude)
},
draggable: false,
visible: true,
zIndex: 10,
shape: {
coords: CustomShapeCoords,
type: 'poly'
}
});
return markerObj;
};
function createSvgIcon(color, text) {
var div = $("<div></div>");
var svg = $(
'<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">' +
'<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>' +
'<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>' +
'<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>' +
'</svg>'
);
div.append(svg);
var dd = $("<canvas height='50px' width='50px'></cancas>");
var svgHtml = div[0].innerHTML;
//todo yao gai bu dui
canvg(dd[0], svgHtml);
var imgSrc = dd[0].toDataURL("image/png");
//"scaledSize" and "optimized: false" together seems did the tricky ---IE11 && viewBox influent IE scaledSize
//var svg = '<svg width="32px" height="43px" viewBox="0 0 32 43" xmlns="http://www.w3.org/2000/svg">'
// + '<path style="fill:#FFFFFF;stroke:#020202;stroke-width:1;stroke-miterlimit:10;" d="M30.6,15.737c0-8.075-6.55-14.6-14.6-14.6c-8.075,0-14.601,6.55-14.601,14.6c0,4.149,1.726,7.875,4.5,10.524c1.8,1.801,4.175,4.301,5.025,5.625c1.75,2.726,5,11.976,5,11.976s3.325-9.25,5.1-11.976c0.825-1.274,3.05-3.6,4.825-5.399C28.774,23.813,30.6,20.012,30.6,15.737z"/>'
// + '<circle style="fill:' + color + ';" cx="16" cy="16" r="11"/>'
// + '<text x="16" y="20" text-anchor="middle" style="font-size:10px;fill:#FFFFFF;">' + text + '</text>'
// + '</svg>';
//var imgSrc = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
var iconObj = {
size: new google.maps.Size(32, 43),
url: imgSrc,
scaledSize: new google.maps.Size(32, 43)
};
return iconObj;
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Your Custom Marker </title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://canvg.github.io/canvg/canvg.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>

I tried for a long time to improve vokimon's drawn marker and make it more similar to Google Maps one (and pretty much succeeded). This is the code I got:
let circle=true;
path = 'M 0,0 C -0.7,-9 -3,-14 -5.5,-18.5 '+
'A 16,16 0 0,1 -11,-29 '+
'A 11,11 0 1,1 11,-29 '+
'A 16,16 0 0,1 5.5,-18.5 '+
'C 3,-14 0.7,-9 0,0 z '+
['', 'M -2,-28 '+
'a 2,2 0 1,1 4,0 2,2 0 1,1 -4,0'][new Number(circle)];
I also scaled it by 0.8.

These are custom Circular markers
small_red:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NUlH5v9rF5f+ZoCAwHaig8B8oPhOmKC1NU/P//7Q0DByrqgpSGAtSdOCAry9WRXt9fECK9oIUPXwYFYVV0e2ICJCi20SbFAuyG5uiECUlkKIQmOPng3y30d0d7Lt1bm4w301jQAOgcNoIDad1yOEEAFm9fSv/VqtJAAAAAElFTkSuQmCC
small_yellow:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NijL7v3p1+v8zZ6rAdGCg4X+g+EyYorS0NNv////PxMCxsRYghbEgRQcOHCjGqmjv3kKQor0gRQ8fPmzHquj27WaQottEmxQLshubopAQI5CiEJjj54N8t3FjFth369ZlwHw3jQENgMJpIzSc1iGHEwB8p5qDBbsHtAAAAABJRU5ErkJggg==
small_green:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiElEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81izL7n746/X/VmSowbRho+B8oPhOmKM02zfb/TCzQItYCpDAWpOhA8YFirIoK9xaCFO0FKXrY/rAdq6Lm280gRbeJNikWZDc2RUYhRiBFITDHzwf5LmtjFth3GesyYL6bxoAGQOG0ERpO65DDCQDX7ovT++K9KQAAAABJRU5ErkJggg==
small_blue:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAiklEQVR42mNgQIAoIF4NxGegdCCSHAMzEC81M4v6n56++n9V1RkwbWgY+B8oPhOmKM3WNu3/zJn/MbCFRSxIYSxI0YHi4gNYFRUW7gUp2gtS9LC9/SFWRc3Nt0GKbhNtUizIbmyKjIxCQIpCYI6fD/JdVtZGsO8yMtbBfDeNAQ2AwmkjNJzWIYcTAMk+i9OhipcQAAAAAElFTkSuQmCC
small_purple:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAi0lEQVR42mNgQIAoIF4NxGegdCCSHAMzEC+NMov6vzp99f8zVWfAdKBh4H+g+EyYorQ027T//2f+x8CxFrEghbEgRQcOFB/Aqmhv4V6Qor0gRQ8ftj/Equh2822QottEmxQLshubohCjEJCiEJjj54N8tzFrI9h36zLWwXw3jQENgMJpIzSc1iGHEwBt95qDejjnKAAAAABJRU5ErkJggg==
They are 9x9 png images.
Once they're on your page you can just drag them off and you'll have the actual png file.

change it to chart.googleapis.com for the path, otherwise SSL won't work

Using swift and Google Maps Api v3, this was the easiest way I was able to do it:
icon = GMSMarker.markerImageWithColor(UIColor.blackColor())
hope it helps someone.

Sometimes something really simple, can be answered complex. I am not saying that any of the above answers are incorrect, but I would just apply, that it can be done as simple as this:
I know this question is old, but if anyone just wants to change to pin or marker color, then check out the documentation: https://developers.google.com/maps/documentation/android-sdk/marker
when you add your marker simply set the icon-property:
GoogleMap gMap;
LatLng latLng;
....
// write your code...
....
gMap.addMarker(new MarkerOptions()
.position(latLng)
.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));
There are 10 default colors to choose from. If that isn't enough (the simple solution) then I would probably go for the more complex given in the other answers, fulfilling a more complex need.
ps: I've written something similar in another answer and therefore I should refer to that answer, but the last time I did that, I was asked to post the answer since it was so short (as this one)..

You can use color code also.
const marker: Marker = this.map.addMarkerSync({
icon: '#008000',
animation: 'DROP',
position: {lat: 39.0492127, lng: -111.1435662},
map: this.map,
});

Resources