Based upon your code, with some ( ok, lots of ) modifications and a degree of creative license, I put together a demo of how you can essentially toggle each marker you have loaded onto the map between two states - differing here simply by the scaledSize property only as far as I can tell from your code. Personally I found it a little confusing when there were several variables with similar long names - just sort of adds too much clutter to my mind.
Assuming that the source data is probably being derived from a database query and output as JSON I generated some dummy data based upon the various properties of the mapVar variable.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Google Maps: </title>
<style>
#map{
width:800px;
height:600px;
float:none;
margin:auto;
}
</style>
<script>
const mapVar={
path:'/path/to/images/markers',
sizes:{ // sizes used to build `Icons`
ready:32, // default -> 60
active:60 // default -> 120
},
lat:56.522556, // default latitude ~ details unknown
lng:-2.969856, // default longitude ~ details unknown
locations:[ // example data
{
"name": "Glaxo - 2 x 132m turbines",
"lat": "56.70431711148748",
"lng": "-2.4660869436035",
"marker_info": "Glaxo - 2 x 132m turbines, 2 Blade Turbine, 5 Meridian St, Montrose, Angus DD10 8DS, UK",
"icon": "/images/css/2_blade_turbine.png"
},
{
"name": "Carsegownie - 1 x78m turbine",
"lat": "56.67951330362271",
"lng": "-2.8062983350524746",
"marker_info": "Carsegownie - 1 x78m turbine, Anemometer, B9134, Forfar, Angus DD8, UK",
"icon": "/images/css/mappoint-anemometer.png"
},
{
"name": "Frawney - Over Finlarg - 5x100m turbines",
"lat": "56.56806620951482",
"lng": "-2.9501720266113125",
"marker_info": "Frawney - Over Finlarg - 5x100m turbines, Antenna, Kerton Farm, Forfar, Angus DD8, UK",
"icon": "/images/css/mappoint-antenna.png"
},
{
"name": "Dodd Hill - 5 x 125m turbines",
"lat": "56.54251020079966",
"lng": "-2.9051538305053555",
"marker_info": "Dodd Hill - 5 x 125m turbines, Simple, 4 Backmuir Rd, Duntrune, Tealing, Dundee, Angus DD4 0PT, UK.",
"icon": "/images/css/mappoint-blue.png"
},
{
"name": "Ark Hill - 8 x 81m turbines",
"lat": "56.57065514278748",
"lng": "-3.0511732892761074",
"marker_info": "Ark Hill - 8 x 81m turbines, New location, 3 Dryburn Cottages, Glenogilvy, Forfar, Angus DD8 1UP, UK",
"icon": "/images/css/mappoint-green.png"
},
{
"name": "Nathro 17 x 135m turbines",
"lat": "56.793249595719956",
"lng": "-2.8623101711273193",
"marker_info": "Nathro 17 x 135m turbines, House, 1 Goynd Steading, Glenogil, Forfar, Angus DD8 3SW, UK.",
"icon": "/images/css/mappoint_house.png"
},
{
"name": "Govals - 6 x 87m turbines",
"lat": "56.582320876071854",
"lng": "-2.9509015874633633",
"marker_info": "Govals - 6 x 87m turbines, McDonalds, B9127, Forfar, Angus DD8, UK.",
"icon": "/images/css/mappoint_mcdonalds.png"
},
{
"name": "The Carrach - 9 x 84m turbines",
"lat": "56.6938437674986",
"lng": "-3.131382067657455",
"marker_info": "The Carrach - 9 x 84m turbines, vawt, B951, Kirriemuir, Angus DD8, UK",
"icon": "/images/css/vawt.png"
}
]
};
class marker{
/*
simple class to add new marker and assign callbacks.
Override default options by giving different args at
runtime.
*/
constructor( map, latlng, args={}, callbacks=false ){
this.map=map;
this.latlng=latlng;
this.args=args;
this.callbacks=callbacks;
return this.create();
};
create(){
let options=Object.assign({
clickable:true,
draggable:false,
position:this.latlng,
map:this.map
},this.args );
let mkr=new google.maps.Marker( options );
if( this.callbacks && Object.keys( this.callbacks ).length > 0 ){
Object.keys( this.callbacks ).forEach( event => {
google.maps.event.addListener( mkr, event, this.callbacks[ event ] );
})
}
return mkr;
};
};
function initMap(){
let markers=[];
let latlng = new google.maps.LatLng( mapVar.lat, mapVar.lng );
let locations=mapVar.locations;
let map = new google.maps.Map( document.getElementById('map'), {
zoom: 9,
center: latlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
});
locations.forEach( obj=>{
let icon=obj.icon || mapVar.path + '/assets/svg/marker-default.svg';
// A default Icon to be used when creating the map
let _default={
url:icon,
scaledSize:new google.maps.Size( mapVar.sizes.ready, mapVar.sizes.ready )
};
// The alternative state Icon to be displayed when marker is clicked.
let _active={
url:icon,
scaledSize:new google.maps.Size( mapVar.sizes.active, mapVar.sizes.active )
};
/*
custom properties to assign to the marker using the marker class above.
The `content` is used to build the infowindow - from mapVar data.
The `index` is used to determine which marker to select from the array.
The `infowindow` becomes a property of the marker... many markers might cause issues!
*/
let args={
index:0,
infowindow:new google.maps.InfoWindow(),
content:obj.marker_info,
icon:_default
};
// toggle between these Icons
let Icons=[ _default, _active ];
// assign whatever callbacks are needed to be used with the new marker.
let callbacks={
click:function(e){
this.index = 1 - this.index;
this.setIcon( Icons[ this.index ] );
// open the infowindow
with( this.infowindow ){
setContent( this.content );
setPosition( e.latLng );
open( map, this );
}
// if the infowindow is open, close it
if( !this.index )this.infowindow.close()
}
};
markers.push( new marker( map, new google.maps.LatLng( obj.lat, obj.lng ), args, callbacks ) );
});
};
</script>
</head>
<body>
<div id='map'></div>
<script async defer src='//maps.googleapis.com/maps/api/js?key=<APIKEY>&callback=initMap'></script>
</body>
</html>
The icons could be completely different rather than just a different size if needed.
Working example
