json-map-markers.js

'use strict';
var map;
var infoWindow;
var markers = [];
var contents = [];

function addMarker(location, i)
{
    var image = 'bs-gold-32-rounded.png';
    var latLong = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng));

    markers[i] = new google.maps.Marker({
        position: latLong,
        map: map,
        icon: image 
    });
    
    contents[i] = '<div><h2>' + location.company + '</h2><p>';

    if (location.address1.length > 0) {
        contents[i] += location.address1 + '<br/>';
    }
    if (location.address2.length > 0) {
        contents[i] += location.address2 + '<br/>';
    }
    if (location.town.length > 0) {
        contents[i] += location.town + '<br/>';
    }
    if (location.county.length > 0) {
        contents[i] += location.county + '<br/>';
    }
    if (location.postcode.length > 0) {
        contents[i] += location.postcode + '<br/>';
    }

    contents[i] += '</p></div>';

    google.maps.event.addListener(markers[i], 'click', function(){
        infoWindow.setContent(contents[i]);
        infoWindow.open(map,markers[i]);
    });
}

function initMap() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(54.8, -4.6),
        zoomControl: false,
        panControl: false,
        mapTypeControl: true,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var url = "convertcsv.json";   // See expected format below
    
    infoWindow = new google.maps.InfoWindow({
        maxWidth: 500
    });


    $.getJSON(url, '', function(data, txtStatus, jqXHR){
        var i;
        for (i=0;i<data.Locations.length; i++) {
            var location = data.Locations[i];
            addMarker(location, i);
        }
    });
}