Javascript 初始化谷歌地图显示_Javascript_Html_Google Maps Api 3_Safari

Javascript 初始化谷歌地图显示

javascript html google-maps-api-3 safari

Javascript 初始化谷歌地图显示,javascript,html,google-maps-api-3,safari,Javascript,Html,Google Maps Api 3,Safari,我正在创建一个使用谷歌地图API显示地图的web应用程序。当我重新加载页面时，它不会初始化坐标告诉它的地图，并且是“模糊的”。一旦我使用左边的工具栏缩小并放大，一切都很好。这是我的密码： <!DOCTYPE html> <html> <head> <title>Google Maps JavaScript</title> <meta name="viewport" content="width=device-width, init

我正在创建一个使用谷歌地图API显示地图的web应用程序。当我重新加载页面时，它不会初始化坐标告诉它的地图，并且是“模糊的”。一旦我使用左边的工具栏缩小并放大，一切都很好。这是我的密码：

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
  html, body, #map_canvas {
    margin: 0;
    padding: 0;
    height: 50%;
  }
</style>
<script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var map;
  function initialize() {
    var myOptions = {
      zoom: 14,
      center: new google.maps.LatLng(2.3584170693, -71.065063476),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        myOptions);

  var bikeLayer = new google.maps.BicyclingLayer();
  bikeLayer.setMap(map);

    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(42.346872819794896, -71.06643676757812),
      map: map,
      title: 'REPORT'
    });

    var marker = new google.maps.Marker({
    position: new google.maps.LatLng(42.363363955820496, -71.08978271484375),
      map: map,
      title: 'REPORT'
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width: 90%; height: 300%"></div>
</body>
</html>


谷歌地图JavaScript
html，正文，#地图#画布{
保证金：0；
填充：0；
身高：50%；
}
var映射；
函数初始化（）{
变量myOptions={
缩放：14，
中心：新google.maps.LatLng（2.3584170693，-71.065063476），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map_canvas'），
肌肽）；
var bikeLayer=new google.maps.BicyclingLayer（）；
bikeLayer.setMap（map）；
var marker=new google.maps.marker({
位置：new google.maps.LatLng（42.346872819794896，-71.06643676757812），
地图：地图，
标题：“报告”
});
var marker=new google.maps.marker({
位置：new google.maps.LatLng（42.363363955820496，-71.08978271484375），
地图：地图，
标题：“报告”
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

我注意到您的标记位于波士顿（42.3，-71）附近，但选项中所示的地图中心缺少一个“4”，并将初始位置发送到哥伦比亚（2.3，-71）

关于模糊性，可能只是自行车层需要一段时间才能加载？我无法重现这种效果。

您的内联高度与css高度冲突，顺便说一句。在Firefox中看起来不错。您是否在特定浏览器中遇到问题？请相应地编辑标签。是！这是初始位置的问题。非常感谢。我忘了“4”。