Google map not showing on pageload

[thomas-expliciet]

Hello there,

I configured Smoothstate with Wordpress succesfully. However, when I load a page with a contactform directly from the url, the map shows normal. But when I enter that page trough ajax with an internal link, the map-box is empty and my console states the following: util.js:228 Google Maps API warning: NoApiKeys

You can see the page here: http://web.expliciet.be/expl-theme/contact/

This is the code, I'm using for my google map:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?"></script> <!-- Vergeet geen API-sleutel aan te maken! (js?key=) -->

<script>

    google.maps.event.addDomListener(window, 'load', init);

    function init() {
            var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
            var isDraggable = w > 1024 ? true : false;

            var mapOptions = {

              zoom: <?php the_field('map_zoom', 'option'); ?>,
              scrollwheel: false,
              draggable: isDraggable,
              center: new google.maps.LatLng(<?php the_field('map_lat', 'option'); ?>, <?php the_field('map_long', 'option'); ?>),

              // Tussen de twee rechte haakjes kan je de mapstijl aanpassen
              // Nieuwe stijlen vind je op snazzymaps.com
              styles:  [
                {"featureType":"landscape","elementType":"labels","stylers":[{"visibility":"off"}]},
                {"featureType":"landscape","elementType":"all","stylers":[{"color":"#e9e9e9"}]},
                {"featureType":"transit","elementType":"labels","stylers":[{"visibility":"off"}]},
                {"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},
                {"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]},
                {"featureType":"road","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"stylers":[{"hue":"#000"},{"saturation":-100},{"lightness":10}]},
                {"featureType":"road","elementType":"labels.text.fill","stylers":[{"visibility":"on"},{"lightness":24}]},
                {"featureType":"road","elementType":"geometry","stylers":[{"lightness":10}]}
              ]

            };

            var mapElement = document.getElementById('googlemap');
            var map = new google.maps.Map(mapElement, mapOptions);

        marker = new google.maps.Marker({
              map:map,
              clickable: false,
              position: new google.maps.LatLng(<?php the_field('map_lat', 'option'); ?>, <?php the_field('map_long', 'option'); ?>),
              icon: '<?php the_field('mapicon', 'option'); ?>'
        });
    }

</script>

Anyone who has had this issue as well?

Thanks,

Thomas

[shrpne]

Check the FAQ and similar issues #249, #322, #339

[thomas-expliciet]

Hi there, thanks for the referals but I already looked in to these and tried to apply the information but with no luck so far. I'm not a specialist in js or jQuery so I find it quite difficult to play with this code. I understand the options but somehow it doesn't work with my code.