Google Maps Geocodierung

thebigjaz · 10. Nov. 2014

Hallo zusammen,

ich setze mich gerade mit der Google-Maps API auseinader
und bin an einen, für mich lösbaren Punkt angelangt.

Ziel: Eine Adresse aus einer MySQL-Datenbank mittels der API
auf einer Karte Darstellen.

Problem: Adressen können über die API nicht direkt angegeben werden,
sondern es muss erst die Geolocation bestimmt werden.

Ich habe diverse Scripte gefunden, die funktionieren, aber sobald
ich diese auf meine Bedürfnisse anpasse, klappt nichts mehr.
Meine JS Fähigkeiten sind zugegebener Maßen "absoluter Neuling".

Das Script in einer HTML-Seite:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function codeAddress() {
  var address = document.getElementById('address').value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel">
      <input id="address" type="textbox" value="Sydney, NSW">
      <input type="button" value="Geocode" onclick="codeAddress()">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

In diesem Beispiel muss man eine Adresse angeben,
diese wird dann ausgegeben. Ich möchte allerdings
die Adresse aus der Datenbank aufrufen und somit ist keine
vorherige Abfrage über ein Form nötig. Wenn ich das Form
wegreduziere, die Funktion entsprechend ändere und
zu Testzwecken eine statische Adresse angeben
(spätere Einbindung mit PHP keine Problem) läuft das Script nicht mehr..

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>

var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();

  var address = "Lüdenscheid";
  geocoder.geocode( { 'address': address}, function(results, status) {

  var latlng = new google.maps.LatLng('results[0]');
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}



google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>

    <div id="map-canvas"></div>
  </body>
</html>

Mein Lösungsansatz geht in die Richtung,
wird aber wahrscheinlich völliger Quatsch sein.

Vielen herzlich Dank im Vorraus.

Es grüßt thebigjaz

kkapsner · 12. Nov. 2014

Bei dir sollte da auf jeden Fall was in der Fehlerkonsole stehen, da du dir einen Syntaxfehler "reinreduziert" hast.

Wenn du ein funktionierendes Beispiel hast solltest du nicht versuchen alles auf ein mal wegzureduzieren, sondern das Schritt für Schritt zu vereinfachen.

Code:

var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var mapOptions = {
    zoom: 8,
    center: latlng
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  
  var address = "Lüdenscheid";
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
      alert('Geocode was not successful for the following reason: ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

PS:

thebigjaz schrieb:
für mich lösbaren Punkt angelangt

Warum löst du ihn dann nicht?

Google Maps Geocodierung

thebigjaz

New member

kkapsner

Super Moderator