Pourquoi n'est-ce pas un exemple de carte de google.cartes.Carte? InvalidValueError: setMap: une instance de la Carte;

J'obtiens l'erreur Assertion failed: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama sur une carte google de la page web. J'ai ensuite lu cette question ailleurs ici sur Stack Overflow qui m'a dit j'ai besoin d'une instance de la google.maps.MAP objet. J'ai pensé que, en appelant cet objet afin d'initialiser la carte que je voudrais appeler cet objet.

Auparavant, j'ai obtenu l'erreur i is not defined j'ai donc déplacé le createMarker fonction dans le $.getJSON fonction où il a une portée locale.

Dois-je appeler google.mapsMap quelque part d'autre?

Ce que je fais mal?

HTML:

<body>
    <h1 style="text-align: center;">Hello World</h1>
    <div id="map"></div>
    <ul id="list"></ul>

</body>

CSS:

#map {
    height: 300px;
    width: 600px;
    border: 1px solid black;
    margin: 0 auto;
}

JavaScript:

function initialize(){
    var mapProp = {
        center: new google.maps.LatLng(38, -78),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map'), mapProp);
};

$(document).ready(function(){
    var url = 'https://opendata.howardcountymd.gov/resource/96q9-qbh7.json';
    initialize();
    $.getJSON(url, function (data){
        $.each(data, function(i, field) {
            $('#list').append("<li>" + data[i].location.longitude + " & " + data[i].location.latitude + "</li>");
            createMarker(data);

            function createMarker (data) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(data[i].location.latitude, data[i].location.longitude),
                    map: map,
                    title: field.crossroad
                });
            };
        });
    });

});

OriginalL'auteur adin | 2015-11-10