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

Did you remember to give the map a height? Also, does the google ' — atomSmasher, Aug 31 '16 at 19:02
also, you need to screen special characters (as " ' ") in your address for valid JS output. — Alex Babak, Aug 31 '16 at 19:25

score 2 · Accepted Answer · edited Dec 17 '16 at 13:00

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>

I actually did take out the async defer so I'm giving you the correct answer even though I had already "fixed" it. Thanks. — mrmunk, Aug 31 '16 at 21:37

score 0 · Answer 2 · answered Aug 31 '16 at 21:35

0

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.

answered Aug 31 '16 at 21:35

mrmunk

69
2
10

Google Maps API JavaScript with PHP

2 Answers2