Google Maps Marker Icon Padding Between Icon-fillcolor And Strokecolor

I am trying to create a Google map marker icon with padding between the icon-fillColor and the outer StrokeColor. My Marker Code: marker = new google.maps.Marker({ id: i, position:

Solution 1:

Something like this (using two overlapping markers) should work, you can add additional parameters (or create an "options" object) to define the colors of the various pieces:

functionmakeComplexIcon(map,latLng,fillColor,stripeColor,outsideColor,title,id,label) {
  varbottom=newgoogle.maps.Marker({
    zIndex:10, //bottomid:id,
    position:latLng,
    map:map,
    title:title,
    icon: {
      path:google.maps.SymbolPath.CIRCLE,
      scale:15,
      fillColor:fillColor,
      fillOpacity:1.0,
      strokeWeight:6,
      strokeOpacity:0.8,
      strokeColor:outsideColor,
      rotation:30
    },
  });vartop=newgoogle.maps.Marker({
    zIndex:15, //topid:id,
    position:latLng,
    label:label,
    map:map,
    title:title,
    icon: {
      path:google.maps.SymbolPath.CIRCLE,
      scale:15,
      fillColor:fillColor,
      fillOpacity:1.0,
      strokeWeight:2,
      strokeOpacity:0.8,
      strokeColor:stripeColor,
      rotation:30
    },
  });

proof of concept fiddle

code snippet:

functioninitMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {
      lat: -25.363882,
      lng: 131.044922
    }
  });

  var position = map.getCenter(),
    i = 10;
  makeComplexIcon(map, position, "#4A86FE", "white", "red", "My Title", i, {
    text: 'id',
    color: "white",
    fontWeight: 'bold',
    fontSize: '16px',
  });
  makeComplexIcon(map, {
    lat: -27.6728168,
    lng: 121.6283098
  }, "green", "yellow", "orange", "W. Australia", 12, {
    text: 'id1',
    color: "blue",
    fontWeight: 'bold',
    fontSize: '16px',
  })
  makeComplexIcon(map, {
    lat: -30.0,
    lng: 136.2
  }, "black", "white", "black", "S. Australia", 14, {
    text: 'id2',
    color: "red",
    fontWeight: 'bold',
    fontSize: '16px',
  })
}

functionmakeComplexIcon(map, latLng, fillColor, stripeColor, outsideColor, title, id, label) {
  var marker = new google.maps.Marker({
    zIndex: 10, // bottomid: id,
    position: latLng,
    map: map,
    title: title,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: fillColor,
      fillOpacity: 1.0,
      strokeWeight: 6,
      strokeOpacity: 0.8,
      strokeColor: outsideColor,
      rotation: 30
    },
  });
  var marker = new google.maps.Marker({
    zIndex: 15, // topid: id,
    position: latLng,
    label: label,
    map: map,
    title: title,
    icon: {
      path: google.maps.SymbolPath.CIRCLE,
      scale: 15,
      fillColor: fillColor,
      fillOpacity: 1.0,
      strokeWeight: 2,
      strokeOpacity: 0.8,
      strokeColor: stripeColor,
      rotation: 30
    },
  });
}

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

<divid="map"></div><!-- Replace the value of the key parameter with your own API key. --><scriptasyncdefersrc="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"></script>