Gmaps

exotic · 10 nov 2010

google.maps.DirectionsTravelMode.DRIVING is leeg of geen object.

Tha Devil · 10 nov 2010

Hoe ziet je volledige index.html/php er nu uit?

Het is mogelijk dat je iets vergeten bent in te laden

exotic · 11 nov 2010

Tha Devil zei:
Hoe ziet je volledige index.html/php er nu uit?

Het is mogelijk dat je iets vergeten bent in te laden

PHP:

<!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</title>
  </head>
<body onload="load()" onunload="GUnload()">
<script src="http://maps.google.nl/maps?file=api&amp;v=2&amp;key=ABQIAAAA_Sg9KB9fS0B6Jtnx32Gv3hQSvsc_gX5igSWMXt6QKdt3uZVFwBTOTlCQtRRwrtZP5u0DOF97rcL0eQ
" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var map;
    var geocoder;

    function load() {
      if (GBrowserIsCompatible()) {
        geocoder = new GClientGeocoder();
        map = new GMap2(document.getElementById('map'));
        map.addControl(new GSmallMapControl());
        map.setCenter(new GLatLng(52.372246, 4.894409), 6);
        map.setZoom(6); 

      }
    }



   function searchLocations() {
     var address = document.getElementById('addressInput').value;
     geocoder.getLatLng(address, function(latlng) {
       if (!latlng) {
         alert(address + ' Geen resultaten gevonden');
       } else {
         searchLocationsNear(latlng);
       }
     });
   }

   function searchLocationsNear(center) {
     var radius = document.getElementById('radiusSelect').value;
     var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
       var markers = xml.documentElement.getElementsByTagName('marker');
       map.clearOverlays();

       var sidebar = document.getElementById('sidebar');
       sidebar.innerHTML = '';
       if (markers.length == 0) {
         sidebar.innerHTML = 'Geen resultaten gevonden';
         map.setCenter(new GLatLng(52.372246, 4.894409), 10);
         return;
       }

       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
         var name = markers[i].getAttribute('name');
         var address = markers[i].getAttribute('address');
         var telefoon = markers[i].getAttribute('telefoon');
         var fax = markers[i].getAttribute('fax');
         var website = markers[i].getAttribute('website');
         var email = markers[i].getAttribute('email');
         var distance = parseFloat(markers[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));
         
         var marker = createMarker(point, name, address, telefoon, fax, website, email);
         map.addOverlay(marker);
         var sidebarEntry = createSidebarEntry(marker, name, address, distance);
         sidebar.appendChild(sidebarEntry);
         bounds.extend(point);
       }
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
     });
   }

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('+ point +')"> routebeschrijving</a></b>';
  GEvent.addListener(marker, 'click', function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
} 

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);
    }
  });
} 


    function createSidebarEntry(marker, name, address, distance) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + '&nbsp;km)<br/>' + address;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '2px'; 
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }
	
  </script>
  <script>        
function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}
</script>   
<font style="font-family:Arial, sans-serif; font-size:11px;">
<table width="100%">
	<tr>
		<td width="50%">
			<input type="text" value="Postcode/Woonplaats" id="addressInput" style="color:#666;" onfocus="clearText(this);clearStyle(this);" />
		</td>
		<td width="50%">
			<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>
		</td>
	</tr>
	<tr>
		<td>     
			<input type="button" onclick="searchLocations()" value="Zoek Groothandels"/>
		</td>
		<td>
		</td>
		</tr>
</table>

    </font><br/>    
    <br/>
<div style="width:445px; font-family:Arial, sans-serif; font-size:11px;>
<table> 
    <tbody> 
      <tr id="cm_mapTR">
        <td> <div id="map" style="overflow: hidden; width:400px; height:400px"></div><br><div id="sidebar" style="overflow: auto; height: 200px; font-size: 11px; color: #000; width: 400px"></div></td>
      </tr>
	</tbody>
</table>

<br />
  </body>
</html>

Tha Devil · 11 nov 2010

Ah ik zie het probleem al, je zit met de Maps API v2 en v3 door elkaar heen te werken.

HTML:

<script src="http://maps.google.nl/maps?file=api&amp;v=2&amp;key=ABQIAAAA_Sg9KB9fS0B6Jtnx32Gv3hQSvsc_gX5igSWMXt6QKdt3uZVFwBTOTlCQtRRwrtZP5u0DOF97rcL0eQ" type="text/javascript"></script>

Vervangen door

HTML:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Verder is volgens mij alles wat nu "new Gxxxxxx()" is te vervangen door een versie van "new google.maps.xxxx()"

