JochenJung JochenJung - 17 days ago 6
Javascript Question

Google Map shows only partially

The Google Map I have is only beeing rendered partially and is centered to the wrong point (it should center to the marker). See below:

alt text

Now to add a little more detail:


  • It works fine in IE

  • It looks like in the screenshot in FF and Chrome.

  • In Chrome ist works as soon, as I open the developer console



Especially the last point is the one I'm wondering most about. I guess opening the developer console re-executes some JavaScript.

So: Can I call a function to re-execute JavaScript, the way the developer console does?

This is the code:

<script type="text/javascript">
{literal}
function initialize() {
if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById("map")); //, { size : {width:600,height:600} }
map.addControl(new GLargeMapControl3D());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.setCenter(new GLatLng(51.17689812200107, 9.84375), 5);
map.checkResize();

var geocoder = new GClientGeocoder();

function showPoint(lat, lon) {
if (lat != "" && lon != "") {
var point = new GLatLng(lat, lon);
map.setCenter(point, 10);
var marker = new GMarker(point, {draggable: true});
GEvent.addListener(marker, "dragstart", function() {
// map.closeInfoWindow();
});
GEvent.addListener(marker, "dragend", function() {
var newPoint = marker.getLatLng();
$('#lat').val(newPoint.lat());
$('#lon').val(newPoint.lng());
// marker.openInfoWindowHtml("Neue Koordinaten Lat: "+ newPoint.lat() +" Lon: "+ newPoint.lng());
});
map.addOverlay(marker);
}
}
{/literal}showPoint("{$gmap_lat}", "{$gmap_lon}");{literal}
}
}
{/literal}


This is where I put the div:

<fieldset style="-moz-border-radius: 1em; -webkit-border-radius: 1em;">
<legend>Karte</legend>
<div id="map" title="Lage von '{$name}'"><br>Die Karte wird geladen...<br><br>Hinweis: Damit dies funktioniert müssen Sie in Ihrem Browser JavaScript aktivieren</div>
Falls sich der Marker nicht auf der richtigen Position befinden sollte, bewegen Sie diesen mit Ihrer Maus auf die richtige Position.
<br>Länge: <input type="text" id="lat" name="lat" value="{$gmap_lat}">
Breite: <input type="text" id="lon" name="lon" value="{$gmap_lon}">
</fieldset>


And on the div the following CSS rules apply:

alt text

Answer

Found the issue. I was hiding the block, GMaps was in

<div id="step2" style="display:none">

But it seems a block containing the map may not be hidden, when GMaps loads.

So I changed it like this

<div id="step2">

and everything worked. But as I just like to show "step1" in the beginning, I do a

$('#step2').hide();

once the map is loaded.

It's realy strange behaviour of Chrome and FF, but I'm glad it works with this workaround. Thanks for your help.

Comments