CODEWITHSUNDEEP
htmlcssgoogle-maps-api-3
cspgsl
cspgsl

Reputation: 1

Gray grid on google map

I have created a map which you can see here http://summitaccounting.ca/about-us

I have created the API key twice with the same result

I have pinpointed the property. However, I cannot get rid of the gray grid over the top of the map. Here is the code I am using.

Any help would be appreciated.

<html>
  <head>
    <style>
       #map {
        height: 400px;
        width: 100%;
       }
    </style>
  </head>
  <body>
      <div id="map"></div>
    <script>
      function initMap() {
        var uluru = {lat: 52.115, lng: -114.894};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 14,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_fWUOsy0ygeKqSbdfiaK7_WKCrXCkDgc&callback=initMap">
    </script>
  </body>
</html>

Upvotes: 0

Views: 99

Answers (1)

andi
andi

Reputation: 6522

In your template.css file, you have this style declaration:

a img,fieldset,img{
    border:none;
    padding:5px 10px !important;
}

It's that padding that is messing with your google maps. You're going to need to rework some of this, or try to override it with even more !important styles for the google maps. ugh.

Upvotes: 1

Related Questions