Als voorbeeld zal ik de functie load() aanpassen
Dat was:
[js]
function load() {
if (GBrowserIsCompatible()) {
geocoder = new GClientGeocoder();
map = new GMap2(document.getElementById('map'));
map.addControl(new GSmallMapControl());
map.setCenter(new GLatLng(52.372246, 4.894409), 6);
map.setZoom(6);
}
}
[/js]
Dat wordt
[js]
function load() {
geocoder = new google.maps.Geocoder();
var options = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
center: new google.maps.LatLng(52.372246, 4.894409),
zoom: 6
}
map = new google.maps.Map(document.getElementById('map'), options);
}
[/js]

Het is dus goed kijken wat je nodig hebt en de nieuwe versie in de documentatie opzoeken:http://code.google.com/apis/maps/documentation/javascript/reference.html

exotic · 11 nov 2010

Dank u!..

Ik heb nu het script aangepast:

PHP:

<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" 
type="text/javascript"></script> 
<script type="text/javascript"> 
//<![CDATA[ 
var map; 
var markers = []; 
var infoWindow; 
var locationSelect; 

function load() { 
map = new google.maps.Map(document.getElementById("map"), { 
center: new google.maps.LatLng(52.372246, 4.894409), 
zoom: 6, 
mapTypeId: 'roadmap', 
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU} 
}); 
infoWindow = new google.maps.InfoWindow(); 

locationSelect = document.getElementById("locationSelect"); 
locationSelect.onchange = function() { 
var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
if (markerNum != "none"){ 
google.maps.event.trigger(markers[markerNum], 'click'); 
} 
}; 
} 

function searchLocations() { 
var address = document.getElementById("addressInput").value; 
var geocoder = new google.maps.Geocoder(); 
geocoder.geocode({address: address}, function(results, status) { 
if (status == google.maps.GeocoderStatus.OK) { 
searchLocationsNear(results[0].geometry.location); 
} else { 
alert(address + ' not found'); 
} 
}); 
} 

function clearLocations() { 
infoWindow.close(); 
for (var i = 0; i < markers.length; i++) { 
markers[i].setMap(null); 
} 
markers.length = 0; 

locationSelect.innerHTML = ""; 
var option = document.createElement("option"); 
option.value = "none"; 
option.innerHTML = "See all results:"; 
locationSelect.appendChild(option); 
} 

function searchLocationsNear(center) { 
clearLocations(); 

var radius = document.getElementById('radiusSelect').value; 
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius; 
downloadUrl(searchUrl, function(data) { 
var xml = parseXml(data); 
var markerNodes = xml.documentElement.getElementsByTagName("marker"); 
var bounds = new google.maps.LatLngBounds(); 
for (var i = 0; i < markerNodes.length; i++) { 
var name = markerNodes[i].getAttribute("name"); 
var address = markerNodes[i].getAttribute("address"); 
var telefoon = markerNodes[i].getAttribute("telefoon"); 
var fax = markerNodes[i].getAttribute("fax"); 
var email = markerNodes[i].getAttribute("email"); 
var website = markerNodes[i].getAttribute("website"); 
var distance = parseFloat(markerNodes[i].getAttribute("distance")); 
var latlng = new google.maps.LatLng( 
parseFloat(markerNodes[i].getAttribute("lat")), 
parseFloat(markerNodes[i].getAttribute("lng"))); 

createOption(name, distance, i); 
createMarker(latlng, name, address, telefoon, fax, website, email); 
bounds.extend(latlng); 
} 
map.fitBounds(bounds); 
locationSelect.style.visibility = "visible"; 
locationSelect.onchange = function() { 
var markerNum = locationSelect.options[locationSelect.selectedIndex].value; 
google.maps.event.trigger(markers[markerNum], 'click'); 
}; 
}); 
} 

function createMarker(latlng, name, address, telefoon, fax, email, website) { 
var html = "<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()'>routebeschrijving</a></b></font>"; 
var marker = new google.maps.Marker({ 
map: map, 
position: latlng 
}); 
google.maps.event.addListener(marker, 'click', function() { 
infoWindow.setContent(html); 
infoWindow.open(map, marker); 
}); 
markers.push(marker); 
} 

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);
    }
  });
} 

function createOption(name, distance, num) { 
var option = document.createElement("option"); 
option.value = num; 
option.innerHTML = name + "(" + distance.toFixed(1) + ")"; 
locationSelect.appendChild(option); 
} 

function downloadUrl(url, callback) { 
var request = window.ActiveXObject ? 
new ActiveXObject('Microsoft.XMLHTTP') : 
new XMLHttpRequest; 

request.onreadystatechange = function() { 
if (request.readyState == 4) { 
request.onreadystatechange = doNothing; 
callback(request.responseText, request.status); 
} 
}; 

request.open('GET', url, true); 
request.send(null); 
} 

function parseXml(str) { 
if (window.ActiveXObject) { 
var doc = new ActiveXObject('Microsoft.XMLDOM'); 
doc.loadXML(str); 
return doc; 
} else if (window.DOMParser) { 
return (new DOMParser).parseFromString(str, 'text/xml'); 
} 
} 

function doNothing() {} 

//]]> 
</script> 
</head> 

