Gmaps

Status
Niet open voor verdere reacties.
Het is gewoon weird..
Naja! ik hoor het wel van je dan! Thanks!
Ik ga zelf nog wel het één en ander proberen..
 
gmaps.js
[js]
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var geocoder;
var map;
var markers = [];

function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.372246, 4.894409)
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
geocoder = new google.maps.Geocoder();
directionsDisplay.setMap(map);
}

function search() {
var address = document.getElementById("inputAddress").value;
geocoder.geocode({'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
downloadUrl(searchUrl, function(data) {
var markers = data.documentElement.getElementsByTagName('marker');
clearOverlays();
var sidebar = document.getElementById('sidebar');
sidebar.innerHTML = '';
if (markers.length == 0) {
sidebar.innerHTML = 'Geen resultaten gevonden';
map.setCenter(new google.maps.LatLng(52.372246, 4.894409), 10);
return;
} else {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var name = markers.getAttribute('name');
var address = markers.getAttribute('address');
var telefoon = markers.getAttribute('telefoon');
var fax = markers.getAttribute('fax');
var website = markers.getAttribute('website');
var email = markers.getAttribute('email');
var distance = parseFloat(markers.getAttribute('distance'));
var point = new google.maps.LatLng(
parseFloat(markers.getAttribute('lat')),
parseFloat(markers.getAttribute('lng'))
);
var marker = createMarker(point, name, address, telefoon, fax, website, email);
bounds.extend(point);
}
}
map.fitBounds(bounds);
});
} else {
alert("Adres niet gevonden: " + status);
}
});
}

function createMarker(point, name, address, telefoon, fax, website, email) {
var marker = new google.maps.Marker({
map: map,
position: point
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
var infowindow = new google.maps.InfoWindow({content: '<font style="font-family:Arial, sans-serif; font-size:11px;"><b>'+ name +'</b><br/>'+ address +'<br /><br />'+ telefoon +'<br />'+ fax +'<br /><br />'+ website +'<br />'+ email +'<br /><br /><a href="#" onclick="calcRoute(\''+ point.toString() +'\')">routebeschrijving</a></font>'});
infowindow.open(map, marker);
});
markers.push(marker);

}
function calcRoute(end) {
clearOverlays();
directionsDisplay.setMap(map);
var start = document.getElementById("inputAddress").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}

function clearOverlays() {
if (markers) {
for (i in markers) {
markers.setMap(null);
}
markers.length = 0;
}
if(directionsDisplay) {
directionsDisplay.setMap(null);
}

}

function createXmlHttpRequest() {
try {
if (typeof ActiveXObject != 'undefined') {
return new ActiveXObject('Microsoft.XMLHTTP');
} else if (window["XMLHttpRequest"]) {
return new XMLHttpRequest();
}
} catch (e) {
changeStatus(e);
}
return null;
};

/**
* This functions wraps XMLHttpRequest open/send function.
* It lets you specify a URL and will call the callback if
* it gets a status code of 200.
* @param {String} url The URL to retrieve
* @param {Function} callback The function to call once retrieved.
*/
function downloadUrl(url, callback) {
var status = -1;
var request = createXmlHttpRequest();
if (!request) {
return false;
}

request.onreadystatechange = function() {
if (request.readyState == 4) {
try {
status = request.status;
} catch (e) {
// Usually indicates request timed out in FF.
}
if (status == 200) {
callback(request.responseXML, request.status);
request.onreadystatechange = function() {};
}
}
}
request.open('GET', url, true);
try {
request.send(null);
} catch (e) {
changeStatus(e);
}
};

/**
* Parses the given XML string and returns the parsed document in a
* DOM data structure. This function will return an empty DOM node if
* XML parsing is not supported in this browser.
* @param {string} str XML string.
* @return {Element|Document} DOM.
*/
function xmlParse(str) {
if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
var doc = new ActiveXObject('Microsoft.XMLDOM');
doc.loadXML(str);
return doc;
}

if (typeof DOMParser != 'undefined') {
return (new DOMParser()).parseFromString(str, 'text/xml');
}

