Google maps div popup laat halve map zien.

[EricBruggema]

beste allemaal,

Voor een site van mij wil ik het volgende invoeren. Een optie om middels google maps de positie te kunnen doorgeven. Nu heb ik hier wat voor gemaakt alleen de popup laat maar een halve kaart zien..

Voorbeeld


De gebruikte CSS code

Cascading Stylesheet:

#gmapsPopup {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 500px;
    height: 330px;
    background: #fff;
    border: 2px solid gray;
}

#gmapsPopup form {
    margin: 0;
    padding: 0;
}

.map {
    display: block;
}

de gebruikte HTML code:

HTML:

<div id="gmapsPopup">
    <form method="get" action="/test.html" onsubmit="return confirm('is dit goed?');">
        <div id="mapSrc" style="width: 500px; height: 300px;"></div>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=mijnkeyhebjetochnietsaan" type="text/javascript"></script>
        &nbsp;Zoek <input type="text" id="address" style="width: 150px;" value="" /> 
        <input type="button" onclick="search();" name="zoek_form" value="Zoeken" /> 
        <input type="button" onclick="alert('return');" value="Gebruiken" /> 
        <input type="button" name="" onclick="gmapClose();" value="Sluit scherm" />
    </form>
</div>

en natuurlijk het stukje javascript, al denk ik niet dat daar een probleem in zit.

JavaScript:

//<![CDATA[
var marker = null;
var geocoder = null;

// window.onunload = GUnload;

var map = new GMap2(document.getElementById("mapSrc"));
map.setCenter(new GLatLng(52, 5), 10);
map.addControl(new GSmallMapControl());
geocoder = new GClientGeocoder();

function addPointer(overlay, point)
{
    clicked(overlay, point)
    if (!point) return;

    if (marker)
    { // Remove privious marker
         map.removeOverlay(marker);
    }

    // Create new marker
    var center = new GLatLng(point.y, point.x);
    marker = new GMarker(center, {draggable: true});
    map.addOverlay(marker);
}

GEvent.addListener(map, 'click', addPointer);
GEvent.addListener(map, "click", getAddress);

function clicked(overlay, latlng)
{
    if (latlng)
    {
        geocoder.getLocations(latlng, function(addresses)
        {
            if(addresses.Status.code != 200)
            {
                alert("reverse geocoder failed to find an address for " + latlng.toUrlValue());
            }
            else
            {
                address = addresses.Placemark[0];
                var myHtml = address.address;
                map.openInfoWindow(latlng, myHtml);
            }
        }
        );
    }
}

function search()
{
    if (geocoder)
    {
        geocoder.getLatLng(document.getElementById('address').value, function(point)
        {
            if (!point)
            {
                alert(document.getElementById('address').value + " not found");
            }
            else
            {
                map.setCenter(point, 13);
            }
        });
    }
}

function getAddress(overlay, latlng)
{
    if (latlng != null)
    {
        address = latlng;
        geocoder.getLocations(latlng, showAddress);
    }
}

function showAddress(response)
{
    if (response && response.Status.code == 200)
    {
        place = response.Placemark[0];

        document.getElementById('address').value = place.address;
    }
}
//]]>

Nu heb ik zelf overal al gekeken, de scripting opnieuw gemaakt en gezocht naar vergelijkbare gevallen... maar helaas tot nu toe niets gevonden waarmee dit probleem opgelost kan worden. Het rare is dat ik de map bijna tot rechts kan slepen, maar daarna weer voor de helft verdwijnt

Iemand die mijn fout ziet?

[Gersomvg]

Als je even een demo online zet kan ik (kunnen we) met firebug spelen

[EricBruggema]

OK!

http://www.visfreaks.nl/test.html

daar staat een voorbeeld klik even op het wereldbolletje en je ziet het!

[ Voor 25% gewijzigd door EricBruggema op 18-04-2009 14:00 ]

[HendrikN]

Probeer checkresize() aan te roepen op het mapobject nadat de map geladen is.

[ Voor 3% gewijzigd door HendrikN op 18-04-2009 14:08 ]

[Florian]

Het grappige is, wanneer ik op het wereldbolletje klik, zie ik hem ook niet goed. Maar als ik daarna firebug open, dan springt hij in 1 keer goed, zonder dat ik iets veranderd heb en vervolgens blijft hij ook goed tot dat ik refresh.

[ Voor 12% gewijzigd door Florian op 18-04-2009 14:10 ]

[EricBruggema]

HendrikN schreef op zaterdag 18 april 2009 @ 14:08:
Probeer checkresize() aan te roepen op het mapobject nadat de map geladen is.

Helaas, dat resulteert in een error

[HendrikN]

EricBruggema schreef op zaterdag 18 april 2009 @ 14:24:
[...]

Helaas, dat resulteert in een error

Je kan iets duidelijker te zijn...

http://code.google.com/ap...ce.html#GMap2.checkResize voor meer info.

[ Voor 19% gewijzigd door HendrikN op 18-04-2009 14:35 ]

[Onbekend]

EricBruggema schreef op zaterdag 18 april 2009 @ 13:59:
OK!

http://www.visfreaks.nl/test.html

daar staat een voorbeeld klik even op het wereldbolletje en je ziet het!

Ik zie helemaal geen wereldbolletje (Firefox 3.0.8). Of is de pagina inmiddels aangepast?
De andere javascriptfuncties lijken ook niet te werken...

[EricBruggema]

HendrikN schreef op zaterdag 18 april 2009 @ 14:33:
[...]


Je kan iets duidelijker te zijn...

http://code.google.com/ap...ce.html#GMap2.checkResize voor meer info.

Klopt, maar kan er weinig meer over zeggen omdat Internet Explorer nogal duidelijk is met zijn errors, en ik geen tool voor javascript fouten voor Internet Explorer heb Ik zal het even doornemen

Onbekend schreef op zaterdag 18 april 2009 @ 14:36:
[...]

Ik zie helemaal geen wereldbolletje (Firefox 3.0.8). Of is de pagina inmiddels aangepast?
De andere javascriptfuncties lijken ook niet te werken...

Hmm, heel appart, want het zou moeten werken namelijk!

[HendrikN]

EricBruggema schreef op zaterdag 18 april 2009 @ 15:20:
[...]

Klopt, maar kan er weinig meer over zeggen omdat Internet Explorer nogal duidelijk is met zijn errors, en ik geen tool voor javascript fouten voor Internet Explorer heb Ik zal het even doornemen


[...]

Hmm, heel appart, want het zou moeten werken namelijk!

Dan gebruik je firefox?

[Rvanlaak]

Ik zou eens beginnen om de form een id te geven, en om de styling middels die id te doen, en niet via de form class. Wie weet laadt Google Maps wel een form mee of iets dergelijks.

Daarnaast staat de styling vd map zelf in de html style tag van de div.

<div id="mapSrc" styling="height: 500px......

Ik zou iig de styling overal eens uit elkaar halen..

[Rvanlaak]

Oh, en ik krijg in ff 3.0.8 zowel de calendar, de Google Maps popup en de foto's niet getoond...

Firebug geeft me voor de calendar en de foto's een error.. De Google Maps lijkt helemaal niks te doen

[EricBruggema]

Ik heb het nu anders aangepakt, en heb gewoon de popup in een hiddenlayer gezet die zichtbaar wordt na aan klikken, ipv een soortement van popup, en het rare is, geen scroll problemen mee