Google 映射 API JavaScript 与 PHP

Question

我一定是忽略了一些简单的东西，但我没有收到任何错误。我也没有得到任何地图。 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>

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

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

Answer 2

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

Google 映射 API JavaScript 与 PHP

Google Maps API JavaScript with PHP

javascript

php

google-maps

google-geolocation