Google maps dot display
30 views
Skip to first unread message
suea...@caramail.com
Jul 18, 2016, 7:47:08 PM7/18/16
to Google Maps JavaScript API v3
Hi I just tried out google maps on my website
http://www.frenchhouse.website/gmap.html
But it wont work.
This is the simple map sample with my api.
<html>
<head>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAwRsfs4UeGT5iBr7yvffQ3SAcO6tLuBjk&callback=initMap">
</script>
</body>
</html>
Any help welcome thanks
http://www.frenchhouse.website/gmap.html
But it wont work.
This is the simple map sample with my api.
<html>
<head>
<style>
#map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key= AIzaSyAwRsfs4UeGT5iBr7yvffQ3SAcO6tLuBjk&callback=initMap">
</script>
</body>
</html>
Any help welcome thanks
Michael Geary
Jul 18, 2016, 8:05:23 PM7/18/16
to google-map...@googlegroups.com
The HTML and JavaScript on your test site is very different from the code you listed. The script tags are in a different order, and there are spaces in the Maps API script URL.
If you use the actual code you listed in your message it should work.
But more important than that is to learn how to debug JavaScript code so it won't be a mystery.
Open the JavaScript console and look at the errors it shows. If you're not familiar with the browser developer tools, it's time to learn them. For Chrome, start here. Every browser has similar tools.
-Mike
--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-maps-js-a...@googlegroups.com.
To post to this group, send email to google-map...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-maps-js-api-v3.
For more options, visit https://groups.google.com/d/optout.
Michael Geary
Jul 18, 2016, 8:07:40 PM7/18/16
to google-map...@googlegroups.com
Also, the version on your test page uses initMap in one place and init_map in another. Anyway, get familiar with the developer tools and you will be able to track these things down on your own. Happy hacking!
Michael Geary
Jul 18, 2016, 8:14:03 PM7/18/16
to google-map...@googlegroups.com
Sorry for the multiple messages! One last thing... The code on your test page has both an initMap reference in the Maps API script tag and an event listener for the 'load' event that references init_map.
If you're loading the Maps API asynchronously you should use only a function reference in the Maps API script tag.
But why do you need to use the asynchronous loading at all? There's no benefit to it the way you're using it. You could just load the Maps API synchronously and make things a little simpler.
Reply all
Reply to author
Forward
0 new messages