Google Maps API JavaScript with PHP

Question

I must be over-looking something simple but I'm not getting any errors. I'm also not getting any maps. The PHP to call the address and zip code work fine, both are in there correctly. Tried on a couple of different browsers to make sure the script wasn't being blocked somehow. I am using a valid key limited to the client's domain.

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

Sleep may be the enemy of production but it's the friend of the brain....

Answer 1

Hey I think you have to put your Google API js file import above your code (its better practice). And take a look at your asnyc defer in your script loading tag ... so the browser will not wait for this file and execute the other parts of the page.

So Google is undefined because the JavaScript from the Google API file is not loaded.

<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

It was actually on the API management page. I used the wrong URL. Tired wins again. I had allowed .com and it was supposed to be .ca - the weird thing is I was not getting an error for some time. Then it showed up.