Gmaps

exotic · 4 nov 2010

Ik vind het alleen zo raar dat andere websites het wel met de juiste KM hebben.
( store locators )

Tha Devil · 4 nov 2010

Voorbeeldje?

Ik zie geen andere manier dan dat je dan eerst alle markers (of in ieder geval degenen in een grote radius om het opgegeven punt) opvist uit de database, en dan individueel daar directions naar gaat opvragen.

exotic · 4 nov 2010

Heb je hier toevallig ook een voorbeeld van?
ik bedoel ik genereer nu veel meer gegevens in de .xml maar wat moet ik dan nog meer in de .xml genereren?

Tha Devil · 4 nov 2010

In de WHILE dit waarschijnlijk doen

PHP:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://maps.googleapis.com/maps/api/directions/json?origin='. $center_lat .','. $center_lng .'&destination='. $row['lat'] .','. $row['lng'] .'&sensor=false');
curl_setopt($ch, CURLOPT_FRESH_CONNECT, TRUE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$data = curl_exec($ch);
curl_close($ch);
$json = json_decode($data);
 
$newnode->setAttribute("distance",  $json->routes[0]->legs[0]->duration->text);

Ik weet niet zeker of de URL geldig is richting googleapis.com, controleer dat dus eerst even handmatig met wat data.

exotic · 4 nov 2010

in de while zeg je:

PHP:

while ($row = @mysql_fetch_assoc($result)){
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("id", $row['id']);
  $newnode->setAttribute("name", $row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("postcode", $row['postcode']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("distance", $row['distance']);
  $newnode->setAttribute("telefoon", $row['telefoon']);
  $newnode->setAttribute("fax", $row['fax']);
  $newnode->setAttribute("website", $row['website']);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, 'http://maps.googleapis.com/maps/api/directions/json?origin='. $center_lat .','. $center_lng .'&destination='. $row['lat'] .','. $row['lng'] .'&sensor=false');
curl_setopt($ch, CURLOPT_FRESH_CONNECT, TRUE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$data = curl_exec($ch);
curl_close($ch);
$json = json_decode($data);
 
$newnode->setAttribute("distance",  $json->routes[0]->legs[0]->duration->text);
}

Tha Devil · 4 nov 2010

Lijkt mij wel, maar dan wel de andere "distance" er tussen uit halen. (regel 10)

Variabelen zijn wel afhankelijk van de rest van je script

exotic · 4 nov 2010

wat doet dit script nou precies?
Berekend deze de reistijd oid?

NM.. ik heb duration aangepast naar distance en nu geeft ie dus wel de juiste Kilometers aan!
Bedankt!...

is er ook een manier om in de marker iets te zetten van routeomschrijving?
ik heb de gebruiker zijn postcode/adres dus vanuit daar naar de marker..

Tha Devil · 4 nov 2010

Directions API niet doorgelezen dus?
http://code.google.com/apis/maps/documentation/directions/#Legs

exotic · 4 nov 2010

Nou ik heb het wel door gelezen alleen moet ik nu dus een andere pagina maken lijkt mij?

Dan zou de pagina ongeveer zo eruit moeten zien toch?

PHP:

<?php  
require("phpsqlsearch_dbinfo.php");

// Get parameters from URL
$addressInput = $_GET["addressInput"];
$address = $_GET["address"];
$id = $_GET["id"];
?>
<!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"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <title>Google Maps JavaScript API Example: Simple Directions</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA_Sg9KB9fS0B6Jtnx32Gv3hSip7-AWJrOd2SAL32NdKadpXt5whTdXmj-ovyivwV61uLA-I_K3lji0A"
      type="text/javascript"></script>
    <script type="text/javascript"> 
	// Create a directions object and register a map and DIV to hold the 
    // resulting computed directions

    var map;
    var directionsPanel;
    var directions;

    function initialize() {
      map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(52.372246, 4.894409), 6);
      directionsPanel = document.getElementById("route");
      directions = new GDirections(map, directionsPanel);
      directions.load("from: <? echo "addressInput"; ?> to: <? echo "address"; ?>");
    }
    </script>
  </head>

  <body onload="initialize()">
    <div id="route" style="width: 25%; height:480px; float:right; border; 1px solid black;"></div>
    <br/>
  </body>
</html>

Tha Devil · 4 nov 2010

Alles wat je nodig hebt staat volgens mij wel in dit voorbeeld: http://code.google.com/apis/maps/documentation/javascript/services.html#RenderingDirections

Kwestie van een linkje in je marker zetten die een functie gaat uitvoeren lijkt mij

exotic · 6 nov 2010

welke link is dat dan?
en hoe? ik snap dit echt niet ;S

Tha Devil · 6 nov 2010

Je bouwt immers markers op basis van de XML-data.

In de openInfoWindowHtml() zorg je dat dit er bij komt:

HTML:

<a href="#" onclick="calcRoute()">Bereken route</a>

Waarschijnlijk moet je wel de functie wat parameters mee geven zodat het een start en eindpunt heeft.

exotic · 10 nov 2010

Tha Devil zei:
Je bouwt immers markers op basis van de XML-data.

In de openInfoWindowHtml() zorg je dat dit er bij komt:

HTML:

<a href="#" onclick="calcRoute()">Bereken route</a>

Waarschijnlijk moet je wel de functie wat parameters mee geven zodat het een start en eindpunt heeft.

Hmm, werkt niet

PHP:

function calcRoute() {
	var start = document.getElementById('addressInput').value;
	var end = document.getElementById("address").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);     }   }); }

