javascript - set fill color marker google map - Stack Overflow

admin管理员组

文章数量:1287886

How can I use my last column to set the color of the marker?

  google.load("visualization", "1", {packages:["map"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Lat', 'Long', 'Name', 'Color'],
      [0.001, 0.002, 'Test 1', '#56df23'],
      [0.003, 0.004, 'Test 2', '#0023f6']
    ]);
    
    
    var options = {
        
        showTip: true,
        useMapTypeControl: true
        
        
    };

    var map = new google.visualization.Map(document.getElementById('map_div'));
    
    
    
    map.draw(data, options);
  }

While googling and stackoverflowing, I found this related topic: Google Maps: set custom color for type of markers

But the solution I am looking for must have these properties:

• colors are defined by users (= no use png images)
• I want to use the default marker, not a circle

How can I use my last column to set the color of the marker?

  google.load("visualization", "1", {packages:["map"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Lat', 'Long', 'Name', 'Color'],
      [0.001, 0.002, 'Test 1', '#56df23'],
      [0.003, 0.004, 'Test 2', '#0023f6']
    ]);
    
    
    var options = {
        
        showTip: true,
        useMapTypeControl: true
        
        
    };

    var map = new google.visualization.Map(document.getElementById('map_div'));
    
    
    
    map.draw(data, options);
  }

While googling and stackoverflowing, I found this related topic: Google Maps: set custom color for type of markers

But the solution I am looking for must have these properties:

• colors are defined by users (= no use png images)
• I want to use the default marker, not a circle

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow edited Sep 9, 2023 at 14:30 geocodezip 161k1414 gold badges226226 silver badges255255 bronze badges asked Jun 1, 2015 at 13:33 user3253002user3253002 1,68133 gold badges2525 silver badges4444 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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./maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>

There is no way to change the standard marker pin color.

You have to build your own usin Icon or Symbol.

If you don't wan't to use PNG you can use SVG, with SVG you can change the way your icon looks like without a backend server.

var marker = new google.maps.Marker({
    map: map,
    icon: 'data:image/svg+xml,<svg version="1.1" id="Capa_1" xmlns="http://www.w3/2000/svg" xmlns:xlink="http://www.w3/1999/xlink" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;" xml:space="preserve"><g><path fill="gree" d="M322.621,42.825C294.073,14.272,259.619,0,219.268,0c-40.353,0-74.803,14.275-103.353,42.825c-28.549,28.549-42.825,63-42.825,103.353c0,20.749,3.14,37.782,9.419,51.106l104.21,220.986c2.856,6.276,7.283,11.225,13.278,14.838c5.996,3.617,12.419,5.428,19.273,5.428c6.852,0,13.278-1.811,19.273-5.428c5.996-3.613,10.513-8.562,13.559-14.838l103.918-220.986c6.282-13.324,9.424-30.358,9.424-51.106C365.449,105.825,351.176,71.378,322.621,42.825zM270.942,197.855c-14.273,14.272-31.497,21.411-51.674,21.411s-37.401-7.139-51.678-21.411c-14.275-14.277-21.414-31.501-21.414-51.678c0-20.175,7.139-37.402,21.414-51.675c14.277-14.275,31.504-21.414,51.678-21.414c20.177,0,37.401,7.139,51.674,21.414c14.274,14.272,21.413,31.5,21.413,51.675C292.355,166.352,285.217,183.575,270.942,197.855z"/></g></svg>',
    position: new google.maps.LatLng(-33.9, 151.2)
});

https://jsfiddle/k510L9u2/

With SVG you can use more advanced graphics then using the Symbol option, with Symbols you can create SVG paths only.

You cannot change the color of the marker, you can only change the icon associated to a marker

marker = new google.maps.Marker({
  position: new google.maps.LatLng(lat, lng),
  map: map,
  icon:'youricon.png'
});

本文标签： javascriptset fill color marker google mapStack Overflow