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});
});
Related
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.
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.
I'm have a conflict with Google Maps v3 API and Mootools. For some reason when the page where the maps is on is loaded it looks fine but about 10 seconds later the map disappears as well as all but 1 pin point.
You can see it here: http://goo.gl/Sr0b2
If I remove mootools.js which loads in my footer, the problem goes away but then some of the javascript on my WordPress theme doesn't work such as the drop down menu in the header so removing mootools is not an option.
Anyone know what may be causing the conflict and how I can fix it?
Any help is appreciated.
I solved the problem by using an iframe for the map, this way the mootools.js on the page doesn't affect the map script. I usually don't use iframes but in this situation it doesn't affect the site's SEO or anything else and it's a perfect solution. So if you have this same issue you can load the map on a page of its own (with nothing but the map) and then insert it anywhere with
First off this is my - Test Site
This is my testing playground for Google maps, I am not concerning myself with aesthetics. What I am having trouble with is getting some jQuery to fire when I click on a link inside of the info window. If you are familiar with Google Maps this is where I create my infowindow:
GEvent.addListener(marker,"click", function() {
map.openInfoWindow(point,'<div class="infoWindow">'+windowText+'\
'+<a href='#' class='showme' onclick='return false;'>Show Comments</a>+'\
</div>');
/*On click, show all the comments*/
$('.showme').live('click', function(){
//alert('hey');
$('.comment').toggle('slow');
});
});
To understand how it works, it might be easier just to view the source on the page. Originally I had instead of using a "live event" been doing a normal "on click" which did not work. I was assuming because the info window was its own environment apart from the main window.
This was wrong I believe when I tried the "live event" and it began to work in Chrome and FF. So now I am trying to understand why the click event doesn't work in any browser, and why the live event would work in everything but IE.
Does anyone have any input?
Thanks,
Levi
Edit:Sorry, if it wasn't clear the "show comments" link in the info window is where my trouble lies.
It seems there are some issues with using jquery's live() functionality with IE. There was a recommendation here to try bind instead. I've read in some other places that using a different mouse event can work as well, such as mouseup or mousedown. It definitely seems like an IE bug, though.
The livequery plugin seems to work in info windows with IE.
$('.showme').livequery(function(){
$(this).click(function(){
$('.comment').toggle('slow');
});
});
Changing the live('click',...) to live('mouseup', ...) fixed it in my case.
You can replicate the bug here: http://www.trailbehind.com/node/1148091
For some reason, the following event will fire only if the user's cursor is over a marker, but I have seen it work properly elsewhere, and I'm not sure what's messing things up on my site:
GEvent.addListener(map, 'singlerightclick', function(latLng, src, overlay) {
console.log(1);
}
Thanks for any help you can give.
Your code looks right, and when I visit the URL you give (I've tried only with Google Chrome) and right-click at any spot, a marker appears with relevant information. What misbehavior am I supposed to observe (or fail to observe) and on what browser?
Seems to be a bug in firefox on Mac.
See details here -
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1545
I hope there is a solution soon.