I'm using a legacy version of google maps.
I set up my markers like this, using Json data to fill in the variables:
var marker = createMarker(marker_id, point, course_name, phone, holes, ninefee, eightteenfee, ninefee_weekend, eightteenfee_weekend, ninefee_cart, eightteenfee_cart, teetimes, notes, map);
function createMarker(marker_id, point, course_name, phone, holes, ninefee, eightteenfee, ninefee_weekend, eightteenfee_weekend, ninefee_cart, eightteenfee_cart, teetimes, notes, map) {
var marker = new google.maps.Marker({
id: marker_id,
position: point,
map: map,
icon: {
path: "M128 0L416 128 175.5 234.9c.4 1.6 .5 3.3 .5 5.1v84.8c25.2-3.1 52.1-4.8 80-4.8c141.4 0 256 43 256 96s-114.6 96-256 96S0 469 0 416c0-35.5 51.5-66.6 128-83.2V256 240 0zm96 448c35.3 0 64-14.3 64-32s-28.7-32-64-32s-64 14.3-64 32s28.7 32 64 32z",
scale: 0.05,
strokeWeight: 0.2,
strokeColor: '#000000',
strokeOpacity: 1,
fillColor: '#08755F',
fillOpacity: 1
}
});
Now I'd like to reset the color on mouseover, but it isn't working:
google.maps.event.addListener(marker, "mouseover", function() {
marker.set("fillColor","#000000"); //nothing happens
});
I don't get any errors, but nothing happens. How do I set the color of the marker?
The fillColor
belongs to the icon. Get the icon from the marker with marker.getIcon()
change it then set it back on the marker:
google.maps.event.addListener(marker, "mouseover", function() {
var icon = marker.getIcon(); // get icon
icon.fillColor="#000000"; // change its color
marker.setIcon(icon); // set it back on the marker
});
google.maps.event.addListener(marker, "mouseout", function() {
var icon = marker.getIcon();
icon.fillColor="#08755F";
marker.setIcon(icon);
});
working code snippet:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 10,
center: { lat: -33.9, lng: 151.2 },
});
setMarkers(map);
}
// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
const beaches = [
["Bondi Beach", -33.890542, 151.274856, 4],
["Coogee Beach", -33.923036, 151.259052, 5],
["Cronulla Beach", -34.028249, 151.157507, 3],
["Manly Beach", -33.80010128657071, 151.28747820854187, 2],
["Maroubra Beach", -33.950198, 151.259302, 1],
];
function setMarkers(map) {
for (let i = 0; i < beaches.length; i++) {
const beach = beaches[i];
var marker = createMarker(i, { lat: beach[1], lng: beach[2] }, "name", "phone", "holes", "ninefee", "eightteenfee", "ninefee_weekend", "eightteenfee_weekend", "ninefee_cart", "eightteenfee_cart", "teetimes", "notes", map);
}
}
function createMarker(marker_id, point, course_name, phone, holes, ninefee, eightteenfee, ninefee_weekend, eightteenfee_weekend, ninefee_cart, eightteenfee_cart, teetimes, notes, map) {
var marker = new google.maps.Marker({
id: marker_id,
position: point,
map: map,
icon: {
path: "M128 0L416 128 175.5 234.9c.4 1.6 .5 3.3 .5 5.1v84.8c25.2-3.1 52.1-4.8 80-4.8c141.4 0 256 43 256 96s-114.6 96-256 96S0 469 0 416c0-35.5 51.5-66.6 128-83.2V256 240 0zm96 448c35.3 0 64-14.3 64-32s-28.7-32-64-32s-64 14.3-64 32s28.7 32 64 32z",
scale: 0.05,
strokeWeight: 0.2,
strokeColor: '#000000',
strokeOpacity: 1,
fillColor: '#08755F',
fillOpacity: 1
}
});
google.maps.event.addListener(marker, "mouseover", function() {
var icon = marker.getIcon(); //nothing happens
console.log(icon.fillColor)
icon.fillColor="#000000";
marker.setIcon(icon);
});
google.maps.event.addListener(marker, "mouseout", function() {
var icon = marker.getIcon(); //nothing happens
console.log(icon.fillColor)
icon.fillColor="#08755F";
marker.setIcon(icon);
});
}
window.initMap = initMap;
/*
* 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;
}
<!doctype html>
<html>
<head>
<title>Complex Marker Icons</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the script to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises. See
https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly"
defer
></script>
</body>
</html>