locatie toevoegen
Sinds ik niet echt een categorie vind waar mijn vraag/probleem bijhoort zet ik het hier neer omdat ik denk dat het hier het dichtst tegen aanleunt. Nu ik ben met een project bezig. Ik ben namelijk een diepzeeduik-community aan het maken. De gebruiker kan duiken planen, verslagen maken, duiklocaties maken, enzovoort...
Om een duik te plannen heb ik uiteraard een duiklocatie nodig, maar voor deze duiklocatie heb ik ook een gemeente, land en eventueel latitude en longitude nodig.
Nu hier is mijn probleem: als de gebruiker een duiklocatie moet toevoegen moet hij ook kunnen zeggen waar deze duiklocatie zich bevindt uiteraard. Dit moet zo gebruikersvriendelijk kunnen gebeuren. Ook moet de gebruiker kunnen zien in welke gemeente/zone de duiklocatie zich bevind als hij/zij door de duiklocaties bladert.
Ik dacht eerst om met een database te werken met een tabel met alle gemeentes in van over heel de wereld maar om dit te krijgen is nogal moeilijk.
Enig idee?
Alvast bedankt,
Bart
No One op 11/01/2013 09:27:33:
...met google maps ...
Ja. Zou ik ook doen.
---
Diepzeeduiken ...
Dat klinkt alsof die locaties ook buiten België kunnen komen. Is dit het geval?
Het punt is juist dat Adressen anders geformatteerd zijn in verschillende landen; Google Maps houdt daar rekening mee, dus moet je soms per land een aantal andere variabelen aanspreken.
Verder wil ik daarbij wel wel tonen hoe het kan.
Interesse?
3 bestanden, in de zelfde map. je kan dit letterlijk copy/pasten zoals het hier staat.
verzend.php (hier moet je zelf maar zien wat je van plan bent ...)
index.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="maps.js"></script>
<style>
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<fieldset>
<input id="search" placeholder="zoek adres"> <input type="button" value="ZOEK" onclick="searchAddress()">
<p>Stap 1: Vul hier een zoekadres in. Sleep eventueel de marker naar de exacte locatie. De gegevens komen in het formulier</p>
<div id="mapCanvas"></div>
</fieldset>
<form id="my_form" action="verzend.php" method="post">
<fieldset>
<p>Stap 2: verbeter eventueel de gegevens en verzend</p>
<legend>Adres - locatie</legend>
<input name="street" id="street" placeholder="Straat"><br>
<input name="nr" id="nr" placeholder="Nr."><br>
<input name="postal" id="postal" placeholder="Postcode"><br>
<input name="town" id="town" placeholder="Gemeente"><br>
<input name="land" id="land" placeholder="Land"><br>
<input name="lat" id="lat" placeholder="Breedtegraad" readonly="readonly"><br>
<input name="lng" id="lng" placeholder="Lengtegraad" readonly="readonly"><br>
<input type="submit" value="VERZEND">
</fieldset>
</form>
</body>
</html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="maps.js"></script>
<style>
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<fieldset>
<input id="search" placeholder="zoek adres"> <input type="button" value="ZOEK" onclick="searchAddress()">
<p>Stap 1: Vul hier een zoekadres in. Sleep eventueel de marker naar de exacte locatie. De gegevens komen in het formulier</p>
<div id="mapCanvas"></div>
</fieldset>
<form id="my_form" action="verzend.php" method="post">
<fieldset>
<p>Stap 2: verbeter eventueel de gegevens en verzend</p>
<legend>Adres - locatie</legend>
<input name="street" id="street" placeholder="Straat"><br>
<input name="nr" id="nr" placeholder="Nr."><br>
<input name="postal" id="postal" placeholder="Postcode"><br>
<input name="town" id="town" placeholder="Gemeente"><br>
<input name="land" id="land" placeholder="Land"><br>
<input name="lat" id="lat" placeholder="Breedtegraad" readonly="readonly"><br>
<input name="lng" id="lng" placeholder="Lengtegraad" readonly="readonly"><br>
<input type="submit" value="VERZEND">
</fieldset>
</form>
</body>
</html>
maps.js
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
var geocoder = new google.maps.Geocoder();
var map;
var marker;
function searchAddress() {
var address = document.getElementById('search').value;
geocoder.geocode({
address: address
}, function(responses) {
var pos = new google.maps.LatLng(
responses[0].geometry.location.lat(),
responses[0].geometry.location.lng()
)
map.setCenter(pos);
marker.setPosition(pos);
dragend(); // doe alsof de gebruiker aan de marker heeft gesleept
});
}
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
// Indien we hier komen, heeft de gebruiker de marker gesleept naar een locatie en heeft Google Maps iets gevonden.
// var response bevat de componenten van het eerste zoekresultaat. met functie addresComponent halen we de componenten op.
// bv:
// var postal_code = addresComponent('postal_code', responses[0]);
displayComponent2Form(responses, 'route', 'street');
displayComponent2Form(responses, 'street_number', 'nr');
displayComponent2Form(responses, 'postal_code', 'postal');
displayComponent2Form(responses, 'locality', 'town');
displayComponent2Form(responses, 'country', 'land');
// lat & lng
document.getElementById('lat').value = pos.lat().toFixed(8);
document.getElementById('lng').value = pos.lng().toFixed(8);
}
else {
// Cannot determine address at this location.
}
});
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
/**
* Displays a value to 1 <input>.
* suppresses errors if the HTML-element is undefined
*/
function displayComponent2Form(responses, maps_label, input_id) {
if (
responses
&& responses.length > 0
&& typeof document.getElementById(input_id) != 'undefined'
) {
document.getElementById(input_id).value = addresComponent(maps_label, responses[0]).toString();
}
}
/**
* geocodeResponse is een object vol adres-gegevens.
* We gaan in die gegevens vissen naar een gegeven dat overeen komt met de parameter "type".
*
* bv. type = 'postal_code' =>
* geocodeResponse.address_components[5].types[1] = 'postal_code'
* geocodeResponse.address_components[5].long_name = '8310'
*/
function addresComponent(type, geocodeResponse) {
for(var i=0; i < geocodeResponse.address_components.length; i++) {
for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) {
if (geocodeResponse.address_components[i].types[j] == type) {
return geocodeResponse.address_components[i].long_name;
}
}
}
return '';
}
/**
* Hoofd-functie. Steekt Google Maps in gang
* Zie hier naar de de settings (bv. beginsituatie)
*/
function initialize() {
var latLng = new google.maps.LatLng(51.2074079, 4.41522216); // = Antwerpen
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
position: latLng,
title: 'Sleep mij',
map: map,
draggable: true
});
// Update current position info.
//updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
// ...
});
google.maps.event.addListener(marker, 'drag', function() {
// ...
});
google.maps.event.addListener(marker, 'dragend', dragend);
}
function dragend() {
geocodePosition(marker.getPosition());
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
var map;
var marker;
function searchAddress() {
var address = document.getElementById('search').value;
geocoder.geocode({
address: address
}, function(responses) {
var pos = new google.maps.LatLng(
responses[0].geometry.location.lat(),
responses[0].geometry.location.lng()
)
map.setCenter(pos);
marker.setPosition(pos);
dragend(); // doe alsof de gebruiker aan de marker heeft gesleept
});
}
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
// Indien we hier komen, heeft de gebruiker de marker gesleept naar een locatie en heeft Google Maps iets gevonden.
// var response bevat de componenten van het eerste zoekresultaat. met functie addresComponent halen we de componenten op.
// bv:
// var postal_code = addresComponent('postal_code', responses[0]);
displayComponent2Form(responses, 'route', 'street');
displayComponent2Form(responses, 'street_number', 'nr');
displayComponent2Form(responses, 'postal_code', 'postal');
displayComponent2Form(responses, 'locality', 'town');
displayComponent2Form(responses, 'country', 'land');
// lat & lng
document.getElementById('lat').value = pos.lat().toFixed(8);
document.getElementById('lng').value = pos.lng().toFixed(8);
}
else {
// Cannot determine address at this location.
}
});
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
/**
* Displays a value to 1 <input>.
* suppresses errors if the HTML-element is undefined
*/
function displayComponent2Form(responses, maps_label, input_id) {
if (
responses
&& responses.length > 0
&& typeof document.getElementById(input_id) != 'undefined'
) {
document.getElementById(input_id).value = addresComponent(maps_label, responses[0]).toString();
}
}
/**
* geocodeResponse is een object vol adres-gegevens.
* We gaan in die gegevens vissen naar een gegeven dat overeen komt met de parameter "type".
*
* bv. type = 'postal_code' =>
* geocodeResponse.address_components[5].types[1] = 'postal_code'
* geocodeResponse.address_components[5].long_name = '8310'
*/
function addresComponent(type, geocodeResponse) {
for(var i=0; i < geocodeResponse.address_components.length; i++) {
for (var j=0; j < geocodeResponse.address_components[i].types.length; j++) {
if (geocodeResponse.address_components[i].types[j] == type) {
return geocodeResponse.address_components[i].long_name;
}
}
}
return '';
}
/**
* Hoofd-functie. Steekt Google Maps in gang
* Zie hier naar de de settings (bv. beginsituatie)
*/
function initialize() {
var latLng = new google.maps.LatLng(51.2074079, 4.41522216); // = Antwerpen
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
position: latLng,
title: 'Sleep mij',
map: map,
draggable: true
});
// Update current position info.
//updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
// ...
});
google.maps.event.addListener(marker, 'drag', function() {
// ...
});
google.maps.event.addListener(marker, 'dragend', dragend);
}
function dragend() {
geocodePosition(marker.getPosition());
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
--------------
EDIT:
Bart De Kimpe op 11/01/2013 12:23:06:
En een duiklocatie heeft ook niet echt een adres.
Ja, ik had daar preventief al wat rekening mee gehouden.
- Het staat de gebruiker vrij het adres nog aan te passen, of zelfs uit te wissen.
Het staat jou (scripter) vrij om die <input> elementen, die je niet nodig hebt, te verwijderen.
Bart De Kimpe op 11/01/2013 12:23:06:
Ja ik dacht ook aan google maps, maar het zit zo dat in bijvoorbeeld 1 gemeente meerdere duiklocaties zijn.
Dat lijkt me geen issue te zijn.
Als de gebruiker een locatie wil toevoegen, moet ie maar zorgen dat hij 1 punt kiest.
De gebruiker kan dan meerdere keren 1 punt toevoegen.
Of dacht je zelf nog aan iets anders?
Gewijzigd op 11/01/2013 13:16:09 door Kris Peeters
Die gegevens moet je dan maar in de DB opslaan. Weet je daar raad mee?
Dit is niet anders dan een blog post of zo.
Database tabel maken met de juiste gegevens, ...
in verzend.php heb je alle gegeven van de gebruiker in $_POST.
Wanneer er locaties in de database staan, kunnen die toegevoegd worden aan de kaart waar de gebruiker zoekt
(Een icoontje, bv. van jullie logo).
Dan kan hij zien dat de locatie al bestaat. Dat kan ik nog tonen; maar zie jij eerst dat je database in orde is, en je via verzend.php de gegevens kan INSERTEN.
Gewijzigd op 11/01/2013 14:02:01 door Kris Peeters
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
if(isset($_GET['coords'])) {
$url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=".$_GET['coords']."&sensor=true";
$xml = simplexml_load_file($url,NULL, LIBXML_NOCDATA);
if(isset($_GET['debug'])) {
echo "<pre>".print_r($xml)."</pre>";
}
if($xml->status == "ZERO_RESULTS") {
echo "Geen resultaten gevonden!";
} else {
echo "<ul>";
foreach ($xml->result->address_component as $item) {
$item = (array)$item;
if($item['type'][0] == "country") {
echo "<li>Landcode:".$item['long_name']."</li>";
echo "<li>Landcode:".$item['short_name']."</li>";
break;
}
}
echo "</ul>";
}
} else {
echo "Ik heb coordinaten nodig (zoals 51.8055,4.73534), anders sta ik uit mijn neus te eten.<br />Snap je het niet? Klik eens <a href='locationcheck.php?coords=51.8055,4.73534'>hier</a>.";
}
?>
if(isset($_GET['coords'])) {
$url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=".$_GET['coords']."&sensor=true";
$xml = simplexml_load_file($url,NULL, LIBXML_NOCDATA);
if(isset($_GET['debug'])) {
echo "<pre>".print_r($xml)."</pre>";
}
if($xml->status == "ZERO_RESULTS") {
echo "Geen resultaten gevonden!";
} else {
echo "<ul>";
foreach ($xml->result->address_component as $item) {
$item = (array)$item;
if($item['type'][0] == "country") {
echo "<li>Landcode:".$item['long_name']."</li>";
echo "<li>Landcode:".$item['short_name']."</li>";
break;
}
}
echo "</ul>";
}
} else {
echo "Ik heb coordinaten nodig (zoals 51.8055,4.73534), anders sta ik uit mijn neus te eten.<br />Snap je het niet? Klik eens <a href='locationcheck.php?coords=51.8055,4.73534'>hier</a>.";
}
?>
Aanroepen met:
locationcheck.php?coords=51.8055,4.73534
Eventueel kan je er &debug=1 achter zetten voor een array met alle gegevens. Van boven naar beneden zie je de opeenvolgende gebieden waar jouw plaats bevindt (land, provincie, gemeente, plaats)
Oh ja, per IP kan je 2.000 requests per dag doen, als ik me niet vergis.
Gewijzigd op 11/01/2013 14:13:48 door - Ariën -
Mits wat kleine aanpassingen kan dat ook.
- Aar - op 11/01/2013 14:12:19:
Als je de coördinaten weet, kan je met dit script het één en ander uitzoeken:
Aanroepen met:
locationcheck.php?coords=51.8055,4.73534
Eventueel kan je er &debug=1 achter zetten voor een array met alle gegevens. Van boven naar beneden zie je de opeenvolgende gebieden waar jouw plaats bevindt (land, provincie, gemeente, plaats)
Oh ja, per IP kan je 2.000 requests per dag doen, als ik me niet vergis.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
if(isset($_GET['coords'])) {
$url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=".$_GET['coords']."&sensor=true";
$xml = simplexml_load_file($url,NULL, LIBXML_NOCDATA);
if(isset($_GET['debug'])) {
echo "<pre>".print_r($xml)."</pre>";
}
if($xml->status == "ZERO_RESULTS") {
echo "Geen resultaten gevonden!";
} else {
echo "<ul>";
foreach ($xml->result->address_component as $item) {
$item = (array)$item;
if($item['type'][0] == "country") {
echo "<li>Landcode:".$item['long_name']."</li>";
echo "<li>Landcode:".$item['short_name']."</li>";
break;
}
}
echo "</ul>";
}
} else {
echo "Ik heb coordinaten nodig (zoals 51.8055,4.73534), anders sta ik uit mijn neus te eten.<br />Snap je het niet? Klik eens <a href='locationcheck.php?coords=51.8055,4.73534'>hier</a>.";
}
?>
if(isset($_GET['coords'])) {
$url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=".$_GET['coords']."&sensor=true";
$xml = simplexml_load_file($url,NULL, LIBXML_NOCDATA);
if(isset($_GET['debug'])) {
echo "<pre>".print_r($xml)."</pre>";
}
if($xml->status == "ZERO_RESULTS") {
echo "Geen resultaten gevonden!";
} else {
echo "<ul>";
foreach ($xml->result->address_component as $item) {
$item = (array)$item;
if($item['type'][0] == "country") {
echo "<li>Landcode:".$item['long_name']."</li>";
echo "<li>Landcode:".$item['short_name']."</li>";
break;
}
}
echo "</ul>";
}
} else {
echo "Ik heb coordinaten nodig (zoals 51.8055,4.73534), anders sta ik uit mijn neus te eten.<br />Snap je het niet? Klik eens <a href='locationcheck.php?coords=51.8055,4.73534'>hier</a>.";
}
?>
Aanroepen met:
locationcheck.php?coords=51.8055,4.73534
Eventueel kan je er &debug=1 achter zetten voor een array met alle gegevens. Van boven naar beneden zie je de opeenvolgende gebieden waar jouw plaats bevindt (land, provincie, gemeente, plaats)
Oh ja, per IP kan je 2.000 requests per dag doen, als ik me niet vergis.
Als je inderdaad naar http://maps.googleapis.com/maps/api/geocode/xml?latlng=51.8055,4.73534&sensor=true gaat krijg je gegevens. Maar wat is hier de gemeente? Dat is Locality, political (dordrecht) zeker?
Toevoeging op 19/01/2013 18:44:32:
- Aar - op 11/01/2013 14:12:19:
Als je de coördinaten weet, kan je met dit script het één en ander uitzoeken:
Aanroepen met:
locationcheck.php?coords=51.8055,4.73534
Eventueel kan je er &debug=1 achter zetten voor een array met alle gegevens. Van boven naar beneden zie je de opeenvolgende gebieden waar jouw plaats bevindt (land, provincie, gemeente, plaats)
Oh ja, per IP kan je 2.000 requests per dag doen, als ik me niet vergis.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
if(isset($_GET['coords'])) {
$url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=".$_GET['coords']."&sensor=true";
$xml = simplexml_load_file($url,NULL, LIBXML_NOCDATA);
if(isset($_GET['debug'])) {
echo "<pre>".print_r($xml)."</pre>";
}
if($xml->status == "ZERO_RESULTS") {
echo "Geen resultaten gevonden!";
} else {
echo "<ul>";
foreach ($xml->result->address_component as $item) {
$item = (array)$item;
if($item['type'][0] == "country") {
echo "<li>Landcode:".$item['long_name']."</li>";
echo "<li>Landcode:".$item['short_name']."</li>";
break;
}
}
echo "</ul>";
}
} else {
echo "Ik heb coordinaten nodig (zoals 51.8055,4.73534), anders sta ik uit mijn neus te eten.<br />Snap je het niet? Klik eens <a href='locationcheck.php?coords=51.8055,4.73534'>hier</a>.";
}
?>
if(isset($_GET['coords'])) {
$url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=".$_GET['coords']."&sensor=true";
$xml = simplexml_load_file($url,NULL, LIBXML_NOCDATA);
if(isset($_GET['debug'])) {
echo "<pre>".print_r($xml)."</pre>";
}
if($xml->status == "ZERO_RESULTS") {
echo "Geen resultaten gevonden!";
} else {
echo "<ul>";
foreach ($xml->result->address_component as $item) {
$item = (array)$item;
if($item['type'][0] == "country") {
echo "<li>Landcode:".$item['long_name']."</li>";
echo "<li>Landcode:".$item['short_name']."</li>";
break;
}
}
echo "</ul>";
}
} else {
echo "Ik heb coordinaten nodig (zoals 51.8055,4.73534), anders sta ik uit mijn neus te eten.<br />Snap je het niet? Klik eens <a href='locationcheck.php?coords=51.8055,4.73534'>hier</a>.";
}
?>
Aanroepen met:
locationcheck.php?coords=51.8055,4.73534
Eventueel kan je er &debug=1 achter zetten voor een array met alle gegevens. Van boven naar beneden zie je de opeenvolgende gebieden waar jouw plaats bevindt (land, provincie, gemeente, plaats)
Oh ja, per IP kan je 2.000 requests per dag doen, als ik me niet vergis.
Als je inderdaad naar http://maps.googleapis.com/maps/api/geocode/xml?latlng=51.8055,4.73534&sensor=true gaat krijg je gegevens. Maar wat is hier de gemeente? Dat is Locality, political (dordrecht) zeker?