Google map loads only if I resize the browser window

Question

I´m working on a google maps implementation and it works fine so far. To try things and play around with it I made an extra file for that.

Here you can checkout the map: Google maps file

I have everything ready in that file and I want to implement that to my website. I took the code and copied it to my "main-file".

Now, the google-map won´t load in the first place, only if I resize the browser or write something in the text field.

The browser doesn´t give me any errors back.

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&callback=initMap&language=de">

This Code-Sample is on the end of my <body> -tag. I know that google-map needs to load async, but I´m not realy sure what it is, because - I´ma beginner...

Can anyone give me a hint why the map is acting like that?

All javascript-files that are needed are implemented.

Answer 1

Google maps seem to be showing without resizing the window though.

If it's not showing, try adding "resize" event trigger on map load. It is the same event for window resizing.

function initMap() {
    var map = new google.maps.Map(document.getElementById('newjobmap'), options);
    google.maps.event.trigger(map, "resize");
}

Google map loads only if I resize the browser window

Question

1 answers

solution1
0 2018-02-06 14:35:01

Google map loads only if I resize the browser window

Question

1 answers

solution1 0 2018-02-06 14:35:01

solution1
0 2018-02-06 14:35:01