en :

PHP:

    function createMarker(point, name, address, telefoon, fax, website, email) {
      var marker = new GMarker(point);
      var html = '<b>' + name + '</b>	  <br/>' + address + '</b>	  <br/><br/>T:&nbsp;' + telefoon + '</b> 	  <br/>F:&nbsp;' + fax + '</b> 	<br/><br/><a href="' + website + '" target="_blank">' + website + '</a><br/><a href="mailto:' + email + '">' + email + '</a><br/><br/><a href="#" onclick="calcRoute()"> routebeschrijving</a></b>';
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

Ik krijg dus een javascript error. en de routebeschrijving opent niet

Tha Devil · 10 nov 2010

Zoals eerder gezegd, sleur-en-pleur en verwachten dat het werkt gaat natuurlijk nooit goed.

[js]
var start = document.getElementById('addressInput').value;
var end = document.getElementById("address").value;[/js]
Die waardes bestaan ook?

exotic · 10 nov 2010

Uhm? ik heb de funcite calcRoute vanaf de site van google.
daarin staan ook de volgende formules:
[JS]var start = document.getElementById('addressInput').value;
var end = document.getElementById("address").value; [/JS]

dat zijn dan toch ook de waarden?

Tha Devil · 10 nov 2010

De variabelen "start" en "end" worden gevuld door de waardes van een input-box met de id "addressInput" en "address".
Grote kans dat die dus niet bestaan in jouw code.

Daarom zei ik ook

Waarschijnlijk moet je wel de functie wat parameters mee geven zodat het een start en eindpunt heeft.

Oftewel de functie calcRoute zou in ieder geval als parameter het eind-punt mee moeten krijgen, die komt vanuit de XML. Het beginpunt is het punt dat de gebruiker opgeeft om de markers op te vragen, die zou je dus uit de input-box kunnen halen via de document.getElementById()-functie

exotic · 10 nov 2010

Klopt, mijn textfield heeft ook de naam addressInput.
maar vanuit de XML moet ik dus de address zien te krijgen..

geen idee hoe, want die gegevens worden toch al geladen op de pagina??

Tha Devil · 10 nov 2010

Je inputveld moet een id="addressInput" hebben zodat je hem via JS kan opvragen.

Dan wordt het bij de marker:
[js]
function createMarker(point, name, address, telefoon, fax, website, email) {
var marker = new GMarker(point);
var html =
'' + name + ' 
' + address + ' 
 
T: ' + telefoon + ' 
F: ' + fax + ' 
 
<a href="' + website + '" target="_blank">' + website + '</a> 
<a href="mailto:' + email + '">' + email + '</a> 
 
<a href="#" onclick="calcRoute('+ point +')"> routebeschrijving</a>';
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
[/js]
En de calcRoute zo:
[js]
function calcRoute(end) {
var start = document.getElementById('addressInput').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);
} else {
alert(status);
}
});
}[/js]

exotic · 10 nov 2010

Hmm werkt niet..
google.maps.DirectionsTravelMode.DRIVING

geeft een error?

Tha Devil · 10 nov 2010

Wat is de foutmelding dan

"Werkt niet" heb ik ook weinig aan.

Gmaps

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Gebruiker

Moderator

Wij waarderen jouw privacy