时间戳

首页 > 解决方案 > 谷歌地图没有打开，控制台没有错误

google-maps - 谷歌地图没有打开，控制台没有错误

问题描述

谷歌地图未在浏览器中打开。并且控制台中也没有错误。所以我无法确定问题以及我做错了什么。注意：我在 wamp 服务器中运行。

我正在尝试使用 zoho crm 记录数据在 googlemaps 上添加多个标记。最后，当我尝试以这种方式进行操作时，我却以这样的方式结束了。任何帮助将不胜感激提前感谢。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Account Locations</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyB3pwJBXen9pXXXXXXXoeZOEYoPWsM">
    </script>     <!-- i used enabled geocoding apikey here -->
</head>

<body>
    <div id="map"></div>
</body>


<style type="text/css">
    html {
        height: 100%
    }  
    body {
        height: 100%;
        margin: 0;
        padding: 0
    }  
    #map-canvas {
        width: 100%;
        height: 100%;
    }
</style>


</html>


<script type="text/javascript">
    var delay = 100;
    var infowindow = new google.maps.InfoWindow();
    var latlng = new google.maps.LatLng(21.0000, 78.0000);
    var mapOptions = {
        zoom: 5,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var geocoder = new google.maps.Geocoder();
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var bounds = new google.maps.LatLngBounds();

    function geocodeAddress(address, next) {
        geocoder.geocode({
            address: address
        }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var p = results[0].geometry.location;
                var lat = p.lat();
                var lng = p.lng();
                createMarker(address, lat, lng);
            } else {
                if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    nextAddress--;
                    delay++;
                } else {}
            }
            next();
        });
    }

    function createMarker(add, lat, lng) {
        var contentString = add;
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            map: map,
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
        });

        bounds.extend(marker.position);

    }
    var locations = [
        'New Delhi, India',
        'Mumbai, India',
        'Bangaluru, Karnataka, India',
        'Hyderabad, Ahemdabad, India',
        'Gurgaon, Haryana, India',
        'Cannaught Place, New Delhi, India',
        'Bandra, Mumbai, India',
        'Nainital, Uttranchal, India',
        'Guwahati, India',
        'West Bengal, India',
        'Jammu, India',
        'Kanyakumari, India',
    ];
    var nextAddress = 0;

    function theNext() {
        if (nextAddress < locations.length) {
            setTimeout('geocodeAddress("' + locations[nextAddress] + '",theNext)', delay);
            nextAddress++;
        } else {
            map.fitBounds(bounds);
        }
    }
    theNext();
</script>

如果有任何疑问，请参考这个，这段代码会做什么

标签： google-maps

解决方案

你的map没有尺码。它们不是用于#map. #map-canvas在你的 CSS 中应该是#map.

工作代码片段：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Account Locations</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js">
  </script>
  <!-- i used enabled geocoding apikey here -->
</head>

<body>
  <div id="map"></div>
</body>


<style type="text/css">
  html {
    height: 100%
  }
  
  body {
    height: 100%;
    margin: 0;
    padding: 0
  }
  
  #map {
    width: 100%;
    height: 100%;
  }
</style>


</html>


<script type="text/javascript">
  var delay = 100;
  var infowindow = new google.maps.InfoWindow();
  var latlng = new google.maps.LatLng(21.0000, 78.0000);
  var mapOptions = {
    zoom: 5,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var geocoder = new google.maps.Geocoder();
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var bounds = new google.maps.LatLngBounds();

  function geocodeAddress(address, next) {
    geocoder.geocode({
      address: address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var p = results[0].geometry.location;
        var lat = p.lat();
        var lng = p.lng();
        createMarker(address, lat, lng);
      } else {
        if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
          nextAddress--;
          delay++;
        } else {}
      }
      next();
    });
  }

  function createMarker(add, lat, lng) {
    var contentString = add;
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      map: map,
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(contentString);
      infowindow.open(map, marker);
    });

    bounds.extend(marker.position);

  }
  var locations = [
    'New Delhi, India',
    'Mumbai, India',
    'Bangaluru, Karnataka, India',
    'Hyderabad, Ahemdabad, India',
    'Gurgaon, Haryana, India',
    'Cannaught Place, New Delhi, India',
    'Bandra, Mumbai, India',
    'Nainital, Uttranchal, India',
    'Guwahati, India',
    'West Bengal, India',
    'Jammu, India',
    'Kanyakumari, India',
  ];
  var nextAddress = 0;

  function theNext() {
    if (nextAddress < locations.length) {
      setTimeout('geocodeAddress("' + locations[nextAddress] + '",theNext)', delay);
      nextAddress++;
    } else {
      map.fitBounds(bounds);
    }
  }
  theNext();
</script>

推荐阅读