2012-05-30 267 views
0

有人可以幫我Google Maps API?我試圖通過API顯示地圖,但地圖無處可見。我已經編寫了一個小提琴來展示我的意思。我會喜歡這個幫助。 Here's the fiddle.谷歌地圖v3:地圖不顯示

的Javascript:

//Map Options 
 
var roadmap = { 
 
    infoWindow: new google.maps.InfoWindow(), 
 
    options: { 
 
    map: { 
 
     center: new google.maps.LatLng(34.02238, -118.293338), 
 
     zoom: 15, 
 
     mapTypeId: 'roadmap' 
 
    }, 
 
    marker: { 
 
     position: roadmap.options.center, 
 
     title: "Hello", 
 
     icon: 'http://maps.google.com/mapfiles/ms/micons/blue-dot.png', 
 
     shadow: 'http://maps.google.com/mapfiles/ms/micons/msmarker.shadow.png' 
 
    } 
 
    } 
 
}; 
 

 
//Street view Options 
 
var StreetView = { 
 
    options: { 
 
    position: roadmap.options.map.center, 
 
    zoom: 1 
 
    } 
 
}; 
 

 
//Functions 
 
function bindInfoWindow(marker, map, infoWindow, html) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(html); 
 
    infoWindow.open(map, marker); 
 
    infoWindow.getContent(); 
 
    marker.openInfoWindowTabsHtml(infoTabs); 
 
    }); 
 
} 
 

 
function googleMaps() { 
 
    //Road map 
 
    roadmap.map = new google.maps.Map(document.getElementById("map"), roadmap.options.map); 
 

 
    //Road map's Marker 
 
    roadmap.options.marker.map = roadmap.map; 
 
    roadmap.marker = new google.maps.Marker(roadmap.options.marker); 
 

 
    //Street view map 
 
    StreetView.map = new google.maps.StreetViewPanorama(document.getElementById("map_StreetView"), StreetView.options); 
 

 
    //Bind onClick to marker & infoWindow 
 
    bindInfoWindow(roadmap.marker, roadmap.map, roadmap.infoWindow, roadmap.options.marker.title); 
 
} //end of load() 
 

 

 
/*Load | Call googleMaps after document is loaded*/ 
 
google.maps.event.addDomListener(window, 'load', function() { 
 
    googleMaps(); 
 
    //... (add more code here) 
 
});

HTML:

<!-- START: Google Maps API --> 
 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
 
<script type="text/javascript" src="this_map.js"></script> 
 
<!-- __END: Google Maps API --> 
 

 
<div id="map-container" > 
 
    <div id="map_StreetView" style="width: 350px; height: 250px"></div><br/> 
 
    <div id="map" style="width: 350px; height: 250px"></div> 
 
</div>

+0

「未捕獲的異常:TypeError:無法將」路標圖「轉換爲對象」。打開控制檯可能會非常有幫助。 – Styxxy

+0

@ matt-handy謝謝matt-handy。我的註釋也發現了一些錯誤。這裏是你的更正和糾正意見的小提琴:http://jsfiddle.net/TZyCP/7/ – Omar

回答

3

的錯誤是在這裏:

position: roadmap.options.center 

您不能引用一個對象,你剛剛創建。

我把它改爲:

position: new google.maps.LatLng(34.02238, -118.293338) 

和它的工作。

這是你的工作小提琴:http://jsfiddle.net/sGHqa/

1

TypeError: 'undefined' is not an object (evaluating 'roadmap.options') Whiiiiiiiiich是一種意料之中的,因爲你要定義路線圖......