How can I add a uniform size to all of the icon variables in google Maps setMarkers function?

Question

Where do I implement this line of code in my current block?
size: new google.maps.Size(20, 20)
From what I was reading, you have to set the size in the variable. But I cant put that line of code in anywhere without breaking he function.
Here is my example array if needed:
["TITLE", "LAT", "LNG", "Z-INDEX", "CATEGORY"]
My current function that puts icons on my map:

function setMarkers(markers) {
   deleteMarkers(); 
var iconBase =
            'http://localhost:8090/HELPERSITE/images/map-categories/';
var icons = {
         Contractor: {
            icon: iconBase + 'Misc..png'  
          },
          'Child Care': {
            icon: iconBase + 'Misc..png'  
          },
          'Misc.': {
            icon: iconBase + 'Misc..png' 
          }
        };
    if (markers){
  for (var i = 0; i < markers.length; i++) {
    var w = markers[i];
    var marker = new google.maps.Marker({
      position: {lat: parseFloat(w[1]), lng: parseFloat(w[2])},
      map: map,
      icon: icons[w[4]].icon(),
      title: w[0],
      zIndex: parseFloat(w[3])
    });
     console.log(icons[w[4]]);
      markerArray.push(marker);
}        
}
}

thanks, but it doesnt answer my question. I am unable to add the line of code to my current example to make it work. I dont need help on which line to use (i dont think), i need help on where to implement it. — Center Truth, Apr 10 '20 at 20:17
You would need to modify each icon object. So before or after `icon: iconBase + 'Misc..png'`, add the size — imvain2, Apr 10 '20 at 20:22
do you mean like this? `icon: iconBase + 'cc.png', size: new google.maps.Size(10, 10) ` I have tried this but it doesnt work. I also tried `size: (10, 10) — Center Truth, Apr 10 '20 at 20:29
After adding the size after icon, change `icons[w[4]].icon()` to `icons[w[4]]`. By having icon in there you are only going to pull back `icon` and not other info. — imvain2, Apr 10 '20 at 20:35
after doing that i just get the regular red google map Icon. I think I have to include the `.icon` because the icon depends on `w[4].icon` to tell it which one. Is there a way to include `w[4].icon` + `size`? I am new to JS sorry! — Center Truth, Apr 10 '20 at 20:40

score 1 · Accepted Answer · answered Apr 10 '20 at 21:32

1

This is an easy fix:

icon: {
       url: icons[w[4]].icon,
       scaledSize: new google.maps.Size(10, 10)
      },

Scaled size keep aspect ratio and does not crop. While size just crops a box. Hopefully this will help others

answered Apr 10 '20 at 21:32

Dimitri Bostrovich

315
1
11

wow thanks! worked flawlessly! – Center Truth Apr 10 '20 at 21:42

score 0 · Answer 2 · answered Apr 10 '20 at 20:38

I added size to the icon object, I renamed icon to image and when calling the array I removed the reference to icon

function setMarkers(markers) {
   deleteMarkers(); 
var iconBase =
            'http://localhost:8090/HELPERSITE/images/map-categories/';
var icons = {
         Contractor: {
            image: iconBase + 'Misc..png', 
            size: new google.maps.Size(10, 10) 
          },
          'Child Care': {
            image: iconBase + 'Misc..png', 
            size: new google.maps.Size(10, 10) 
          },
          'Misc.': {
            image: iconBase + 'Misc..png', 
            size: new google.maps.Size(10, 10)
          }
        };
    if (markers){
  for (var i = 0; i < markers.length; i++) {
    var w = markers[i];
    var marker = new google.maps.Marker({
      position: {lat: parseFloat(w[1]), lng: parseFloat(w[2])},
      map: map,
      icon: icons[w[4]],
      title: w[0],
      zIndex: parseFloat(w[3])
    });
     console.log(icons[w[4]]);
      markerArray.push(marker);
}        
}
}

here is the console error: `setIcon: not a string; and not an instance of PinView; and no url property; and no path property`. The console also reads: `size: _.K width: 10 height: 10 j: undefined i: undefined` — Center Truth, Apr 10 '20 at 20:50

How can I add a uniform size to all of the icon variables in google Maps setMarkers function?

2 Answers2