GDownloadUrl() toevoegen

annendael · 6 dec 2011

ik heb Googlemaps op mijn website geplaatst. Maar om de coördinaten eenvoudig te loaden adviseert men het onderstaande. Kan iemand mij (redelijke digibeet) zeggen hoe ik dit moet doen? Ik probeer de hele dag al van alles, niets werkt:evil::
GDownloadUrl() toevoegen Om een xml bestand in te laden moet je de functie GDownloadUrl() gebruiken. In dit voorbeeld laad ik xml/13/data.xml in. Dit bestand ziet er alsvolgt uit:
<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="52.375066" lng="4.883756" />
<marker lat="52.375300" lng="4.896059" />
</markers>

[B]Op een pagina van de site heb ik het volgende geplaatst en dat werkt goed[/B]:[/B]
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAANAncwO_HS3-25jJCcgmUKBSbH2JaVBDzSKysMQib6qIfd0fFKxR2OXMz9Lxrfy0Bj14OhrPhCMjqiw
type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(51.98510, 5.89873), 8);

var marker = new GMarker(new GLatLng(51.19368, 5.98799));
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Munstekerk");
});
var marker = new GMarker(new GLatLng(51.06150, 5.85083));
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Basiliek Susteren");
});
}
}

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1500px; height: 800px"></div>
</body>
</html>

Een deel moet ik vervangen door onderstaande en met de gdownload zou dat werken;
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());

GDownloadUrl("xml/13/data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers.getAttribute("lat")),
parseFloat(markers.getAttribute("lng")));
map.setCenter(point, 14);
var marker = new GMarker(point);
map.addOverlay(marker);

That Guy · 8 dec 2011

ze hebben op dit forum van die handige code-tags. Just sayin'.

HTML:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANAncwO_HS3-25jJCcgmUKBSbH2JaVBDzSKysMQib6qIfd0fFKxR2OXMz9Lxrfy0Bj14OhrPhCMjqiw
type="text/javascript"></script>
<script type="text/javascript">

function initialize() {



if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());

GDownloadUrl("xml/13/data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
map.setCenter(point, 14);
var marker = new GMarker(point);
map.addOverlay(marker); 
}
}

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1500px; height: 800px"></div>
</body>
</html>

annendael · 8 dec 2011

Hartelijk dank,

Geplaatst,
Maar er gebeurd nog niets.
Wat moet ik met onderstaande, of is dit te moeilijk om eenvoudig uit te leggen aan een niet geschoolde in dit soort zaken:

GDownloadUrl() toevoegen Om een xml bestand in te laden moet je de functie GDownloadUrl() gebruiken. In dit voorbeeld laad ik xml/13/data.xml in. Dit bestand ziet er alsvolgt uit:
<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="52.375066" lng="4.883756" />
<marker lat="52.375300" lng="4.896059" />
</markers>

That Guy · 8 dec 2011

Waar precies komt de code uit je 1e bericht vandaan? Want er klopt niet zoveel van...

annendael · 9 dec 2011

Hallo Guy,

Op gevaar af, dat ik de code verkeerd heb gekopieerd hier nogmaals. Dit is mijn oorspronkelijke code, en hiermee zie ik een kaart met twee markers.
Het is gemaakt met deze website, die aangeeft wat ik vervolgens moet doen als ik heel veel markers wil plaatsen. http://www.whelp.nl/google-maps-markers/

Met vriendelijke groet,
Nico

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAANAncwO_HS3-25jJCcgmUKBSbH2JaVBDzSKysMQib6qIfd0fFKxR2OXMz9Lxrfy0Bj14OhrPhCMjqiw
type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(51.98510, 5.89873), 8);

var marker = new GMarker(new GLatLng(51.19368, 5.98799));
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Munstekerk");
});
var marker = new GMarker(new GLatLng(51.06150, 5.85083));
map.addOverlay(marker);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml("Basiliek Susteren");
});
}
}

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1500px; height: 800px"></div>
</body>
</html>

Robin S · 9 dec 2011

Nogmaals: denk aan de

Code:

-tags. Dat maak alles voor iedereen een stuk overzichtelijker ;)
Verder: na wat haakjes goed te zetten werkt 't prima hier. Wat er veranderd is: in je oude code voegde je na het initialiseren van de map handmatig twee markers toe. Dat stuk is weggehaald, en vervangen door de GDownloadUrl-functionaliteit. Die zet gewoon alle markers uit het aangegeven bestand op de map, centreert op de laatste marker en zoomt in met een factor 14 ;)
De coordinaten van alle markers die je op je kaart wil hebben zet je dus in xml/13/data.xml, maar 'k geloof dat je dat al door had ^^ Succes :)

[JS]<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps JavaScript API Example</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANAncwO_HS3-25jJCcgmUKBSbH2JaVBDzSKysMQib6qIfd0fFKxR2OXMz9Lxrfy0Bj14OhrPhCMjqiw" type="text/javascript"></script>
        <script type="text/javascript">

        function initialize() {
            if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map_canvas"));
                map.addControl(new GSmallMapControl());

                GDownloadUrl("xml/13/data.xml", function(data, responseCode) {
                    var xml = GXml.parse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    for (var i = 0; i < markers.length; i++) {
                        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                                parseFloat(markers[i].getAttribute("lng")));
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                    }
                    map.setCenter(point, 14);
                });
                
            }
        }

        </script>
    </head>
    <body onload="initialize()" onunload="GUnload()">
        <div id="map_canvas" style="width: 1500px; height: 800px"></div>
    </body>
