asked on

Seeking additional assistance with Google Maps JavaScript API integration

I had someone here help me with Google Maps API integration earlier this week, .. but now that I've gotten over the initial hump of enabling the API, .. it appears that I'm now stuck again, and I'm hoping that someone here can help me.

I currently have all of these different APIs enabled (which I understand all need to be enabled to ensure proper functionality):

1) Google Maps Javascript API
2) Google Places API
3) Geocoding API
4) Geolocaton API

Additionally, I have my API key configured to be "unrestricted" and have verified that I am able to interface with the API from within an HTML page that's running on my local machine. I created an HTML file that contains a simple example using code that I copied and pasted from the API documentation. That example is below (from which my API key has obviously been removed):

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Open in new window

This example works perfectly when I run it on my local machine, and it restored my confidence that I'd succeeded at properly enabling the API.

However, .. a kind fella here on Experts Exchange gave me this other example to try (which specifies addresses instead latitude and Longitude) .. and when I try to run it, it fails with an error message of "TypeError: google.maps is undefined". That code example is below:

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>  
  
    <h3>My Google Maps Demo</h3>	

    <div id="myMap"></div>	
	
	<script>
	googleMaps = {
		mapLoad: function (address, mapDiv) {
			var mapOptions = {
				zoom: 18,
				mapTypeId: google.maps.MapTypeId.HYBRID,
				disableDefaultUI: true,
				gestureHandling: 'none',
				zoomControl: false
			};
			geocoder = new google.maps.Geocoder();
			geocoder.geocode({ 'address': address }, function (results, status) {
				if (status == 'OK') {
					console.log(results);
					map = new google.maps.Map(document.getElementById(mapDiv.id),mapOptions);
					map.setCenter(results[0].geometry.location);
					var marker = new google.maps.Marker({
						map: map,
						position: results[0].geometry.location
					});
				} else {
					alert('Unable to connect to Google Maps');
				}
			});
		}
	}
	googleMaps.mapLoad("555 Pennsylvania Avenue NW Washington, DC 20500","myMap");
	</script>
	
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

  </body>
</html>

Open in new window

What is it that I'm doing wrong here? And what do I need to do to get this to work properly?

Thanks,
- Yvan

leakim971

just be sure your browser run the code AFTER Google Map API was loaded BEFORE being able to use it
In your initial code, a function enclose the code to run and this function name is set as callback in the API url script. So once the Google API is loaded, the "API" run the callback function.
Just add in the URL : &callback=initMap
And be sure to create that function :

<!DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>  
  
    <h3>My Google Maps Demo</h3>	

    <div id="myMap"></div>	
	
	<script>
function initMap = function() {
	googleMaps = {
		mapLoad: function (address, mapDiv) {
			var mapOptions = {
				zoom: 18,
				mapTypeId: google.maps.MapTypeId.HYBRID,
				disableDefaultUI: true,
				gestureHandling: 'none',
				zoomControl: false
			};
			geocoder = new google.maps.Geocoder();
			geocoder.geocode({ 'address': address }, function (results, status) {
				if (status == 'OK') {
					console.log(results);
					map = new google.maps.Map(document.getElementById(mapDiv.id),mapOptions);
					map.setCenter(results[0].geometry.location);
					var marker = new google.maps.Marker({
						map: map,
						position: results[0].geometry.location
					});
				} else {
					alert('Unable to connect to Google Maps');
				}
			});
		}
	}
	googleMaps.mapLoad("555 Pennsylvania Avenue NW Washington, DC 20500","myMap");
}
	</script>
	
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

  </body>
</html>

Open in new window

egoselfaxis

ASKER

I'm getting an error when I try to run the updates code snippet you've provided:

SyntaxError: missing ( before formal parameters

I've been trying to troubleshoot it, but I can't seem to figure it out. Please advise.

Thanks,
- Yvan

leakim971

replace :
function initMap = function() {
by :
var initMap = function() {

egoselfaxis

ASKER

I did as you suggested and now I'm getting this new error message .. for the line you asked me to change.

TypeError: a is null

leakim971

could you post YOUR full code?
thanks

egoselfaxis

ASKER

The only thing that I changed/removed was my API key .. but the KEY is valid, and API access is unrestricted.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
    <style>
      #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>  
  
    <div id="myMap"></div>	
	
	<script>	
	var initMap = function() {
		googleMaps = {
			mapLoad: function (address, mapDiv) {
				var mapOptions = {
					zoom: 18,
					mapTypeId: google.maps.MapTypeId.HYBRID,
					disableDefaultUI: true,
					gestureHandling: 'none',
					zoomControl: false
				};
				geocoder = new google.maps.Geocoder();
				geocoder.geocode({ 'address': address }, function (results, status) {
					if (status == 'OK') {
						console.log(results);
						map = new google.maps.Map(document.getElementById(mapDiv.id),mapOptions);
						map.setCenter(results[0].geometry.location);
						var marker = new google.maps.Marker({
							map: map,
							position: results[0].geometry.location
						});
					} else {
						alert('Unable to connect to Google Maps');
					}
				});
			}
		}
		googleMaps.mapLoad("555 Pennsylvania Avenue NW Washington, DC 20500","myMap");
	}	
	
	</script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

  </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

egoselfaxis

ASKER

That worked -- thank you so much!

What I don't understand, however, is why I'm not able to plot multiple different locations on the map:

    var initMap = function() {
        googleMaps.mapLoad("555 Pennsylvania Avenue NW Washington, DC 20500", document.getElementById("myMap"));
        googleMaps.mapLoad("666 Pennsylvania Avenue NW Washington, DC 20500", document.getElementById("myMap"));
    }

Open in new window

Why isn't this working? Any idea?

- Yvan

leakim971

mapLoad recreate the map, reverse geolocate the address

egoselfaxis

ASKER

I'm not following you. Could you please explain what you mean?

leakim971

everytime you use/call the function mapLoad, this function recreate/replace the map inside the <div id="myMap"></div> and it run the code geolocating the address your submit
As you recreate/replace the map, it remove the previous one

egoselfaxis

ASKER

I see. Then do I need to completely scrap this code example and approach this in an entirely different way? Or can I just "append" additional addresses / locations to the existing map somehow?

I'd be happy to award you the points for your correct answer and to post a different question inquiring about this if you'd prefer.

- Yvan

leakim971

yes, you should create a new question to help someone searching a similar question
this is the main purpose of this site
thanks

egoselfaxis

ASKER

Thanks leakim971!

Here is a link to the other question that I've posted:

https://www.experts-exchange.com/questions/29130649/Need-help-revising-Google-Maps-Geocoding-JavaScript-example-so-that-it-displays-multiple-different-addresses-locations-on-the-map.html

- Yvan