1

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

  • Hi Tom, not real an answer; but Google Maps for Expressionengine is not supported anymore. You can try the Gmaps module devot-ee.com/add-ons/gmaps – Reinos Dec 16 '16 at 14:21
  • Thanks, I was aware it stopped being supported. Have you much experience with Gmaps? Any good? – Tom Perkins Dec 16 '16 at 14:24
0

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.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.