Map is loaded incorrectly especially in IE8
Tobias Krais
I have an issue with google maps api 3 that drives me nuts. Hopefully
you can help me. Please have a look at the following page:
http://www.immobiliengaiser.de/immobilien/tempimmobilien/grenzach/sch...
and then click on the tab "Karte". Now you will see my problem. How
can I solve this?
Here is my code:
-----%<-----
<script type="text/javascript" src="http://maps.google.com/maps/api/
js?
sensor=false"></script>
<div id="map_canvas" style="display: block; width: 100%; height:
500px"></div>
<script type="text/javascript">
var myLatlng;
var map;
var geocoder = new google.maps.Geocoder();
var address = '<?php print $strasse ." ". $hausnummer .", ".
$plz ."
". $ort; ?>';
if (geocoder) {
geocoder.geocode( { 'address': address},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position:
results[0].geometry.location,
map: map
});
var infowindow = new
google.maps.InfoWindow({
content: "<p
class='mapsinfowindow'><?php print '<small>'.
$objekttitel .'<br />'. $strasse .' '. $hausnummer .'<br /> '. $plz .'
'. $ort .'</small>'; ?></p>",
position:
results[0].geometry.location
});
infowindow.open(map, marker);
} else {
alert("Geocode was not successful for
the following reason: " +
status);
}
});
}
var myOptions = {
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new
google.maps.Map(document.getElementById("map_canvas"),
myOptions);
</script>
-----%<-----
Greetings, Tobias
William
initialization of the map and geocoding? Otherwise the map might be
loaded before the page is ready. If you can't use the <body onload>
event, then perhaps jQuery onReady for the document?
Tobias Krais
I don't know what you mean exactly. Do you mean that I implement the
initialize() function in the <head> with the code i use. And then I call
it in the body onload(). Correctly?
Meanwhile I detected some other behaviour. If I reload the map, then it
works (sometimes I have to reload it twice). The issue seems to be the
maps not centered in hidden div issue.
Has anybody found a solution for this?
How can I tell the map the width manually (the height is calculated
correctly) so that it is centered correctly?
Greetings, Tobias
William
> you can help me. Please have a look at the following page:
> http://www.immobiliengaiser.de/immobilien/tempimmobilien/grenzach/sch...
and I tried the link from the V2 forum but it says "Kein Startartikel
selektiert / No starting Article selected"
http://www.immobiliengaiser.de/immobilien/tempimmobilien/grenzach/schoene-3-zimmer-wohnung-og-in-grenzach-whylen/angebot-52-0-15
...
Tobias Krais
>> you can help me. Please have a look at the following page:
>> http://www.immobiliengaiser.de/immobilien/tempimmobilien/grenzach/sch...
>
> could you post the link again, it's not working for me ...
sorry. I moved the page. Its now here:
http://www.immobiliengaiser.de/immobilien/immobilienangebote/grenzach/schoene-3-zimmer-wohnung-og-in-grenzach-whylen/angebot-12-0-15
Greetings,
Tobias
William
following error in IE8:
"Unspecified error, main.js, Line 26, Char 70".
This error occurs before I press the "Karte" tab. The map itself
looks OK.
I think the error is due to the tab system and the size of the hidden
map. I did some testing and the error didn't happen after changing
the width of the #karte <div> to 100%, and commenting out this line: //
$('#exposedetail').tabs();
Tobias Krais
> "Unspecified error, main.js, Line 26, Char 70".
I get a "Unspecified error, main.js, Line 1, Char 386". It seems to be
the method returning the width.
> I think the error is due to the tab system and the size of the hidden
> map. I did some testing and the error didn't happen after changing
> the width of the #karte <div> to 100%, and commenting out this line: //
> $('#exposedetail').tabs();
I agree. But uncommenting the JavaScript line will disable the tabs. Do
you think the easiest way would be to work without the tabs?
Thanks for your testing!
Greetings,
Tobias
William
> I agree. But uncommenting the JavaScript line will disable the tabs. Do
> you think the easiest way would be to work without the tabs?
the tabs. I'll do some more testing and see what needs changing.
dfd
callbacks, where one could set the width and height of the map...
(see documentation @ http://stilbuero.de/jquery/tabs/)
Frank
William
> The used jquery tabs plugin from stilbüro can use onClick and onShow
> callbacks, where one could set the width and height of the map...
> (see documentation @http://stilbuero.de/jquery/tabs/)
>
> Frank
and here's a simplified version of the original tabs with map:
http://www.william-map.com/20100717/1/simple.htm
...
William
> Its now here:http://www.immobiliengaiser.de/immobilien/immobilienangebote/grenzach...
by the way I noticed another html problem which is unrelated to the
maps issue, there's two overview divs named "uebersicht"
<div id="uebersicht" style="width: 100%">
<div id="uebersicht">
...
Tobias Krais
> <div id="uebersicht" style="width: 100%">
> <div id="uebersicht">
thanks for the hint. I implemented it twice, because it's in different
files. Thanks again,
Tobias
William
address javascript in a function and put that inline inside the #karte
div. The function is available in the global namespace and can be
called from the <head> of the document like this:
http://www.william-map.com/20100717/1/address.htm
Also you could declare a global variable called map in the <head> of
the document and reference that "map" instead of declaring it
locally. If that's not possible then you can save a reference to the
map against a DOM element, like the #karte div, something like this:
document.getElementById("karte").map_ = map;
and then elsewhere on the site in another javascript you can access
the map by retrieving the DOM object. There is no global registry of
map objects available from the API.
Tobias Krais
> http://www.william-map.com/20100717/1/address.htm
this is a dream! It took me hours to find a solution and you're doing it
in minutes! Thanks a lot for your work. I will finish it and upload it
very soon.
Thank you very, very much! I really appreciate your help!
Greetings,
Tobias