Menu
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.
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.
241
First, make sure that you're using the latest version of the Maps app. If you're not, you can update the app by going to the Google Play Store or the App Store. If that doesn't fix the problem, try restarting your computer. If that doesn't work, try reinstalling the Maps app.
Open Android settings → Application Manager → Google Play Store (or whichever store you used to download MAPS.ME, e.g. Samsung Apps) and do Force Stop, Clear Cache, Clear Data. Restart the device. Reinstall MAPS.ME.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
