Enkel plaats returnen in Google maps api
Ik heb een zoekbox waarin men kan zoeken op plaatsen in Nederland. Nu wil ik als iemand bijv Amsterdam selecteert direct doorlinken naar de pagina amsterdam. Het doorlinken werkt maar enkel de stad meegegen lukt me niet.
In het object staat de plaats als variable maar ik weet niet hoe ik die kan pakken.
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
var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
administrative_area_level_3: 'long_name',
country: 'long_name',
postal_code: 'short_name'
function fillInAddress()
{
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById("autocomplete").value = '';
document.getElementById("autocomplete").disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++)
{
var addressType = place.address_components[i].types[0];
if (componentForm[addressType])
{
var val = place.address_components[i][componentForm[addressType]];
//document.getElementById("autocomplete").value = val;
console.log(val);
window.location = '/restaurant/'+ val;
}
}
}
};
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
administrative_area_level_3: 'long_name',
country: 'long_name',
postal_code: 'short_name'
function fillInAddress()
{
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById("autocomplete").value = '';
document.getElementById("autocomplete").disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++)
{
var addressType = place.address_components[i].types[0];
if (componentForm[addressType])
{
var val = place.address_components[i][componentForm[addressType]];
//document.getElementById("autocomplete").value = val;
console.log(val);
window.location = '/restaurant/'+ val;
}
}
}
};
Toevoeging op 20/10/2015 14:29:09:
Ik heb het nu werkend maar denk niet via de juiste manier. Omdfat de eerste value de plaats is return ik hem gewoon in de loop maar is dit de manier...?
zie code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
for (var i = 0; i < place.address_components.length; i++)
{
var addressType = place.address_components[i].types[0];
if (componentForm[addressType])
{
var val = place.address_components[i][componentForm[addressType]];
document.getElementById("autocomplete").value = val;
window.location = '/restaurant/'+ val;
return;
}
}
{
var addressType = place.address_components[i].types[0];
if (componentForm[addressType])
{
var val = place.address_components[i][componentForm[addressType]];
document.getElementById("autocomplete").value = val;
window.location = '/restaurant/'+ val;
return;
}
}
Als je e.e.a. handig opzet en daarbij van een JS library gebruik maakt (jQuery ofzo) dan zou dit redelijk eenvoudig realiseerbaar moeten zijn. Hoe makkelijk/moeilijk dit is hangt vaak af van hoe je je HTML-structuur van deze (dynamische) elementen opzet.
Thomas van den Heuvel op 20/10/2015 14:43:54:
Hm, je hebt toch een soort container waarin de resultaten van je zoekopdracht te zien zijn (een dropdown of soortgelijk iets). Daar zou je een click-event aan kunnen hangen?
Als je e.e.a. handig opzet en daarbij van een JS library gebruik maakt (jQuery ofzo) dan zou dit redelijk eenvoudig realiseerbaar moeten zijn. Hoe makkelijk/moeilijk dit is hangt vaak af van hoe je je HTML-structuur van deze (dynamische) elementen opzet.
Als je e.e.a. handig opzet en daarbij van een JS library gebruik maakt (jQuery ofzo) dan zou dit redelijk eenvoudig realiseerbaar moeten zijn. Hoe makkelijk/moeilijk dit is hangt vaak af van hoe je je HTML-structuur van deze (dynamische) elementen opzet.
Het doorlinken op basis van de click event is ook niet het punt. Het is puur dat ik niet weet hoe ik een variable uit het object kan halen waar die doorheen loopt. Zie het laatste stukje van me post, nu pakt die de plaats omdat die waarschijnlijk de eerste variable is in het object en ik via return dus niet verder loop anders zou die eindigen met het land en daar heb ik niets aan. Helaas pakt die nu ook soms nog het land alsof die return niet snel genoeg gaat en dat die dus toch nog even snel doorloopt en vlak voor de redirect zie je dan nog het land achter de plaats staan in de zoekbox.
Quote:
Het is puur dat ik niet weet hoe ik een variable uit het object kan halen waar die doorheen loopt.
Dat is ook niet nodig. Waar je op klikt, dat *is* het element, daar refereer je aan via $(this) of iets soortgelijkts. De HTML moet dan wel zo opgezet zijn dat elk element individueel aanspreekbaar is, dat bedoelde ik met "het handig opzetten van de HTML (van je autocomplete)".
Super simpel voorbeeld (met het dynamisch toevoegen van elementen om het gedrag van een autocomplete te simuleren):
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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>whee</title>
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
<!-- je autocomplete container -->
<div id="container">
<ul>
<li>een</li>
<li>twee</li>
<li>drie</li>
</ul>
</div>
<!-- voor het simuleren van het dynamisch toevoegen van elementen -->
<input type="text" id="text" /> <button id="button" type="button">add</button>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// Dit is voor het toevoegen van elementen, dit heb je in je uiteindelijke code niet nodig.
$('#button').click(function() {
$('#container ul').append('<li>'+$('#text').val()+'<\/li>');
});
// Dit is het click-event, in plaats van de alert gebruik je window.location uiteraard.
$('#container ul').on('click', 'li', function() {
alert($(this).html());
});
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>whee</title>
<script src="https://code.jquery.com/jquery-1.11.3.js" type="text/javascript"></script>
</head>
<body>
<!-- je autocomplete container -->
<div id="container">
<ul>
<li>een</li>
<li>twee</li>
<li>drie</li>
</ul>
</div>
<!-- voor het simuleren van het dynamisch toevoegen van elementen -->
<input type="text" id="text" /> <button id="button" type="button">add</button>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// Dit is voor het toevoegen van elementen, dit heb je in je uiteindelijke code niet nodig.
$('#button').click(function() {
$('#container ul').append('<li>'+$('#text').val()+'<\/li>');
});
// Dit is het click-event, in plaats van de alert gebruik je window.location uiteraard.
$('#container ul').on('click', 'li', function() {
alert($(this).html());
});
});
//]]>
</script>
</body>
</html>
That's it. ~5 regels JavaScript i.c.m. jQuery.
Inspecteer de source met een element inspector (onder de F12 toets in de meeste browsers). Niet via "view source" want dan zie je dus enkel de oorspronkelijke broncode, zonder data van je autocomplete.
Ik kan mij niet voorstellen dat je niet een soortement van container kunt specificeren waarbinnen de resultaten getoond worden... Stel je dit niet zelf in?
Kan het kloppen dat je niet vaak hebt gewerkt met HTML die op deze wijze dynamisch wordt toegevoegd aan je pagina?
Anders plaats een voorbeeld online want dit praat niet echt makkelijk.
En ja, als je altijd het eerste element selecteert hoef je hier niet doorheen te loopen maar een autocomplete kan meerdere resultaten hebben en dan moet je toch aangeven welk resultaat je wilt zien, of je typt vervolgens alsnog de hele locatie in, wat de toegevoegde waarde van een autocomplete een beetje teniet doet niet?
Thomas van den Heuvel op 20/10/2015 16:19:20:
Maar je ziet die resultaten toch ook op je scherm = HTML = het zit in je DOM?
Inspecteer de source met een element inspector (onder de F12 toets in de meeste browsers). Niet via "view source" want dan zie je dus enkel de oorspronkelijke broncode, zonder data van je autocomplete.
Ik kan mij niet voorstellen dat je niet een soortement van container kunt specificeren waarbinnen de resultaten getoond worden... Stel je dit niet zelf in?
Kan het kloppen dat je niet vaak hebt gewerkt met HTML die op deze wijze dynamisch wordt toegevoegd aan je pagina?
Anders plaats een voorbeeld online want dit praat niet echt makkelijk.
En ja, als je altijd het eerste element selecteert hoef je hier niet doorheen te loopen maar een autocomplete kan meerdere resultaten hebben en dan moet je toch aangeven welk resultaat je wilt zien, of je typt vervolgens alsnog de hele locatie in, wat de toegevoegde waarde van een autocomplete een beetje teniet doet niet?
Inspecteer de source met een element inspector (onder de F12 toets in de meeste browsers). Niet via "view source" want dan zie je dus enkel de oorspronkelijke broncode, zonder data van je autocomplete.
Ik kan mij niet voorstellen dat je niet een soortement van container kunt specificeren waarbinnen de resultaten getoond worden... Stel je dit niet zelf in?
Kan het kloppen dat je niet vaak hebt gewerkt met HTML die op deze wijze dynamisch wordt toegevoegd aan je pagina?
Anders plaats een voorbeeld online want dit praat niet echt makkelijk.
En ja, als je altijd het eerste element selecteert hoef je hier niet doorheen te loopen maar een autocomplete kan meerdere resultaten hebben en dan moet je toch aangeven welk resultaat je wilt zien, of je typt vervolgens alsnog de hele locatie in, wat de toegevoegde waarde van een autocomplete een beetje teniet doet niet?
Ik snap nu wat je bedoelt en dit defineer ik niet zelf maar wordt door de api gedaan maar ik kan wel zien in welke span de plaats komt, het land, de marker etc..
Hier is een voorbeeld pagina welke ik tot vanavond toegankelijk zal laten i.v.m. lokaal project: http://dierenverjager.nl
Maar in principe werkt dit al, wat is precies je doel? Iets soortgelijk (na)maken of wat?
Als dit via een API loopt zou ik ook eens kijken wat je via de API kunt doen, in plaats van een oplossing erin hacken (wat in principe niet nodig lijkt).
Thomas van den Heuvel op 20/10/2015 20:24:51:
Aan het einde van je body wordt een div bijgeschreven met class "pac-container pac-logo", hierin zitten divs met class pac-item, daar kun je je informatie -zij het wat omslachtig- wel uitpeuteren.
Maar in principe werkt dit al, wat is precies je doel? Iets soortgelijk (na)maken of wat?
Als dit via een API loopt zou ik ook eens kijken wat je via de API kunt doen, in plaats van een oplossing erin hacken (wat in principe niet nodig lijkt).
Maar in principe werkt dit al, wat is precies je doel? Iets soortgelijk (na)maken of wat?
Als dit via een API loopt zou ik ook eens kijken wat je via de API kunt doen, in plaats van een oplossing erin hacken (wat in principe niet nodig lijkt).
Ja het werkt prima nu maar niet zoals het volgens het boekje moet. Ik return nu gewoon in de loop omdatik weet dat het eerste resultaat de plaats is maar ik weet niet hoe ik zonder de loop de plaats kan returnen/uitlezen.. Iets van value.city zou ideaal zijn maar ik kom er niet uit, ook niet via de api, daar wordt de code die ik gebruik gegeven.