Trouble implementing google maps APIs

JavaScript
1

Hi,

I was following
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_google_map_4

to include Google map in my website. In the last line of the code

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

I was required to get an API key from a website https://console.developers.google.com/apis/credentials?project=composed-night-175811

I got an API and did put it in place of key=YOUR_KEY

Still the Google maps do not appear on the website. I am posting my code for efficient debugging

My code is as follows: -

<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:200px;height:200px"> My Map will go here </div>
<script>
function myMap() {
	var mapOptions = { /*sets the properties of the map*/
		center = new google.maps.LatLng(51.5, -0.12), /*where to center the map*/
		zoom:10, /* specifies the zoom level for the map*/
		mapTypeId: google.maps.MapTypeId.HYBRID /* refers to the type of the map that can be constructed. The other options include ROADMAP, SATELLITE, HYBRID and TERRAIN*/
	}
	var map = new google.maps.MAP(document.getElementByID("map"), mapOptions); /*installs the actual map here*/
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDQgysGQwxMfDvpcI6YapdoAkL0BrLUTps&callback=myMap"></script> 
</body>

</html>

AIzaSyDQgysGQwxMfDvpcI6YapdoAkL0BrLUTps was the API key I got.

2

I redid my map a couple of months ago and I have the script in the header and the body is body onload=“load()”

Might or might not make a difference.

I also do not have a &callback=myMap I wonder what version of code w3schools is using; I would check the code out on an official google map api site: https://developers.google.com/maps/documentation/javascript/

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.