<body style="margin:0px; padding:0px;" onload="load()"> 
<div> 
  <script>        
function clearText(thefield){
if (thefield.defaultValue==thefield.value)
thefield.value = ""
}
</script> 
<font style="font-family:Arial, sans-serif; font-size:11px;">
<table width="100%">
	<tr>
		<td width="50%">
			<input type="text" value="Postcode/Woonplaats" id="addressInput" style="color:#666;" onfocus="clearText(this);clearStyle(this);" />
		</td>
		<td width="50%">
			<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>
		</td>
	</tr>
	<tr>
		<td>     
			<input type="button" onclick="searchLocations()" value="Zoek Groothandels"/>
		</td>
		<td>
		</td>
		</tr>
</table>
</font>
</div> 
<div id="map" style="overflow: hidden; width:400px; height:400px"><br>
<div id="locationSelect" style="overflow: auto; height: 200px; font-size: 11px; color: #000; width: 400px"></div></div> 
<div><select id="locationSelect" style="width:100%;visibility:hidden"></select></div> 
</body> 
</html>

Helaas werkt de route beschrijving nog niet.
DirectionService is niet gedefineerd..

Tha Devil · 11 nov 2010

Bovenaan dit nog meegeven:
[js]
//Regel 14
var directionsService = new google.maps.DirectionsService();
[/js]

exotic · 11 nov 2010

Dan zit ik nu met het volgende probleem:
[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]

Het script weet niet wat de destination is..?

Tha Devil · 11 nov 2010

Zoals aangegeven moet je als parameter bij de functie calcRoute() een eindpunt meegeven.

Die komt vanuit de marker dus zul je aan de functie mee moeten geven op regel 93 (var html = ...)

exotic · 11 nov 2010

[JS]function createMarker(latlng, name, address, telefoon, fax, email, website) {
var html = "" + name + " " + address + " " + telefoon + " " + fax + " " + website + " " + email + " <a href='#' onclick='calcRoute()'>routebeschrijving</a>";
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}

function calcRoute(address) {
var start = document.getElementById('addressInput').value;
var address = " + address + ";
var request =
{
origin:start,
destination:address,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
} else {
alert(status);
}
});
} [/JS]

Ik heb vanalles geprobeerd.. maar niets helpt.. ik krijg een popup melding met NOT_FOUND

Tha Devil · 11 nov 2010

[js]
function createMarker(latlng, name, address, telefoon, fax, email, website) {
var html = '

'+ name +' 
'+ address +' 
 
'+ telefoon +' 
'+ fax +' 
 
'+ website +' 
'+ email +' 
 
<a href="#" onclick="calcRoute('+ latlng +')">routebeschrijving</a>
';
var marker = new google.maps.Marker({
map: map,
position: latlng
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
[/js]
Zo dan?

exotic · 11 nov 2010

Op deze manier word de map niet geladen..
Nee, dat word m niet

Wel vaag...

( BTW: Thanks voor de moeite! )

Tha Devil · 11 nov 2010

Welke foutmelding krijg je?

exotic · 11 nov 2010

Ik krijg geen foutmelding.. ik krijg allen het invoerveld van postcode/woonplaats en de straal en Groothandel zoeken.

meer niet

Tha Devil · 11 nov 2010

Welke browser gebruik je? Firefox? Download dan de extentie Firebug zodat je beter JS kunt debuggen.

Heb je een output van je phpsqlsearch_genxml.php welke ik kan gebruiken om te testen? (Oftewel data die dat bestand genereert)

exotic · 11 nov 2010

Ik wil best een link neerzetten, maar wil niet dat andere gebruikers mijn domeinadres verkrijgen :$
(ik kan de link niet via PM sturen)

[JS]function searchLocations() {
var address = document.getElementById("addressInput").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
searchLocationsNear(results[0].geometry.location);
} else {
alert(address + ' not found');
}
});
} [/JS]

deze geeft de popup NOT FOUND op de site als ik routebeschrijving aan klik..

Tha Devil · 11 nov 2010

thadevil@helpmij.nl

exotic · 11 nov 2010

Ik heb je gemaild..

Tha Devil · 11 nov 2010

De inhoud van je XML-generatie wordt als PHP behandelt omdat je boven

Code:

<?xml version="1.0"?>

hebt staan.
Haal dat eens weg en zet bovenaan het bestand

PHP:

header ("content-type: text/xml");

exotic · 11 nov 2010

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

??

Ik bedoel er valt weinig aan te passen..

PHP:

<?xml version="1.0"?>

staat er als [JS]$dom = new DOMDocument("1.0");[/JS]

Tha Devil · 11 nov 2010

Hmm hij kan best werken, ik kreeg in ieder geval een melding.
Maar dat was niet het probleem kwam ik achter.

Ik zal thuis eens even kijken of ik er wat van kan maken.
Ik heb het idee dat er veel code tussen zit welke onnodig is.

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