谷歌地圖Api 3示例不工作Jsfiddle

請你看看下面的link，讓我知道爲什麼這谷歌地圖既不在我的電腦上，也不在jsfiddle上。我剛剛從Google Maps API獲取了代碼。我還需要添加更多內容嗎？谷歌地圖Api 3示例不工作Jsfiddle

就像我說的我都嘗試在我的電腦上和的jsfiddle現場與此鏈接感謝您的意見和幫助 3] 2

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Overlays within Street View</title> 
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet"> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> 
<script> 
var map; 
var panorama; 
var astorPlace = new google.maps.LatLng(40.729884, -73.990988); 
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491); 
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272); 
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891); 

function initialize() { 

// Set up the map 
var mapOptions = { 
center: astorPlace, 
zoom: 18, 
mapTypeId: google.maps.MapTypeId.ROADMAP, 
streetViewControl: false 
}; 
map = new google.maps.Map(document.getElementById('map-canvas'), 
    mapOptions); 

// Setup the markers on the map 
var cafeMarker = new google.maps.Marker({ 
    position: cafe, 
    map: map, 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
    title: 'Cafe' 
    }); 

var bankMarker = new google.maps.Marker({ 
    position: bank, 
    map: map, 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00', 
    title: 'Bank' 
    }); 

    var busMarker = new google.maps.Marker({ 
    position: busStop, 
    map: map, 
    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00', 
    title: 'Bus Stop' 
}); 

// We get the map's default panorama and set up some defaults. 
// Note that we don't yet set it visible. 
panorama = map.getStreetView(); 
panorama.setPosition(astorPlace); 
panorama.setPov(/** @type {google.maps.StreetViewPov} */({ 
heading: 265, 
pitch: 0 
})); 
} 

function toggleStreetView() { 
var toggle = panorama.getVisible(); 
if (toggle == false) { 
panorama.setVisible(true); 
} else { 
panorama.setVisible(false); 
} 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
</head> 
<body> 
    <div id="panel" style="margin-left:-100px"> 
    <input type="button" value="Toggle Street View" onclick="toggleStreetView();">  </input> 
</div> 
<div id="map-canvas"></div> 
</body> 
</html>

來源

2013-05-31 Mona Coder

只是爲了提醒您，Google圖表圖表API已被棄用。如果可能的話，我會避免使用它來生成標記圖像。 – dana

[使用Google Maps JavaScript API v3中的FusionTablesLayer時出現空白頁]的可能重複（http://stackoverflow.com/questions/12789004/blank-page-when-i-use-fusiontableslayer-with-google-maps-javascript -API-V3） – geocodezip

您需要設置一個height和width爲map-canvas。我已經清理了一些代碼，它應該在這裏工作：http://jsfiddle.net/Zuds3/3/

HTML

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script> 
<div id="panel" style="margin-left:-100px"> 
    <input type="button" value="Toggle Street View" onclick = "toggleStreetView();" ></input> 
</div> 
<div id="map-canvas"></div>

CSS

#map-canvas{ 
    height: 400px; 
    width: 400px; 
}

的JavaScript

var map; 
var panorama; 
var astorPlace = new google.maps.LatLng(40.729884, -73.990988); 
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491); 
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272); 
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891); 

function initialize() { 

    // Set up the map 
    var mapOptions = { 
    center: astorPlace, 
    zoom: 18, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    streetViewControl: false 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // Setup the markers on the map 
    var cafeMarker = new google.maps.Marker({ 
     position: cafe, 
     map: map, 
     icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00', 
     title: 'Cafe' 
    }); 

    var bankMarker = new google.maps.Marker({ 
     position: bank, 
     map: map, 
     icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00', 
     title: 'Bank' 
    }); 

    var busMarker = new google.maps.Marker({ 
     position: busStop, 
     map: map, 
     icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00', 
     title: 'Bus Stop' 
    }); 

    // We get the map's default panorama and set up some defaults. 
    // Note that we don't yet set it visible. 
    panorama = map.getStreetView(); 
    panorama.setPosition(astorPlace); 
    panorama.setPov(/** @type {google.maps.StreetViewPov} */({ 
    heading: 265, 
    pitch: 0 
    })); 
} 

function toggleStreetView() { 
    var toggle = panorama.getVisible(); 
    if (toggle == false) { 
    panorama.setVisible(true); 
    } else { 
    panorama.setVisible(false); 
    } 
} 

google.maps.event.addDomListener(window, 'load', initialize);

來源

2013-05-31 23:46:06 Chase

谷歌地圖Api 3示例不工作Jsfiddle

回答

相關問題