tekstbalonnen blijven leeg

Status
Niet open voor verdere reacties.
A

annendael

Gebruiker
Lid geworden
6 dec 2011
Berichten
13
Ik heb met hulp van deze site de volgende googlemap gemaakt. En dat werkt goed. Maar mijn tekstballonnen verschijnen niet als ik een marker aanklik.

<!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-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, 8);
});

}
}

</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1500px; height: 800px"></div>
</body>
</html>
Ik heb de gegevens in een map genaamde : data.xml opgeslagen
En volgens de website : http://www.whelp.nl/google-maps-meerdere-tekstballonnen-7/ Moet ik het aanpassen zoals onder gedaan. Maar dan zie ik alleen een blanco pagina. Kan iemand mij zeggen wat ik fout doe?:(

<!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-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());

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

//create randomnumber and retrieve xml file
var randomnumber=Math.floor(Math.random()*11111)
GDownloadUrl("data.xml?random="+randomnumber, function(data, responseCode) {
var xml = GXml.parse(data);

//store markers in markers array
var markers = xml.documentElement.getElementsByTagName("marker");

//loop over the markers array
for (var i = 0; i < markers.length; i++) {
var lat = parseFloat(markers.getAttribute("lat"));
var lng = parseFloat(markers.getAttribute("lng"));
var point = new GLatLng(lat,lng);
var html = markers.getAttribute("html");
map.setCenter(point, 14);
var marker = createMarker(point,html);
map.addOverlay(marker);
} //close for loop

}
); //close GDownloadUrl
} //close GBrowserIsCompatible
} //close load
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 1500px; height: 800px"></div>
</body>
</html>
 
Laatst bewerkt:
bekijk dit eens werkt niet allemaal juist maar tis een begin en php $ betekent variabele die serversite in het document komt maar ik ben niet verder gekomen.moest ge zin hebben je kan het altijd afmaken om meerdere ballonen zichtbaar te maken
PHP: 
<?php
    //de code  van google => http://www.google.com/apis/maps/signup.html
    //http://www.googlegeodevelopers.blogspot.com/2009/05/announcing-google-maps-api-v3.html
    //
    $code = '';
    //!empty($_GET['adres']) ? htmlentities($_GET['adres']) : $eigenadres;
    $hetaddress = isset($_GET['adres'])? htmlentities($_GET['adres']) : 'gent';
    $soort = 'G_HYBRID_MAP';//kaart  'G_NORMAL_MAP' sateliet 'G_SATELLITE_MAP' bijde 'G_HYBRID_MAP'
    //Hoever wil je inzoomen? 1 is Mondiaal niveau, 100 is verst ingezoomd. (google standaard waarde: 15)
    $zoom = 18;
?>
<!DOCTYPE html PUBLIC "-//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 check adres</title>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<?=$code ?>" type="text/javascript"></script>
<script type="text/javascript">
    var map = null;
    var geocoder = null;
    var mgr = null;
    var Items = [["meuleken,Boekhoute","BE","tzoe ier moeten zijn "],["boekhoutedorp,Boekhoute","BE","of zout iers zijn "],["weststraat,Boekhoute","BE","of zout iers zijn "]];
    /*
	*@param Items[i][0]="Gent"(address)Items[i][1]="BE"(country)Items[i][1]="MORE text"(text)
	**/
    function init(Items){
    	if (GBrowserIsCompatible()){
    		googlemap = document.getElementById("map");

            map = new GMap2(googlemap, {draggableCursor:"crosshair"});
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.addControl(new GScaleControl());

            geocoder = new GClientGeocoder();
	    	for(var i=0;(i<Items.length&&typeof(Items[i])!="undefined");i++){
	    		setadresmarker(Items[i][0],Items[i][1],Items[i][2]);
	    	}
	    	//setmousewheel('map');
    	}
	}
    function setadresmarker(adres,country,text){
    	if (geocoder){
            geocoder.getLatLng(adres+" "+country,
                function(point){//als het adres niet gevonden is
                    if (point){
                        map.setCenter(point, <?=$zoom; ?>, <?=$soort;?>);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml(text);
                    }
                }
            );
        }
    }   
    function zoom(oEvent, s){
        if(s == -120){map.zoomOut();}
		if(s == 120){map.zoomIn();} 
	}
    function setmousewheel(id){
        var d = document.getElementById(id);
        try {
            if (document.body.addEventListener){
                d.addEventListener('DOMMouseScroll', function(oEvent) {zoom(oEvent, oEvent.detail * -40); }, false);
            }else{
                d.onmousewheel = function() { zoom(event, event.wheelDelta); return false; }
            }
        }catch (ex) {
        	
        }
    }
function drawCircle() {
	circleRadius = 500;//km
	circleUnits = 'KM';
	if (circle) {
		map.removeOverlay(circle);
	}
	if (centerMarker) { map.setCenter(centerMarker.getLatLng())
	} else {
		centerMarker = new GMarker(map.getCenter(),{draggable:true});
		GEvent.addListener(centerMarker,'dragend',drawCircle)
		map.addOverlay(centerMarker);
	}
	var center = map.getCenter();
	var bounds = new GLatLngBounds();
	var circlePoints = Array();
	with (Math) {
		//if (circleUnits == 'KM') {
		var d = circleRadius/6378.8;	// radians
		var lat1 = (PI/180)* center.lat(); // radians
		var lng1 = (PI/180)* center.lng(); // radians
		for (var a = 0 ; a < 361 ; a++ ) {
			var tc = (PI/180)*a;
			var y = asin(sin(lat1)*cos(d)+cos(lat1)*sin(d)*cos(tc));
			var dlng = atan2(sin(tc)*sin(d)*cos(lat1),cos(d)-sin(lat1)*sin(y));
			var x = ((lng1-dlng+PI) % (2*PI)) - PI ; // MOD function
			var point = new GLatLng(parseFloat(y*(180/PI)),parseFloat(x*(180/PI)));
			circlePoints.push(point);
			bounds.extend(point);
		}
		if (d < 1.5678565720686044) {
			circle = new GPolygon(circlePoints, '#000000', 2, 1, '#000000', 0.25);	
		}else {
			circle = new GPolygon(circlePoints, '#000000', 2, 1);	
		}
		map.addOverlay(circle); 
		map.setZoom(map.getBoundsZoomLevel(bounds));
	}
}
</script>
    </head>
<body onload="init(Items)" onunload="GUnload()">
    <div id="map" style="width: 100%; height: 400px">
    </div>
    <input type="submit" value="Draw" onclick="drawCircle()">

</body>
</html>
 
Laatst bewerkt:
Heel hartelijk dank voor de moeite, maar hier kom ik toch niet mee verder.De google pagina blijft leeg. Ik heb eigenlijk geen verstand van programmeren. Ben hier al zoveel dagen mee bezig, ik denk dat ik het maar opgeef.:(
 
Laatst bewerkt:
let op mijn voorbeeld is php nu moet je enkel regel 17 invullen met de variabele en regel 47 maar mogelijks wil je het dynamisch maken dus laat ik het staan.
 
Dank voor de aanwijzing. Ik heb in regel 17 de code ingevoerd. Maar wat ik ook in regel 47 invoer, ik krijg steeds een lege pagina, waar links ''draw'' staat.
Is het mogelijk dat u regel 47 als een voorbeeld invult?
alvast bedankt.
Nico
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan