如何更改谷歌地图的视图

时间:2016-05-28 14:24:16

标签: google-maps

我正在尝试根据我的需要设置谷歌地图视图但无法做到。其实我想像这样显示谷歌地图

enter image description here

但它显示如下

enter image description here 我正在使用此代码:

function init_map() {
    var var_location = new google.maps.LatLng(33.6934473,35.644258);

    var var_mapoptions = {
      center: var_location,
      zoom: 12
    };

    var var_marker = new google.maps.Marker({
        position: var_location,
        map: var_map,
        title:"Venice"});

    var var_map = new google.maps.Map(document.getElementById("map-container"),
        var_mapoptions);

    var_marker.setMap(var_map); 

  }

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

任何帮助将不胜感激。 谢谢

1 个答案:

答案 0 :(得分:1)

将地图的中心设置为与标记不同的位置。

function init_map() {
  var var_location = new google.maps.LatLng(33.6934473, 35.644258);

  var var_mapoptions = {
    center: new google.maps.LatLng(33.691578, 35.523065),
    zoom: 12
  };

  var var_marker = new google.maps.Marker({
    position: var_location,
    map: var_map,
    title: "Venice"
  });

  var var_map = new google.maps.Map(document.getElementById("map-container"),
    var_mapoptions);

  var_marker.setMap(var_map);
}

google.maps.event.addDomListener(window, 'load', init_map);
html,
body,
#map-container {
  height: 200px;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="center"></div>
<div id="map-container"></div>