谷歌地图 API JavaScript 和 PHP答案

【问题标题】：Google Maps API JavaScript with PHP谷歌地图 API JavaScript 和 PHP
【发布时间】：2017-01-08 11:32:34
【问题描述】：

我必须忽略一些简单的东西，但我没有收到任何错误。我也没有得到任何地图。调用地址和邮政编码的 PHP 工作正常，两者都正确。尝试了几个不同的浏览器，以确保脚本没有被阻止。我正在使用仅限于客户端域的有效密钥。

<div id="map" class="map"></div>
<script type="text/javascript">
  var geocoder;
  var map;

  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(48.291876, 16.339551);
    var mapOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    codeAddress()
  }

  function codeAddress() {
    var image = 'http://ratemycondo.ca/wp-content/uploads/icons/map-icon-orange-bldg.png';
    var address = '<?php echo $property_address; ?>, <?php echo $property_zip; ?>';
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          icon: image,
          position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
  initialize()

</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=VALID_KEY_IS_HERE&callback=initMap" type="text/javascript"></script>

睡眠可能是生产的敌人，但它是大脑的朋友....

【问题讨论】：

你记得给地图一个高度吗？另外，在使用 google API 的脚本之前是否需要 google '
另外，您需要在您的地址中屏蔽特殊字符（如“ ' ”）以获得有效的 JS 输出。

标签： javascript php google-maps google-geolocation

【解决方案1】：

嘿，我认为您必须将您的 Google API js 文件导入放在您的代码之上（这是更好的做法）。并在你的脚本加载标签中查看你的 asnyc defer ... 这样浏览器就不会等待这个文件并执行页面的其他部分。

因此 Google 未定义，因为未加载 Google API 文件中的 JavaScript。

<script  src="https://maps.googleapis.com/maps/api/js?key=VALID_KEY_IS_HERE&callback=initMap" type="text/javascript"></script>
<div id="map" class="map"></div>
<script type="text/javascript">
  var geocoder;
  var map;

  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(48.291876, 16.339551);
    var mapOptions = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map'), mapOptions);
    codeAddress()
  }

  function codeAddress() {
    var image = 'http://ratemycondo.ca/wp-content/uploads/icons/map-icon-orange-bldg.png';
    var address = '<?php echo $property_address; ?>, <?php echo $property_zip; ?>';
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {

        map.setCenter(results[0].geometry.location);
        var marker = new google.maps.Marker({
          map: map,
          icon: image,
          position: results[0].geometry.location
        });
      } else {
        alert('Geocode was not successful for the following reason: ' + status);
      }
    });
  }
  
  initialize();
  
  

</script>

【讨论】：

我实际上确实取出了异步延迟，所以即使我已经“修复”了它，我也会给你正确的答案。谢谢。

【解决方案2】：

它实际上是在 API 管理页面上。我使用了错误的网址。累了又赢了。我允许 .com 并且它应该是 .ca - 奇怪的是我有一段时间没有收到错误。然后就出现了。

【讨论】：