0

I am trying to populate a Google Map with multiple markers from a JSON script. The map works perfectly, however I am struggeling to get the markers to show up.

I have tried this with the same results: Google Maps - Multiple marker from extern json

My JSON:

{"markers":[ { "latitude":57.7973333, "longitude":12.0502107, "title":"Angered", 
"content":"Representing :)" }, { "latitude":57.6969943, "longitude":11.9865, 
"title":"Gothenburg", "content":"Swedens second largest city" } ]}

My HTML:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery.gmap.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function(){
        $('.w-map-h').gMap().bind('init', function() {
            // This URL won't work on your localhost, so you need to change it
            // see http://en.wikipedia.org/wiki/Same_origin_policy
            $.getJSON( 'js/mapData.json', function(data) {
                $.each( data.markers, function(i, marker) {
                    $('#w-map-h').gMap('addMarker', {
                        'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                        'bounds': true
                    }).click(function() {
                            $('.w-map-h').gMap('openInfoWindow', { 'content': marker.content }, this);
                        });
                });
            });
        });
    });
</script>
<div class="w-map">
     <div class="w-map-h" style="height: 300px;">
 </div>
 </div>

jQuery is attached on the page further up.

Let me know if I can do anything else.

Thanks.

4

0 回答 0