Google Maps Rendering Issues?

Question

I just started working with google-maps-api and I think its great. However along my journey to google maps mastery, I came across a roadblock that hopefully you guys can help with. Following the google maps tutorial, and placing the js code into a seperate file works. However when I tried to break the code down into several helper methods, the map doesn't render. Google Map not Rendering. I am wondering if there is a potential error with page loading, anyways I have included my helper.js and map.js code. Any tips or suggestions to fix this would be appreciated. Thanks!

Here are my helper functions:

/**
* HELPER CLASS for google map api
* Contains helpful methods for use in google maps
* By: Christian Wang
* Version 1.0
**/

/**
* Takes a geocoder object and returns the address in an array of latitude, longitude
**/
function codeAddress(geocoder, address) {
var latlng = [];
geocoder.geocode({
    'address': address
}, function(results, status) {
    if (status == "OK") {
      latlng[0] = results[0].geometry.location.lat();
      latlng[1] = results[0].geometry.location.lng();
    } else {
      console.log('Geocode was not successful for the following reason: ' + 
status);
    }
  });
   return latlng;
}

/**
* Reverse geocodes an array of latitude, longitude and returns an address
**/
function getAddress(geocoder, latlng) {
  var address = "";
  geocoder.geocode({
      'location': latlng
    },
    function(results, status) {
      if (status == "OK") {
        address = results[0].formatted_address;
      } else {
        console.log('Geocode was not successful for the following reason: ' 
+ status);
      }
    });
  return address;
}

/**
 * Moves the map to the current location and sets the zoom level
 **/
function setLocation(geocoder, map, location, zoom) {
  //Check if the location is an address or an array of latitude, longitude
  if (typeof location === "string") {
    //Check if geocoder is undefined
    if (geocoder) {
      map.setCenter(codeAddress(geocoder, location));
    } else {
       console.log('Geocode object is undefined');
    }
  } else {
     map.setCenter(location);
  }

  //Check if zoom is undefined
  if (zoom) {
    map.setZoom(zoom);
  } else {
    console.log('Zoom is undefined');
  }
}
/**
 * Adds a marker on a given map at a given location
 **/
function addMarker(geocoder, map, location) {
  //Check if the location is an address or an array of latitude, longitude
  if (typeof location === "string") {
    var marker = new google.maps.Marker({
      position: codeAddress(geocoder, location),
      title: "Home",
      map: map,
      visible: true
    });
  } else {
    var marker = new google.maps.Marker({
      position: location,
      title: "Home",
      map: map,
      visible: true
    });
  }
}

Here's my main map class :

/**
* MAP CLASS for transportation app
* Manages the rendering and event handling of google maps
* By: Christian Wang
* Version 1.0
**/
function initMap() {
  var geocoder, map; // Create new geocoder and map objects
  geocoder = new google.maps.Geocoder();
  map = new google.maps.Map(document.getElementById('map'), {
    center: codeAddress(geocoder, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3")
  });
  setLocation(geocoder, map, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3", 4);
  addMarker(geocoder, map, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3");

}

Pretty sure you have to set a zoom, in your MapOptionsObject. — StackSlave, Aug 29 '17 at 23:01
I set the zoom with my helper function, setLocation(). Even setting the zoom directly when instantiating the map object doesn't render the map. Thanks! — squishy123, Aug 29 '17 at 23:03
geocode() is an async method your other code is going to finish before it does. also in codeAddress you are doing a return in the geocode() callback and not in the codeAddress function itself. [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Patrick Evans, Aug 29 '17 at 23:03
Thanks I can see that now. So in order to geocode() the addresses I have to delay everything and wait for the geocode() callback to run first? — squishy123, Aug 29 '17 at 23:13

score 1 · Answer 1 · answered Aug 29 '17 at 23:06

It won't render without a zoom. I don't know about the rest of your code, but

map = new google.maps.Map(document.getElementById('map'), {
  center: codeAddress(geocoder, "34 Bracknell Avenue, Markham, ON, Canada, L6C0R3")
});

should look like

map = new google.maps.Map(document.getElementById('map'), {
  center:codeAddress(geocoder, '34 Bracknell Avenue, Markham, ON, Canada, L6C0R3'), zoom:8)
});

Google Maps Rendering Issues?

1 Answers1