Hi there!

I need a little help here.

I have purchased and deployed Civil Construction Page using TheGem theme.

So far I had no issues. I have implemented on www.natsolutions.com.br/sabatim as a development environment. Now, I have finished everything and I moved it to www.sabatim.com.br production environment. Everything went fine, except the black Google MAP near the footer.

It tries to load, I can see it appearing, but right after that it displays the following error:

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.

I tried to install Google API Key, but it did not work.

Any ideas how can I solve it please ?

Thank you,

Natan

Hi,

I have missed sharing the HTML source, sot his is my current HTML Code for this MAP:

<div id="map-canvas" style="width: 100%; height: 500px;"></div>
<script type='text/javascript' src='//maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&ver=4.2.8'></script>
<script type="text/javascript"> function initialize() {

    var mapOptions = {
        zoom: 14,
        center: {lat: -23.5027133, lng: -46.6345128},
        mapTypeControlOptions: {
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']},  
        disableDefaultUI: true,
        disableDoubleClickZoom: true,
        scrollwheel: false, // change
        draggable: true // change
    };

    var styles =[{"featureType":"all","elementType":"labels.text","stylers":[{"visibility":"on"}]},{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":"70"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"off"},{"color":"#000000"},{"lightness":"30"}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"on"},{"gamma":"0"},{"lightness":"-50"},{"saturation":"-90"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":"10"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21},{"visibility":"off"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":"40"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":"16"},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":"20"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#171717"},{"lightness":17}]}];

    var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

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

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style');
}
    
google.maps.event.addDomListener(window, 'load', initialize); </script>

Natan

Hi Gregor,

It worked fine! Now I get it. The isse was I should implement my key direcly in the HTML source.

Thank you very much for your support.

Best regards,

Natan