0

JSON スクリプトから複数のマーカーを使用して Google マップを作成しようとしています。マップは完璧に機能しますが、マーカーを表示するのに苦労しています。

私は同じ結果でこれを試しました: Google マップ - extern json からの複数のマーカー

私の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" } ]}

私の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はさらに上のページに添付されています。

他にできることがあれば教えてください。

ありがとう。

4

0 に答える 0