Map geocoder mit js - Problem mit Links

rernanded

rernanded

Erfahrenes Mitglied
Hi

beim Code unten habe ich das Problem, dass beim Anklicken der 10 Beispielsstrassen immer nur die erste(hier: AACHENER STRASSE OBERHAUSEN) gesucht, gefunden und auf der Karte angezeigt wird, egal welchen Link ich auch anklicke.
Wo liegt der Fehler?

MONI

HTML: 
<html>
<head>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" language="JavaScript">
<!--

  var geocoder;
  var map;
  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(51.4754217,6.8440413);
    var myOptions = {
      zoom: 12,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function codeAddress() {
    var address = document.getElementById("address").value;
    address = address + " ";
    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);
      }
    });
  }



function SetzeFocus() {
  // ID hier eintragen
  var ElementID = "Address";
  document.getElementById(ElementID).style.backgroundColor = "#FFE6FF";
  document.getElementById(ElementID).focus();
}

setTimeout("SetzeFocus()",6000);

function ReloadDoc()
{
location.reload(true);
}

//-->
</script>



</head>
<body onload="initialize()">
  
<div>
<pre>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="AACHENER STRASSE OBERHAUSEN"></a>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="ACKERFELDSTRASSE OBERHAUSEN"></a>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="ACKERSTRASSE OBERHAUSEN"></a>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="ADOLFSTRASSE OBERHAUSEN"></a>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="AHORNSTRASSE OBERHAUSEN"></a>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="AKAZIENSTRASSE OBERHAUSEN"></a>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="AKTIENSTRASSE OBERHAUSEN"></a>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="ALBERTSTRASSE OBERHAUSEN"></a>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="ALBRECHTSTRASSE OBERHAUSEN"></a>
<a href="#karte"><input type="submit" class="button_straSSe_liste" id="address" onclick="codeAddress()" name="mein-o-straSSe" value="ALDEKAMP OBERHAUSEN"></a>
</pre>
</div>

<div id="map_canvas"></div>
<a name="karte"></a>
</body>
</html>
 
Das beschriebene Fehlverhalten resultiert aus dem mehrfach vergebenen ID-Bezeichner #address, der im HTML-Dokumentbaum aber eindeutig sein muß, darin nur einmalig vorkommen darf.
 
Zuletzt bearbeitet:
spicelab hat gesagt.:
Das beschriebene Fehlverhalten resultiert aus dem mehrfach vergebenen ID-Bezeichner #address, der im HTML-Dokumentbaum aber eindeutig sein muß, darin nur einmalig vorkommen darf.
Zum Vergrößern anklicken....

Danke Dir spicelab, da hätt ich eigentlich auch selbst drauf kommen können.

Hast Du auch eine Lösung? ich möchte die Straßenliste beibehalten und per Klick die Straße in das input mit der id="address" übertragen, aber auch sofort suchen lassen ohne nochmals ev. auf ein submit-Button klicken zu müssen.

MONI
 
Übergeb den Wert als argument an codeAddress()
Code: 
<input type="button" onclick="codeAddress(this.value)" value="AACHENER STRASSE OBERHAUSEN"/>

In der Funktion benutze es dann:
Code: 
  function codeAddress(address) {
    
    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);
      }
    });
  }
 
Hi abuzze,

funktioniert einwandfrei wie gewünscht, sehr danke.

MONI




abuzze hat gesagt.:
Übergeb den Wert als argument an codeAddress()
Code: 
<input type="button" onclick="codeAddress(this.value)" value="AACHENER STRASSE OBERHAUSEN"/>

In der Funktion benutze es dann:
Code: 
  function codeAddress(address) {
    
    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);
      }
    });
  }
Zum Vergrößern anklicken....
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück