Google maps v3 api Map doesnt fully load
Question
I am building an app that will have maps showing nearby eateries.
Map shows up, but takes a very long time to load, and never actually fully loads.
I am on a deadline with this, and I've tried a variety of solutions with no luck.
Someone please help!!!
See code below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Food & Drink</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<body>
<div id="map" style="width: 360px; height: 300px;"></div>
<script type="text/javascript">
var locations = [
['Little Shebas', 39.833691, -84.892375, 1],
['Roscoes Coffee Bar & Tap Room', 39.833891, -84.892130, 2],
['Ullerys Homemade Icecream', 39.834401, -84.889190, 3],
['Firehouse BBQ and Blues', 39.833630, -84.891887, 4],
['Tin Lizzie Cafe', 39.829140, -84.890857, 6]
['Joes Pizza', 39.834409, -84.889822, 5],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 25,
center: new google.maps.LatLng(39.830184, -84.893401),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
2 answers
solution1
1 2015-01-16 19:55:20
I cannot confirm the behavior you described. Everything seems to be working fine and your code looks like it should work.
Check out this working example of your code. I played around with the inital zoom level and adjusted the center. The center you had specified wasn't really near the markers and the zoom level was so high at first I thought the map wasn't loading.
var center = new google.maps.LatLng(39.833691, -84.892375);
google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
solution2
1 2015-01-16 20:01:07
I believe the problem in your array. Looking at the code in chrome dev tools it shows the locations array to contain 5 elements (not 6) the fifth of which is undefined . You're missing a comma after the 5th element and have a trailing comma after the last. Trying to access properties on that undefined element is throwing the javascript exception that's halting execution on the page. Also, at the initial zoom you have set nothing is visible. Zooming out reveals the map with your markers. Set your initial zoom in your map options to 14.
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.