</html>[/JS]

annendael · 12 dec 2011

Hartelijk dank voor de moeite, maar ik plak jouw versie in mijn text editor en zie weer een lege google map pagina.

Wat kun je nu fout doen aan knippen en plakken? Ik heb het helemaal nagelopen en alles is exact als jij mij stuurt.

Robin S · 12 dec 2011

Hmm, dat is apart zeg. Hier werkt 't gewoon in alle browsers, anders had ik de schuld aan IE ofzo kunnen geven

Staat het data.xml op de juiste locatie (namelijk in de map ./xml/13 ten opzichte van het HTML-bestand)? Anders kun je misschien eens kijken of er foutmeldingen zijn. Als ik 't goed heb is voor zowel FireFox als Chrome de standaard-hotkey naar de console Ctrl+Shift+J.

annendael · 13 dec 2011

ik probeer een bestand ./xml/13 aan te maken, maar mijn server zegt : een bestandsnaam kan geen van de volgende tekens bevatten :/\ ?''<>*

Ik geloof dat ik niets snap van het aanmaken van een xml bestand, snik

Robin S · 13 dec 2011

./xml/13 zijn directories (folders, mappen). In de map waar je je script hebt staan maak je een map die 'xml' heet. In 'xml' maak je een map die '13' heet. In '13' zet je het bestand dat 'data.xml' heet.

Óf -wat eigenlijk gemakkelijker is- je past het script even aan. "xml/13/data.xml" (regel 15) verander je naar "data.xml", en dan zet je het bestand "data.xml" in dezelfde map als waar je het script hebt staan.

annendael · 13 dec 2011

Hartelijk dank voor je hulp steeds, maar het wil nog niet lukken. Ik heb een data.xml.html gemaakt met daarin :
<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="52.375066" lng="4.883756" html="Anne Frank Huis"/>
<marker lat="52.375300" lng="4.896059" html="Beurs van Berlage"/>
</markers

en ik zet het onder onderstaande, maar ik blijf een lege google map pagina zienr:
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAANAncwO_HS3-25jJCcgmUKBSR4qcADqsxsGewILSOE-tlD6s4eBShK1dd1JluwUriDMdOz42lOHHrjQ" type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());

GDownloadUrl("data.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var point = new GLatLng(parseFloat(markers.getAttribute("lat")),
parseFloat(markers.getAttribute("lng")));
var marker = new GMarker(point);
map.addOverlay(marker);
}
map.setCenter(point, 14);
});

}
}

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1500px; height: 800px"></div>
</body>
</html>

<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="52.375066" lng="4.883756" html="Anne Frank Huis"/>
<marker lat="52.375300" lng="4.896059" html="Beurs van Berlage"/>
</markers>

Robin S · 13 dec 2011

Dan ben je er bijna!

annadael zei:
Ik heb een data.xml.html gemaakt met daarin:

Dit moet worden: data.xml, dus het .html-gedeelte weghalen uit de bestandsnaam.

En maar even omwille van precisie: Vergeet in data.xml het <markers>-element niet af te sluiten met </markers>. Je hebt nu aan het eind </markers staan.

Robin S · 13 dec 2011

Dan ben je er bijna!

annadael zei:
Ik heb een data.xml.html gemaakt met daarin:

Dit moet worden: data.xml, dus het .html-gedeelte weghalen uit de bestandsnaam.

En maar even omwille van precisie: Vergeet in data.xml het <markers>-element niet af te sluiten met </markers>. Je hebt nu aan het eind </markers staan.

Dus nog even op een rijtje:
data.xml

HTML:

<?xml version="1.0" encoding="utf-8"?>
<markers>
<marker lat="52.375066" lng="4.883756" html="Anne Frank Huis"/>
<marker lat="52.375300" lng="4.896059" html="Beurs van Berlage"/>
</markers>

index.html

HTML:

<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps JavaScript API Example</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAANAncwO_HS3-25jJCcgmUKBSbH2JaVBDzSKysMQib6qIfd0fFKxR2OXMz9Lxrfy0Bj14OhrPhCMjqiw" type="text/javascript"></script>
        <script type="text/javascript">
 
        function initialize() {
            if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map_canvas"));
                map.addControl(new GSmallMapControl());
 
                GDownloadUrl("xml/13/data.xml", function(data, responseCode) {
                    var xml = GXml.parse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    for (var i = 0; i < markers.length; i++) {
                        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                                parseFloat(markers[i].getAttribute("lng")));
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                    }
                    map.setCenter(point, 14);
                });
                
            }
        }
 
        </script>
    </head>
    <body onload="initialize()" onunload="GUnload()">
        <div id="map_canvas" style="width: 1500px; height: 800px"></div>
    </body>
</html>

annendael · 14 dec 2011

fantastisch, het werkt!! ik had de moed al bijna opgegeven. Heel hartelijk dank!!!:

nu moet ik nog de tekstballonnen aan het werk krijgen. Maar hier maak ik een nieuwe vraag van.

GDownloadUrl() toevoegen

annendael

Gebruiker

That Guy

Meubilair

annendael

Gebruiker

That Guy

Meubilair

annendael

Gebruiker

Robin S

Gebruiker

annendael

Gebruiker

Robin S

Gebruiker

annendael

Gebruiker

Robin S

Gebruiker

annendael

Gebruiker

Robin S

Gebruiker

Robin S

Gebruiker

annendael

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy