Display Map Markers from External JSON Source

This is a spin-off of another thread: I am needing a way to add markers to Google Map, based-on geo-coordinates from an external JSON file.  The JSON file is stored locally on my web server and is being called to display information within a map window.   Additionally, I am looking for a similar method for calling a url to display a custom marker for each location.  The URL would also be stored in the same JSON file.

Below, is my code:

function initMap() {
        var hc = {lat: 40.466442, lng: -85.362709};
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 12,
            center: hc
        });

        var infowindow = new google.maps.InfoWindow({
            content: obj
        });

        var iconBase = "http://icons.wxug.com/i/c/k/cloudy.gif";
            var marker = new google.maps.Marker({
                position: hc,
                map: map,
                title: 'Hartford City',
                icon: iconBase
            });

        marker.addListener('click', function() {
            infowindow.open(map, marker);
        });
    }

    var downloadJSON = function() {
        $.getJSON( "ajax/GeoObs.json?_="+new Date().getTime(), function( data ) {
            var items = [];
            items.push( "<li id='Weather'>Station: " + data.features[0].properties.Station + "</li>");
            items.push( "<li id='Weather'>Time: " + data.features[0].properties.Time + "</li>");
            items.push( "<li id='Weather'>Weather: " + data.features[0].properties.Weather + "</li>");
            items.push( "<li id='Weather'>Temp: " + data.features[0].properties.Temp + "</li>");
            items.push( "<li id='Weather'>Wind: " + data.features[0].properties.Wind + "</li>");
            obj = $('<div>').append($( "<ul/>", { class: "my-new-list", html: items.join("") })).html();
            initMap();
        });
    }

Select allOpen in new window