JQuery Promise + Google map setting markers for locations from JSON is not working

Question

I am trying to markers on locations from Json file. I am using JQuery Promise, so that markers are set when both promises (initiating map and getting json file) are resolved. I am using This html page with map:

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
    <script type="text/javascript" src="js/markerclusterer_compiled.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap" async defer></script>
 </head>
 <body>
   <div id="map"></div>

    <script type="lodash/template" id="infowindow-template" >
        <% items.forEach(function(item) { %>
        <p><b><%-item.title%></b>, <%-item.author%></p>
        <p><%-item.location%></p>
        <p><a href="https://www.myminifactory.com/object/<%-item.url%>" target="_blank">Get more</a></p>
        <% }); %>
    </script>
 </body>

app.js with all functions:

var map;
var loadMapDeferred = $.Deferred();
var allSculptures;
var locations;

initMap = function() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 30, lng: 0},
        zoom: 3
    });
    loadMapDeferred.resolve();
}

var urlCDN = 'http://localhost/myproject/uploads/data.json';
var loadDataPromise = $.getJSON(urlCDN).then(function(data) {
    allSculptures = data.sculptures;
    locations = {};
    for(var i=0; i<data.location.length; i++) {
        locations[data.location[i].name] = data.location[i].location;
    }
});

$.when(loadMapDeferred, loadDataPromise).then(function() {
    var markers = _.map(locations, function(location, locationName) {
        return createMarker(locationName, location);
    });

    var mcOptions = {gridSize: 25};
    new MarkerClusterer(map, markers, mcOptions);
});

var currentInfoWindow;

function createMarker(locationName, location) {
    var marker = new google.maps.Marker({
        position: location
    });

    var infoWindow;
    marker.addListener('click', function() {
        if(currentInfoWindow)
            currentInfoWindow.close();
        if(infoWindow == null) {
            infoWindow = new google.maps.InfoWindow({
                content: getCityInfoWindow(locationName)
            });
        }
        infoWindow.open(map, marker);
        currentInfoWindow = infoWindow;
    });

    return marker;
}

data.json

 {"sculptures":[{"title":"Bust of Caracalla","location":"Paris"},
           {"title":"Brutus The Younger","location":"Paris"}],
  "location":[{"name":"Beaux-Arts in Dijon, France","location":{"lat":47,"lng":5}},
         {"name":"Louvre, Paris","location":{"lat":48,"lng":2}},
         {"name":"St Pauls Cathedral, London","location":{"lat":51,"lng":-0}},
         {"name":"V&A, London","location":{"lat":51,"lng":-0}}]}

I am getting map, but can't see markers. What am I doing wrong?

Answer 1

When you create the markers like so:

var marker = new google.maps.Marker({
   position: location
});

You also need to specify the map:

var marker = new google.maps.Marker({
   position: location,
   map: map
});

JQuery Promise + Google map setting markers for locations from JSON is not working

Question

1 answers

solution1
0 2016-03-30 18:07:28

JQuery Promise + Google map setting markers for locations from JSON is not working

Question

1 answers

solution1 0 2016-03-30 18:07:28

solution1
0 2016-03-30 18:07:28