如何在谷歌地图 API v3 中显示地图 [重复]答案

【问题标题】：how to display map in google map API v3 [duplicate]如何在谷歌地图 API v3 中显示地图 [重复]
【发布时间】：2013-07-05 13:27:06
【问题描述】：

我有这个用于搜索位置的 google map api 示例代码。我可以提供输入但无法在浏览器上显示地图。我在https://developers.google.com/maps/documentation/javascript/examples/directions-panel 和其他代码中尝试了各种其他代码，但它们都有同样的问题。我无法解决这个问题。我试图以 javascript 形式映射 CSS 代码。

如果此代码有问题，请帮助我：

<!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>

【问题讨论】：

标签： javascript html google-maps google-maps-api-3 google-maps-api-2

【解决方案1】：

您可能还想为 map-canvas 容器添加一些样式，因为它会在页面加载时折叠；

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

【讨论】：

【解决方案2】：

您在创建地图对象时出错，您只给出了类型，但您忽略了缩放和居中选项，两者都是必需的，您必须这样做：

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

【讨论】：

在 mapOptions 中提供了所有必需的参数后它不起作用
我没有尝试过你所有的代码，因为你说地图没有显示所以我只对这个问题进行更正，也许你的代码中还有其他错误
请先生，帮我解决错误并使其正常工作
我唯一能说的是你必须在网络服务器中执行代码而不是直接执行文件