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

No, but in the new and "improved", bulked and overly big URLs for the Maps API is the callback function (see at end) which is whats meant to trigger it. Just tried manually calling it then and still no luck — user794095
– user794095, Commented Sep 30, 2016 at 0:33

geocodezip · Accepted Answer · 2016-09-30 02:16:28Z

2

I would say you have two issues.

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%;">).
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>

answered Sep 30, 2016 at 2:16

geocodezip

162k14 gold badges228 silver badges256 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user794095 Over a year ago

Still no! I've literally copied that word for word and despite it working inside the jsFiddle, it still doesn't on the website

geocodezip Over a year ago

Check your HTML/CSS - Does the map div have a size? If it is a percentage size, are there percentages defined all the way up to a fixed size or the HTML element? You are using bootstrap, so this is likely the issue. If setting a fixed size for the map div makes it display, then this is definitely the issue. If that doesn't help, please provide a minimal reproducible example that demonstrates the issue (the posted code is not complete and your pastebin is not minimal).

user794095 Over a year ago

you are the king. Yes that was the problem. Thank you!!

Elizabeth Fine · Accepted Answer · 2016-09-30 01:10:53Z

0

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!

answered Sep 30, 2016 at 1:10

Elizabeth Fine

1501 silver badge8 bronze badges

1 Comment

user794095 Over a year ago

I wish it did! Thanks anyway :(

DenysM · Accepted Answer · 2016-09-30 01:19:25Z

0

<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>

edited Sep 30, 2016 at 1:19

answered Sep 30, 2016 at 0:50

DenysM

3891 gold badge3 silver badges13 bronze badges

8 Comments

user794095 Over a year ago

Just a big empty white space now

user794095 Over a year ago

Thats the weirdest thing, there is none. Only time I get an error is calling the function straight away, in which it says google isn't defined. If I try manually calling it after its loaded, the function runs but nothing else works.

DenysM Over a year ago

try mapTypeId: google.maps.MapTypeId.SATELLITE instead mapTypeId: 'satellite'

DenysM Over a year ago

@FBMG_, I edited my answer. Also I removed <script src="maps.googleapis.com/maps/api/…> to the last line.

user794095 Over a year ago

I've copied the HTML to pastebin for people to have a better insight - view here: pastebin.com/XrRYgtjz

|

Collectives™ on Stack Overflow

Google Maps API (JavaScript): Maps not showing

3 Answers 3

3 Comments

1 Comment

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related