Google Maps API (JavaScript): Maps not showing

Question

I'm obviously making a thing which is meant to show a Map.

Literally nothing happens - no Map, no Errors, no crash and burn.

Here is my code:

<div style="height:100%; width: 100%;">
    <div id="map-canvas"></div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>

<script>
    function initMap() {
        var mapCanvas = document.getElementById("map-canvas");
        var mapOptions = {
            center: new google.maps.LatLng(53.419824, -3.0509294),

            mapTypeId: 'satellite',
            scrollwheel: true
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
    }

</script>

I've tried changing the width/height of the parent div to PX's with no luck.

Any help is great

Cheers

For a better insight, view the full page code here: http://pastebin.com/XrRYgtjz

Answer 1

I would say you have two issues.

1. your map div doesn't have a size (you don't specify the size of the containing element for the anonymous div <div style="height:100%; width: 100%;"> ).

2. your MapOptions doesn't contain the required /manditory zoom property.

proof of concept fiddle

code snippet:

 function initMap() { var mapCanvas = document.getElementById("map-canvas"); var mapOptions = { center: new google.maps.LatLng(53.419824, -3.0509294), zoom: 5, mapTypeId: 'satellite', scrollwheel: true } var map = new google.maps.Map(mapCanvas, mapOptions); } 

 html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <div style="height:100%; width: 100%;"> <div id="map-canvas"></div> </div> <script deferred async src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 

Answer 2

<div style="height:100%; width: 100%;">

Maybe problem in height . Try change to 400px. Or

<div style="height:400px; width: 100%;">
    <div id="map-canvas" style="height:100%; width: 100%;></div>
</div>

EDIT

<div style="height:100%; width: 100%;">
    <div id="map-canvas"></div>
</div>

<script>
    function initMap() {
        var mapCanvas = document.getElementById("map-canvas");
        var mapOptions = {
            center: new google.maps.LatLng(53.419824, -3.0509294),
            mapTypeId: google.maps.MapTypeId.SATELLITE,
            scrollwheel: true
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
    }   
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDpgrLi55xM68AaSJOQPX5nzEOV7sw4KVY&callback=initMap"></script>

Answer 3

I think the problem is in how you've described the new map in your mapOptions variable. Try changing the syntax to something like this, passing mapCanvas as the first argument and the options as the second argument:

  var mapOptions = new google.maps.Map(mapCanvas, {
            center: {lat: 53.419824, lng: -3.0509294}, 
            mapTypeId: 'satellite',
            scrollwheel: true
    });

I hope this helps!