Google API
Ik wil graag onderstaande op mijn site implementeren
http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/draggable-markers.html
Nu wil ik dat de output na het slepen van een marker de postcode is en dat deze waarde dan in een hidden text field in mijn html formulier erbij komt te staan.
Heeft iemand een idee hoe dit te bereiken?
Hier staan de files
http://gmaps-samples-v3.googlecode.com/svn/trunk/draggable-markers/
Dank alvast..
Wat lukt er niet: Ik weet niet waar ik moet beginnen..
Ik heb de documentatie van google doorgelezen maar ik kom hier niet echt wijs uit.
Deze functie zorgt er volgens mij voor dat het adres wordt opgehaald.
Code (php)
1
2
3
2
3
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
document.getElementById('address').innerHTML = str;
}
De output hiervan is het volledige adres. Ik wil hier graag alleen de postcode van hebben maar vraag me echt af hoe ik dit moet doen zonder kennis van javascript.
Daarnaast, als hij de juiste output geeft, dan wil ik de waarde in een text field plaatsen om er vervolgens wat SQL queries mee uit te voeren. Het SQL stuk is al wel klaar.
Ik vraag niet of jullie het helemaal voor mij willen bouwen (zou wel fijn zijn ;) maar ik zie daarentegen ook heel weinig info op het net over reverse geocoding.
Gewijzigd op 26/04/2012 16:07:25 door N K
Daar staat: updateMarkerAddress(responses[0].formatted_address);
responses[0] geeft je een object vol adres-gegevens.
Vlug even een functie geschreven die in dat object vist naar een gegeven met type = 'postal_code'; in plaats van .formatted_address te gebruiken
(voor het gemak copy/paste ik alles)
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
120
121
122
123
124
125
126
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
120
121
122
123
124
125
126
<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">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
var postal_code = addresComponent('postal_code', responses[0])
if (postal_code) {
updateMarkerAddress(postal_code);
}
else {
updateMarkerAddress('Geen postcode gevonden');
}
}
else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
/**
* 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 '';
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(53, 6);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Postcode:</b>
<div id="address"></div>
</div>
</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">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
var postal_code = addresComponent('postal_code', responses[0])
if (postal_code) {
updateMarkerAddress(postal_code);
}
else {
updateMarkerAddress('Geen postcode gevonden');
}
}
else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
/**
* 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 '';
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(53, 6);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<style>
#mapCanvas {
width: 500px;
height: 400px;
float: left;
}
#infoPanel {
float: left;
margin-left: 10px;
}
#infoPanel div {
margin-bottom: 5px;
}
</style>
<div id="mapCanvas"></div>
<div id="infoPanel">
<b>Marker status:</b>
<div id="markerStatus"><i>Click and drag the marker.</i></div>
<b>Current position:</b>
<div id="info"></div>
<b>Postcode:</b>
<div id="address"></div>
</div>
</body>
</html>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].address_components[responses[0].address_components.length-1].short_name);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
?>
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].address_components[responses[0].address_components.length-1].short_name);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
?>
Wel ja, ik zag (in Firebug) dat het aantal compontnten verschilt per land (ik ben Belg).
Dan heb ik maar een generieke functie geschreven waarin je kan vissen naar componenten.
Dan kan je ook zoiets doen als:
(getest)
Code (php)
1
2
3
4
2
3
4
var address = addresComponent('route', responses[0]).toString()
+ ' ' + addresComponent('street_number', responses[0]).toString()
+ ', ' + addresComponent('postal_code', responses[0]).toString()
+ ' ' + addresComponent('administrative_area_level_1', responses[0]).toString();
+ ' ' + addresComponent('street_number', responses[0]).toString()
+ ', ' + addresComponent('postal_code', responses[0]).toString()
+ ' ' + addresComponent('administrative_area_level_1', responses[0]).toString();
Gewijzigd op 26/04/2012 17:01:36 door Kris Peeters
Dit is echt precies wat ik wilde.
Nu nog deze output in een input field weten te krijgen maar ik denk dat ik dat wel zelf voor elkaar krijg vanavond.
thanx!
N K op 26/04/2012 17:36:37:
...
Nu nog deze output in een input field weten te krijgen ...
Nu nog deze output in een input field weten te krijgen ...
Dan moet je er op letten dat je .innerHTML moet vervangen door .value
Ik maak ook gebruik van een andere API (pro6pp) om de omliggende postcodes te bepalen.
Nu ik zo deze oplossing bekijk van google lijkt het me natuurlijk het mooist om alleen deze API te gebruiken voor hetgeen wat ik wil. Scheelt me weer een afhankelijkheid..
Is het voor jullie ook makkelijk te maken om een range functie toe te voegen en de output (alle postcodes in die range) in een array te laten zien?
Ik besef me nu dat ik wel wat veel vraag maar jullie waren zo snel....
Ik geef nu een postcode en een range op. (range kan een variabele straal zijn van 1 tot 100 km) Nu heb ik het zo dat PRO6PP voor mij de omliggende postcodes berekend aan de hand van mijn doorgestuurde postcode en op basis daarvan mij de omliggende postcodes hiervan teruggeeft (berekening is op basis van latitude en longitude coordinaten) . Deze plaats ik vervolgens in een array en stuur ze allemaal in een WHERE IN statement naar de database om vervolgens de resultaten in een tabel te plaatsen.
Google zou dit m.i. ook moeten kunnen, is het niet?
Gewijzigd op 26/04/2012 20:34:30 door N K
Zeker als je zelf wiskundig aangelegd bent, kan je heel mooie dingen realiseren.
bv. om een perimeter te berekenen rond een punt ... basically kan je de stelling van Pytagoras in je WHERE clausule zetten.
Google Maps api kan ook de exacte afstand meten tussen twee punten, rekening houdend met de kromming van de aarde (dat bespaart je berekeningen).
Je kan echt van alles.
Er is wel een voorwaarde: je moet de map gebruiken; je kan/mag niet zomaar hun api gebruiken zonder de map er bij te betrekken
Als er iets specifiek is, laat maar weten.
Gewijzigd op 26/04/2012 20:48:09 door Kris Peeters
Onderstaand lijkt me een copy-paste verhaal maar na gisteravond tot in de vroege uurtjes te zijn bezig geweest: Ik krijg het niet voor elkaar.. Ik heb een html slider gemaakt die nu hetzelfde doet maar onderstaande lijkt me veel intuitiever.
https://developers.google.com/maps/articles/mvcfun?hl=nl-NL
Ik zou dit willen integreren in bovenstaande code van Kris. Het zou er dan zo uit komen te zien en een max. straal van 100 km. moeten hebben:
https://google-developers.appspot.com/maps/articles/mvcfun/step6?hl=nl-NL
Ik heb als output de distance waarde nodig in meters van de range en 1 postcode waar de marker op staat (zie bovenstaande code, deze is er al).
Ik kan echt niet inschatten hoeveel tijd dit kost voor iemand met javascript kennis maar ben wel bereid om een vergoeding ervoor te geven.
Ik hoor het graag.
Ik PM je verder.