Google Maps API - Map Not Showing in Firefox? - javascript

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

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.

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.

I was having this problem, map was only appearing in Chrome. I added to src= the tag &sensor=true -- example:
src="http://maps.googleapis.com/maps/api/staticmap?center=Tombouctou,Mali&zoom=12&size=350x350&sensor=true"
Now it appears in both Chrome and Firefox.

Related

Google map loads only if I resize the browser window

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´m a beginner...
Can anyone give me a hint why the map is acting like that?
All javascript-files that are needed are implemented.
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");
}

How to check if Google Maps JavaScript API is supported?

Google Maps JavaScript API is no longer supported in IE9. When I open my map in IE9 it shows a map without markers and a popup informing about support.
I don't need a map without markers. How can I disable it (at least - display: none) for such browsers?
There was GBrowserIsCompatible(), but it has been removed from v3...
Just a workaround:
Check via querySelector if the map contains the bar with the message:
google.maps.event.addListenerOnce(map,'idle',function(){
if(this.getDiv().querySelector('.infomsg a[href="https://whatbrowser.org"]')){
this.getDiv().parentNode.removeChild(this.getDiv());
}
});
I removed the info message, just by using the single CSS line.
.infomsg {display:none;}

Adsense Google MAP API not showing up the MAP

I am following this link to create Adsense on GMAP https://developers.google.com/maps/documentation/javascript/examples/ads-adunit
But when i implemented it on my website only ads and some part of MAP only highlighted, I also tried to debug the view from the firebug tool but not found any hidden property or error. The same code i have implemented.
pastebin.com/AbEEExSa
Since it shows grey color in the map-canvas, it seems to be a refresh problem. This can be solved by triggering the resize of the Google maps.
google.maps.event.trigger(map, "resize");
Try adding this line after the completion of adunit API(success callback of this API).
FYI:
resize : Developers should trigger this event on the map when the
div changes size: google.maps.event.trigger(map, 'resize').
Updates:
I tried using the code that you have pasted in codebin, removing the php and parts that you have commented. It is working. I'm not sure what your php code does. So try debugging like in the fiddle.

Web page scrolling is disabled after google maps api

I have a one page site I am working on for my small company. I have added a google maps div to contact tab. Everything seems normal but when I try to scroll the page down to see whatever below, it does not work/scroll. Below is a link for my website (Please try on mozilla or ie to see what I actually mean.):
www.hidroturbin.com/htonepage
I tried the "disable scrollwheel option" in the map options of js code:
scrollwheel: false
This time scrolling was disabled for both the gmaps and the page.
I could not find a way. I am searching for almost 2 days and about to go nuts.
Anyone here to help?
you have overflow: hidden; on your body, just remove it from your css file htonepage.css
can you try to modify the code and IMO this will work
google.maps.event.addListener(map, 'click', function(event){
this.setOptions({scrollwheel:true});
});

Google map setting marker using html and javascript

I have started working on Google maps recently.What I have done till now is to get current location(position) on Google map.It works fine and displays the current position successfully.
But when I place the "!DOCTYPE html" tag in the very first line of my html code, the map is not displayed.
Also, I replaced the "%" in div tags "style" attribute with the "px" (pixels) when I used the "!DOCTYPE html" tag in my document, but it didn't worked.
I am using both Google Chrome (version 21.0.1180.41) and Firefox (version 14.0b12) web browsers to display the map, but it doesn't work for any of them.
What may be the possible reasons? Please answer.
Thanks!

Categories

Resources