Google Map Marker clickable area too big

Question

Using the google maps API, I have a map with a few close markers that are custom icons. Each marker is 41px by 50px, but the clickable area for each is 200px by 200px. Screenshot of map with marker and it's clickable area

Here is the code that creates the markers:

new google.maps.Marker({
        map: map,
        position: pos,
        tags: tags,
        id: id,
        animation: google.maps.Animation.DROP,
        icon: {
            path: 'M2.82467,37.476c.52516,1.27507,1.1015,2.54515,1.7189,3.80431.78478,1.6005,1.63589,3.18336,2.53256,4.73642S8.915,49.093,9.882,50.57435A141.80266,141.80266,0,0,0,27.20482,71.85121c.00036-.00035,17.10761-16.70763,24.38424-34.37524a34.60259,34.60259,0,0,0,1.82468-10.35353A26.17876,26.17876,0,0,0,27.20891,1.00018V1l-.002.00009L27.20482,1v.00018A26.17876,26.17876,0,0,0,1,27.12244m9.00957.23264a17.17136,17.17136,0,1,1,2.13034,8.304',
            fillOpacity: 1,
            fillColor: iconFill,
            strokeColor: iconStroke,
            strokeWeight: 2,
            scale: 0.7,
            size: new google.maps.Size(41, 50),
            scaledSize: new google.maps.Size(41, 50),
            anchor: {
                x: 25,
                y: 75
            }
        }
    })

I have tried using the size and scaledSize attributes to change it, but they have done nothing.

Is there any way I can reduce the size of the clickable area?

Answer 1

Based on my experience, I suggest you create icons in png format, which are automatically scaled according to the device on which the map is displayed. Alternatively, what I did and it was a real bloodbath, you should create a marker prototype and scale it from code based on the current zoom of the map.

A side consideration: since your markers do not differ much from the default one, take a look at those already provided by Google or this site: An icon font for use with Google Maps API and Google Places API using SVG markers and icon labels. I have used them sometimes, but at the end I still prefer my own icons custom made or modified with Photoshop.

Answer 2

I don't know how you're using the map, but I have recently done something like this:

    // GET: Mappa
    public ActionResult Map()
    {
        // get fontane
        Fontane[] fontane = db.Fontane.ToArray();
        // prepare json string
        string markers = "[";
        // loop fontane
        for (int i = 0; i < fontane.Count(); i++)
        {
            markers += "{";
            // id
            markers += string.Format("\"fId\": \"{0}\",", fontane[i].FontanaID);
            // name
            markers += string.Format("\"title\": \"{0}\",", fontane[i].Nome);
            // position
            markers += string.Format("\"lat\": \"{0}\"", fontane[i].Latitudine).Replace(",", ".") + ",";
            markers += string.Format("\"lng\": \"{0}\"", fontane[i].Longitudine).Replace(",", ".") + ",";
            // icon
            string fIcon =  fontane[i].Active == true ? 
                (fontane[i].Allarme == true ? "/Content/icons/fontana_R.png" : "/Content/icons/fontana_G.png") : 
                "/Content/icons/fontana_W.png";
            // icon
            markers += string.Format("\"icon\": \"{0}\"", fIcon);
            markers += "},";
        }
        markers += "];";

        ViewBag.Markers = markers;
        return View();
    }

in an MVC Controller. as you can see I'm selecting the icons before sending them to the view.

@model Presidium.Models.Fontane
@{
ViewBag.Title = "Map";
}


<div id="gMap" style="height:100vh;width:100vw;"></div>

<script>
    let markers = @Html.Raw(ViewBag.Markers);
    window.onload = function () {
        let mapOptions = {
            center: new google.maps.LatLng(41.893140, 12.483330),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            scrollwheel: true,
            draggable: true
        };
        let map = new google.maps.Map(document.getElementById("gMap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            let data = markers[i]
            let fLatLng = new google.maps.LatLng(data.lat, data.lng);

            let marker = new google.maps.Marker({
                position: fLatLng,
                map: map,
                title: data.title,
                icon: data.icon
            });
            map.setTilt(0);
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    let url = "/Fontane/Details/" + data.fId;
                    window.location.href = url; 
                });
            })
            (marker, data);
        }
    }


</script>

Now I don't find it, but I have also an application that has different animations and icons to visualize better alarms. At the end I find it a simple approach. As I said before, went through shapes and real time animation of cars on a map changing on zoom, and it was a real bloodbath.