return createElement('div', null);
}
[/js]
index.html
HTML: 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<title>Google Maps AJAX + mySQL/PHP Example</title> 
<script src="http://maps.google.com/maps/api/js?sensor=false&locale=nl" type="text/javascript"></script> 
<script src="gmaps.js" type="text/javascript"></script>
<style>
#map {
	width:	500px;
	height: 500px;
}
</style>
</head> 
 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<form action="">
<input type="text" value="Meppel" id="inputAddress" />
<select id="radiusSelect">
	<option value="" selected>Kies Straal</option>
	<option value="5">5 km</option>
	<option value="10">10 km</option>
	<option value="25">25 km</option>
	<option value="50">50 km</option>
	<option value="100">100 km</option>
</select>
<input type="button" onclick="search()" value="Zoeken" />
<div id="map"></div>
<div id="sidebar"></div>
</form>
</body>
</html>
Het was even puzzelen, bepaalde zaken zijn nogal gewijzigd ten opzichte van Google Maps API v2

Dit zou in de basis moeten werken.
 
Als het goed is heb je een bestand "phpsqlsearch_genxml.php" toch?
Die laad je tenminste binnen op regel 24 van "gmaps.js"
 
Dit gaat niet werken :(
Krijg de ene naar de andere foutmelding over dat center niet gedefineerd is..

Damn..

Waarom moet google nou zo moeilijk zijn!
 
De gegeven code werkt bij mij prima :confused:
 
Tja zonder code weet ik niet waar je mee bezig bent :rolleyes:
 
ik wil de gegevens vanuit mn database laden maar het lukt niet.
krijg het niet voor elkaar :S heb ook al de gmaps.js te laden in een php enzo :S
 
Je bedoelt de locaties?

Die moet je in "phpsqlsearch_genxml.php" gaan laden, dat deed je voorheen toch ook?
 
Ik gebruik de bovenstaande scripts.
maar ik krijg niets te zien op de kaart..

:$
 
Vervang deze regels
[js]
downloadUrl(searchUrl, function(data) {
var markers = data.documentElement.getElementsByTagName('marker');
[/js]
eens door
[js]
downloadUrl(searchUrl, function(data) {
alert(data);
var markers = data.documentElement.getElementsByTagName('marker');
[/js]
Als er een fout in het PHP-bestand zit kom je er zo wel achter.
 
Hmm heb het aangepast maar ik krijg gewoon niets te zien.
alles werkt volgens mij wel naar behoren, alleen vind hij niet de (vestigingen uit de database)

Althans hij laat de gegevens uit de database niet zien..
 
En als je direct het PHP-bestand aanroept krijg je wel resultaten?
 
In het script wordt maar 1 PHP-pagina aangeroepen nietwaar? :rolleyes:

phpsqlsearch_genxml.php met de $_GET-variabelen "lat", "lng" en "radius"
 
[JS] var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;[/JS]
Deze bedoel je, ik kan wel lost genereren maar via de index.php en gmaps.js dus niet..

Groeten
 
Laatst bewerkt:
Welke browser gebruik je?

Ik draai Chrome en via de inspector kom ik er achter dat "center" niet gedefinieerd is waardoor het script dus geen goede waardes verstuurt.
 
ik gebruik internet explorer. en heb dus hetzelfde. center word niet gedefineerd.
hoe kan ik dit oplossen :)

Groeten, Wesley
 
Je vond het niet vreemd dat er een melding verschijnt en het script niet werkt?

center.lng en center.lat zijn de coordinaten van het middenpunt van het ingevoerde adres.

Deze krijg je van de geocode()-functie terug:
[js]
results[0].geometry.location
[/js]

Als je van dit:
[js]
var radius = document.getElementById('radiusSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
[/js]
Dit maakt zou er wellicht meer schot in de zaak komen:
[js]
var radius = document.getElementById('radiusSelect').value;
var center = results[0].geometry.location;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
[/js]

Ik krijg nu wel sterk het idee dat ik al het werk moet doen terwijl je zelf dit soort zaken ook op had kunnen zoeken :confused:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan