Google Maps for ExpressionEngine: Marker/Infobox click area

Question

I have a map that shows around 70 markers using the Google Maps for ExpressionEngine add-on.

I originally set it up using clustering but this stopped working at some point so I reverted back to showing individual markers.

I have it setup to show just one marker if multiple entries exist with the same postcode, but the problem comes when there are two markers very close to each other.

In this situation, it's impossible to click on the second marker without zooming in really close. This appears to be caused by the click area around the marker being larger than the marker image itself and therefore covering the marker behind.

Does anyone have a good solution to either 1) Allow more accurate selection of markers or 2) Get clustering working correctly?

Thanks in advance,

Tom

Answer 1

Yes, It is possible with spider js. Example: https://jawj.github.io/OverlappingMarkerSpiderfier/demo.html

Library: https://github.com/jawj/OverlappingMarkerSpiderfier

If you face trouble to implement the library, I have already implemented it in my previous project.

Include JS file in FOOTER or The very bottom of your template. It will good if you download the js in your server and load from your server, It will increase the speed of loading the JS file. http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js

Put Following code in your template for map. Make sure you have icon in your /images/map-pin.png directory.

{!--
======================================================
Include map
======================================================
--}
{exp:gmap:init id="map" class="gmap" style="width:100%;height:820px;" scrollwheel="false"}
{!-- Set Map Markers  --}
{exp:channel:entries channel="map" disable="categories|category_fields|member_data|pagination|trackbacks|relationships" dynamic="no"}
{if map_latitude && map_longitude}
{exp:gmap:marker id="map"  latitude="{map_latitude}" longitude="{map_longitude}" icon="/images/map-pin.png"}
<div class="map-address">
<h2>{title}</h2>
<a href="/map/{url_title}">View Details</a>
</div>
{/if}
{/exp:gmap:marker}
{/exp:channel:entries}

Put the following Script in your template

<script type="text/javascript">
    window.onload = function() {
        var gm = google.maps;
        var iw = new gm.InfoWindow();
        var oms = new OverlappingMarkerSpiderfier(map_map,
            {markersWontMove: true, markersWontHide: true});

        var usualColor = 'ffee22';
        var spiderfiedColor = 'eebb22';
        var iconWithColor = function(color) {
            return 'https://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|+|' +
            color + '|000000|ffff00';
        }
        var shadow = new gm.MarkerImage(
            'https://www.google.com/intl/en_ALL/mapfiles/shadow50.png',
            new gm.Size(37, 34),
            new gm.Point(0, 0), 
            new gm.Point(10, 34)
        );

        oms.addListener('click', function(marker) {
            iw.setContent(marker.desc);
            iw.open(map_map, marker);
        });
        oms.addListener('spiderfy', function(markers) {
            for(var i = 0; i < markers.length; i ++) {
                markers[i].setIcon(iconWithColor(spiderfiedColor));
                markers[i].setShadow(null);
            } 
            iw.close();
        });
        oms.addListener('unspiderfy', function(markers) {
            for(var i = 0; i < markers.length; i ++) {
                markers[i].setIcon('/images/map-pin.png');
                markers[i].setShadow(shadow);
            }
        });

        var bounds = new gm.LatLngBounds();

        $.each(map_markers, function(x, marker) {

            var lat = marker.getPosition().lat();
            var lon = marker.getPosition().lng();

            var loc = new gm.LatLng(lat, lon);
            bounds.extend(loc);

            var new_marker = new gm.Marker({
                position: loc,

                map: map_map,
                icon: '/images/map-pin.png',
                shadow: shadow
            });
            new_marker.desc = marker.window.content;
            oms.addMarker(new_marker);
            marker.setMap(null);

        });
        map_map.fitBounds(bounds);

        // for debugging/exploratory use in console
        window.map = map_map;
        window.oms = oms;
    }
</script>

This is it. If you facing issue to load the map or in spidify clustering, Check the errors in console and comment here. I will help on that. All the best.