Google map does not appear
Question
I'm following the introductory tutorial for Google Maps, but for some reason the map is not appearing on my webpage. The relevant HTML/CSS/JS is:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 400px; height: 400px"></div>
</body>
</html>
The map does not appear within the map_canvas div.
Update
I've changed the page so that it doesn't use JQuery to load the map. It now uses exactly the same JS as in the tutorial, but still the map does not appear.
6 answers
solution1
15 ACCPTED 2011-10-06 20:52:30
There are 3 problems with your code:
(1) add the following lines before <script type="text/javascript">function initialize() {
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
This is in the post of your answer, but it is not in your file http://www.iol.ie/~murtaghd/map/map.htm .
(2) You need to call initalize() (again: it is in your post, but not in the code):
<body onload="initialize();">
(3) Set the size of the canvas to get the map displayed (again: it is in your post, but not in the code). Afterwards you can change the size as you like.
<div id="map_canvas" style="width:500px; height:300px"></div>
You can see the site running on jsfiddle .
solution2
0 2014-09-02 06:18:01
You should not forget to used document type and load initialize() javascript function on the tag that you place your map and don't forgot set height: and width: to your stylesheet and I will work. if you did n't set height and width it will not show
<!DOCTYPE html>
<body onload="initialize();">
<div style="height:350px; width:100%;" id="map-canvas"></div>
</body>
solution3
0 2017-01-07 16:48:12
After countless digging and tons of posts (that were needlessly overly complicated), I found that if I just add the height and width styles INLINE , the map loaded. I could NOT set the height and width of the map element in the header or in an external style sheet -- the map will disappear. Everything else I pulled from the current (??) google maps api docs :
Simple as this:
<div id="mapWrapper" style="height:500px; width:500px;">
<div id="map" style="height:100%"></div>
</div> <!-- end of the mapWrapper -->
<script>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
solution4
0 2011-10-06 06:40:53
Your problem is you're referring to jQuery syntax, but you've not included the jQuery library in your page. I get the JS errors:
Error: l.google.maps.Load is not a function
Source File: http://www.iol.ie/~murtaghd/map/map_files/main.js
Line: 42
Error: $ is not defined
Source File: http://www.iol.ie/~murtaghd/map/map.htm
Line: 24
The second one is the killer here.
solution5
-1 2011-10-05 23:34:22
You MUST use initialize as the function, so change your code as follows:
$(function() {
To;
function initialize() {
<body>
To:
<body onload="initialize()" >
And: });
To: }
Which should result in:
<!DOCTYPE html>
<html>
<head>
// This causes the common header, footer, styles, JQuery, etc. to be included
<meta name="layout" content="main"/>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Use JQuery to trigger the loading of the Map
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()" >
<div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>
solution6
-2 2012-11-30 21:15:09
I had the same problem. This bit of code:
<div id="map_canvas" style="width:500px; height:300px"></div>
.. helped me - I added the style width/height into the markup and it worked.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.