CODEWITHSUNDEEP
javascriptgoogle-mapsfirefox
Sammy Jaafar
Sammy Jaafar

Reputation: 523

Google Maps API - Map Not Showing in Firefox?

I am working on a website that uses Google Maps but I can't get the map to show on Firefox. I am using this basic code to initialize the map.

function initialize()
{
      var mapProperties = {
        center:new google.maps.LatLng(33.9000,35.5333),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };


      googleMap = new google.maps.Map(document.getElementById("mapDiv"),mapProperties);

      googleMap.addListener('click', function() 
      {
          if(infowindow!=null)
              infowindow.close();
      });
}

The function initialize is called when the page loads.

In the document head, I am including this script:

<script type='text/javascript' src='http://maps.googleapis.com/maps/api/js'></script>

The map works fine in google chrome and internet explorer, but is invisible in firefox. In firefox, the div containing the map ("mapDiv") seems to be initialized with the map content when I inspect the html, but the div is transparent and the map doesn't show.

I have tried clearing the cache and starting firefox without plugins in safe mode but the issue remains. I appreciate any help in advance. Thank you

Upvotes: 0

Views: 5565

Answers (3)

Avery Freeman
Avery Freeman

Reputation: 1243

I was having this problem, map was only appearing in Chrome. I added to src= the tag &amp;sensor=true -- example:

src="http://maps.googleapis.com/maps/api/staticmap?center=Tombouctou,Mali&amp;zoom=12&amp;size=350x350&amp;sensor=true"

Now it appears in both Chrome and Firefox.

Upvotes: -1

rajeev
rajeev

Reputation: 1

Also check if firefox browser privacy tracking is unchecked. This feature in firefox 42 onwards prevents display of maps which otherwise display in chrome and IE. I dont know why map display code should affect tracking in firefox. What worked for me in firefox 48.0 was to disbale tracking. Go to menu - options which opens about:preferences page. In Privacy uncheck tracking. These mindless browser updates developer do not apply their mind.

Upvotes: 0

Sammy Jaafar
Sammy Jaafar

Reputation: 523

Thanks to all who replied. The issue has been solved. The problem was that I had my map div inside a table cell but the table cell did not have a height set. After setting a height of 100% to the the table cell, the map shows properly.

Upvotes: 0

Related Questions