如何在谷歌地圖API v3中顯示地圖

我有谷歌地圖API搜索位置的示例代碼。我可以提供輸入，但無法在瀏覽器上顯示地圖。我嘗試了https://developers.google.com/maps/documentation/javascript/examples/directions-panel和其他代碼中的其他代碼，但所有代碼都有相同的問題。我無法將問題縮短。我試圖用JavaScript形式映射CSS代碼。如何在谷歌地圖API v3中顯示地圖

請幫我如果有什麼不對的代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <link href="/maps/documentation/javascript/examples/default.css" 
     rel="stylesheet"> 
    <title>Places search box</title> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
    <script> 
function initialize() { 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var defaultBounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(-33.8902, 151.1759), 
     new google.maps.LatLng(-33.8474, 151.2631)); 
    map.fitBounds(defaultBounds); 

    var input =(document.getElementById('target')); 
    var searchBox = new google.maps.places.SearchBox(input); 
    var markers = []; 

    google.maps.event.addListener(searchBox, 'places_changed', function() { 
    var places = searchBox.getPlaces(); 

    for (var i = 0, marker; marker = markers[i]; i++) { 
     marker.setMap(null); 
    } 

    markers = []; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0, place; place = places[i]; i++) { 
     var image = { 
     url: place.icon, 
     size: new google.maps.Size(71, 71), 
     origin: new google.maps.Point(0, 0), 
     anchor: new google.maps.Point(17, 34), 
     scaledSize: new google.maps.Size(25, 25) 
     }; 

     var marker = new google.maps.Marker({ 
     map: map, 
     icon: image, 
     title: place.name, 
     position: place.geometry.location 
     }); 

     markers.push(marker); 

     bounds.extend(place.geometry.location); 
    } 

    map.fitBounds(bounds); 
    }); 

    google.maps.event.addListener(map, 'bounds_changed', function() { 
    var bounds = map.getBounds(); 
    searchBox.setBounds(bounds); 
    }); 
} 

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

    </script> 
    <style> 
     #target { 
     width: 345px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="panel"> 
     <input id="target" type="text" placeholder="Search Box"> 
    </div> 
    <div id="map-canvas"></div> 
    </body> 
</html>

來源

2013-07-05 Manish Jha

在創建地圖對象你有一個錯誤，你只給類型，但是你離開了變焦和中心選項，要求兩者，你必須做這樣的：

var mapOptions = { 
    zoom: 8, 
    center: new google.maps.LatLng(-34.397, 150.644), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

Google Maps Documentation

來源

2013-07-05 13:44:23 daver

因爲你說的那個地圖犯規表演，所以我只改正了這個問題，也許你有一些其他錯誤，它不會放棄在這個MapOptions –

所有必需的參數我沒有嘗試過所有的代碼後，工作代碼 – daver

請先生，幫我解決錯誤，並使其工作 –

您可能還需要一些造型添加到地圖畫布的容器，因爲這將是山坳頁面加載時失效;

#map-canvas { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    }

來源

2013-07-05 14:31:42 EvilEpidemic

如何在谷歌地圖API v3中顯示地圖

回答

相關問題