Wkunl

Hoe te geocoderen een adres in google maps javascript

Google maps is een van de meest krachtige tools die vandaag beschikbaar zijn voor de dynamische kaart creatie en manipulatie. Er zijn bijna onbeperkt toepassingen voor Google Maps, en een goede startplaats op uw weg naar een goede website is het uitzoeken hoe je een locatie op de kaart van een eenvoudig adres krijgen. Volg de onderstaande stappen en je zult goed op uw manier aan het creëren van een intuïtieve, interactieve webpagina met behulp van Google javascript map API. Elke stap hier toont u een screenshot met de exacte code toegevoegd in die stap, je kunt op elke screenshot om het te vergroten.

Stappen

Hoe te geocoderen een adres in google maps javascript. Begin met een webpagina die u een google javascript api map te hebben toegevoegd.
Hoe te geocoderen een adres in google maps javascript. Begin met een webpagina die u een google javascript api map te hebben toegevoegd.
  1. 1
    Begin met een webpagina die u een google javascript api map te hebben toegevoegd.
  2. 2
    Maak een tekstvak input voor de gebruiker om het adres in te voeren.
    Adres: <input type="text" id="inputTextAddress" style=" width:200px" title="Address te geocode" />
  3. 3
    Maak een knop input voor de gebruiker te klikken om geocoderen het adres.
    <input type="button" id="inputButtonGeocode" style="width:150px" title="Click te geocode" value="Click te Geocode" />
  4. 4
    Verklaren een variabele buiten de initialize-functie, zodat het beschikbaar is in geen javascript code, zal dit de geocoderen klasse object op te slaan.
    var geocoder;
  5. 5
    Stel de geocoder variabele gelijk is aan een instantie van de google maps geocoder klasse als nieuwe google maps geocoder () in de initialize ()-functie.
    geocoder = new google.maps.Geocoder ();
  6. 6
    Voeg een tweede functie om uw javascript code, noem het codeaddress. Het zal geen waarden doorgegeven aan het.
    functie codeAddress () {}
  7. 7
    Zorg ervoor dat de eerste regel van de functie gebruikt getElementById om het adres te krijgen van het tekstvak en plaats deze in een variabele we saddress noemen.
    var sAddress = document.getElementById ("inputTextAddress") waarde.;
  8. 8
    Bel de geocoderen methode van de geocoder object, zullen deze twee doorrekeningen in parameters te nemen. De eerste is de GeocoderRequest, dit zegt wat voor soort verzoek wordt gedaan en wat het verzoek waarde is. De tweede is de callback functie die wordt gebruikt om de resultaten te verwerken.
    geocoder.geocode ({'adres': sAddress}, functie (resultaten, status) {});
  9. 9
    De callback functie moet eerst de status waarde van de callback functie. Gebruik een IF statement om het resultaat te testen, controleren om te zien of de status gelijk google.maps.GeocoderStatus.OK zien. Voeg ook een ELSE-clausule aan het IF statement ook.
    if (toestand == google.maps.GeocoderStatus.OK) {
    else {
    }
  10. 10
    Als de status gelijk is ok, bel de setcenter methode van de kaart object variabele. U zult deze methode doorgeven aan eerste geometrie locatie het resultaat te krijgen.
    map.setCenter (resultaten [0] geometry.location.);
  11. 11
    Vervolgens gebruikt u hetzelfde resultaat geometrie locatie om een kaart markering toe te voegen aan de kaart object variabele. Maak een nieuwe variabele - we zullen het oMarker noemen - het zal worden opgericht als een nieuw google.maps.Marker. De nieuwe methode heeft twee parameters, de eerste is de kaart waar u het toevoegen van de marker aan, en de tweede is de positie van de markering, die weer is de eerste resultaten geometrie locatie te plaatsen.
    var marker = new google.maps.Marker ({
    positie:. resultaten [0] geometry.location
    });
  12. 12
    Tot slot gaan we een waarschuwing toe te voegen aan de ELSE om de gebruiker te laten weten dat de geocoderen niet werkt zoals het zou moeten hebben. U kunt de status gebruiken om wat meer informatie te geven in plaats van alleen te zeggen dat het niet werkte.
    alert ("Geocode was niet succesvol om de volgende reden:" + status);
  13. 13
    U kunt nu geven het een gaan! Typ een adres, of gewoon een en staat, of zelfs iets eenvoudigs als een state naam! Je verlaat de kaart zien bewegen naar de nieuwe locatie en voeg een marker op de kaart!
    De live-pagina voor dit voorbeeld kan worden bekeken en gebruikt worden via een link van de bronnen en citaten omgeving als je naar beneden scrollen!

Tips

  • Als u een foutmelding krijgt, gebruiken console.log in combinatie met uw favoriete javascript debugger (zoals Firebug) als een manier om je javascript debuggen.
    • Als alternatief kunt u dit doen. Als je een fout, plaats alert ("") krijgen; berichten in uw javascript zodat je kunt zien hoe ver de code krijgt voordat erroring.
  • Javascript is hoofdlettergevoelig, dus bewust van typefouten en opmaak.
  • Javascript fouten kan heel ongrijpbaar. Hebben een vriend / collega uitchecken code die niet zal werken - vele malen een nieuw paar ogen is precies wat nodig is....

Waarschuwingen

  • Zorg ervoor dat u met behulp van Google Maps de manier waarop het bedoeld was door het controleren van hun gebruiksvoorwaarden.

Dingen die je nodig hebt

  • Webpagina met Google Maps api kaart geactiveerd
  • Javascript basiskennis