Menu
05/06 2016

Multiple Location Googlemap with navigation

Dear Valued visitor,
Thank you so much for your support and interest in the articles on Webegg. Whilst a lot of content is totally free, some of the things I put a lot of work into are slightly restricted in terms of code and demo links. I've had to do this to keep my level of support to the high quality I want to.

Please click below to subscribe, get rid of this message and see this article in it's full glory;

This is a small one off payment of £5 to give you full access to all content on my site forever.

It has taken a long time but I've been busy putting together some more useful practical Front End solutions the first of which is a culmination of various enhancements and additions to a Googlemap.

I've been using Googlemaps for years, adding the usual mundane 'marker on a map' scripts to Websites that all look and feel the same. This one includes two main features you are unlikely to find on many sites namely a pop up information window you can style independently of Googles API and multiple markers that are populated via json and placed into an animated accordion off to the side of the map, navigating you to the marker on click.

The reason for doing it this way is because companies often have office bases in different areas of the country or internationally. I have done many of these things in isolation - an accordion here, a marker map there, though never brought them together. It works very well:

The HTML

OK so the accordion content on the left of the demo above could be made more dynamic though you may want to add more flourishes than you want to put in the json file so I kept it seperate. Allow for creativity always:

  

Apart from the addresses on the left, the rest is fairly straighforward. We'll need a container for the map canvas and some layout to the page. The css is quite extensive for my layout but you could either write your own or download the demo, which has everything working straight out of the box.

The Javascript

The Googlemap needs a few plugins, not just a call to the googlemap API. I tend to copy these plugins directly to a plugins.js file rather than link to them seperately. This is to ease calls on the server which is just bad practice. For the script below to function correctly you'll need both the markup above plus the infowindow plugin plus the ddaccordion plugin to deal with the sidebar accordion.

  
(function mainFunk(a, b) {
    if (!isMob) {
        var isMob = false;
    }
    if (!isMob) {
        initMap();
    } else {

    }
})(window, jQuery);


function initMap() {
    if ($('#map_canvas').length <= 0) {
        return false;
    }
    
    // script shown after subscription

    var map = new google.maps.Map(document.getElementById("map_canvas"), {
        // script shown after subscription
    });

    map.setOptions({ styles: styles });

    // script shown after subscription

    var infowindow = new google.maps.InfoWindow({
        // script shown after subscription
    });

    // script shown after subscription

    var myOptions = {
        // script shown after subscription
    };

    var ib = new InfoBox(myOptions);
    var MarkerImage = siteRoot + 'images/marker.png';
    var markerMap = {}

    // Create the markers
    for (index in markers) addMarker(markers[index], index);

        function addMarker(data, i) {
        
            // script shown after subscription
        }

    // Zoom and center the map to fit the markers
    // This logic could be conbined with the marker creation.
    // Just keeping it separate for code clarity.
    var bounds = new google.maps.LatLngBounds();

    for (index in markers) {
        var data = markers[index];
        bounds.extend(new google.maps.LatLng(data.lat, data.lng));
    }

    map.fitBounds(bounds);
    var origcent = new google.maps.LatLng(map.getCenter());
    // Handle the DOM ready event to create the StreetView panorama
    // as it can only be created once the DIV inside the infowindow is loaded in the DOM.

    var pin = new google.maps.MVCObject();

    function openInfoWindow(marker) {
    
        // script shown after subscription
    }

    google.maps.event.addListener(ib, 'closeclick', function() {
        centermap();
    });

    function centermap() {

        // script shown after subscription
    }

    google.maps.event.trigger(markerMap["marker-0"], "click");
    $(".headoff").click(function() {
        google.maps.event.trigger(markerMap["marker-0"], "click");
        map.setZoom(16);
        contactresizet($(this));
        return false;
    });

    // script shown after subscription

    $(".headoff").trigger("click");

}


function contactbeh() {
    if ($("#map_canvas").length > 0) {
        $("#map_canvas").css({
            'height': '400px'
        });
    }
}

function contactresizet($this) {
    // script shown after subscription
}


// Accordion for sidebar addresses
ddaccordion.init({
    // script shown after subscription
});
  

If it looks like there is a lot going on here you are right, there is. The comments should help though the process behind writing the Javascript is largely based around logical actions.

The way I write Javascript is always evolving but functions were split into dealing with the accordion behaviour, the Googlemap including markers and the triggering of the information windows. Extra plugins are required due to Google default information windows being notoriously impossible to style. The infobox plugin allows you to add your own markup around the information window popup so you can design it your own way. This has a great impact on the finished map. I also added my own theme to the general map components thanks to Snazzymaps.

Leave a Reply

Your email address will not be published. Required fields are marked *

This article is in the Uncategorized category. Here are some other related articles also in this category.