✔ Google Maps "ReverseGeocoding"-Bsp. auf mehrere Maps anwenden

J

jbender

Grünschnabel
Hallo,

ich möchte das Bsp. über Reverse Geocoding auf meine Seite anwenden, die jedoch im Gegensatz zum Bsp. mehrere Maps enthält. (Jede Map zeigt eine andere Location an.)
Dieses Bsp. habe ich daher ausgesucht, weil ich folg. Funktionalitäten nützlich fand:
- Event-handler GEvent.addListener checkt evtl. Klicks auf eine best. Map und öffnet in dieser Map ein Info-Window "openInfoWindowHtml()"
- Info-Window enthält (human-readable) Adressen (reversely geocoded aus der geklickten Location/Geocode)

Mein Problem als Anfänger ist, wie ich das Bsp. auf meinen Fall (mehrere Maps) übertragen kann:
Benötige ich ein Array von map-Variablen, wie z.B.
Code: 
var maps=new Array(map1, map2, ...);
?
Und wie müssen dann die Funktionen "getAddress()" und "showAddress()" geändert werden, die ja nur mit einer Var. map arbeiten?

Vielen Dank schon mal für eure Hilfe!
Jonathan
 
Moin,

dies Beispiel(wie eigentlich die meisten Beispiele zu Google-Maps) ist dafür ansich ungeeignet, weil es generell davon ausgeht, dass es nur 1 Map gibt.

Um es für mehrere Maps tauglich zu Machen, muss man ein wenig mit Objekten arbeiten, anders ist es da kaum möglich, den Bezug zwischen Funktion und passender Map herzustellen.

Habs mal umgefummelt.

Das Skript:
Code: 
<script type="text/javascript">


    function initialize()
    {
      for(var i=0;i<arguments.length;++i)
      {
        new map(arguments[i].id,arguments[i].opts)
      }
    }
    
    
    function map(id,opts)
    { 
      
      this.map=new GMap2(document.getElementById(id));
      this.map.setCenter(new GLatLng(opts.lat,opts.lng),opts.zoom);
      this.map.setUIToDefault();
      this.geocoder = new GClientGeocoder();
      var _this=this;
      
      this.getAddress=function(overlay, latlng)
                      {
                        if (latlng != null) 
                        {
                          _this.geocoder.getLocations(latlng, _this.showAddress);
                        }
                      };
      this.showAddress=function(response) 
                      {
                        _this.map.clearOverlays();
                        if (!response || response.Status.code != 200) 
                        {
                          alert("Status Code:" + response.Status.code);
                        } 
                        else 
                        {
                          var place = response.Placemark[0];
                          var point = new GLatLng(place.Point.coordinates[1],
                                                  place.Point.coordinates[0]);
                          var marker = new GMarker(point);
                          _this.map.addOverlay(marker);
                          marker
                            .openInfoWindowHtml(
                              '<b>orig latlng:</b>' + response.name + '<br/>' + 
                              '<b>latlng:</b>' + place.Point.coordinates[1] + "," + place.Point.coordinates[0] + '<br>' +
                              '<b>Status Code:</b>' + response.Status.code + '<br>' +
                              '<b>Status Request:</b>' + response.Status.request + '<br>' +
                              '<b>Address:</b>' + place.address + '<br>' +
                              '<b>Accuracy:</b>' + place.AddressDetails.Accuracy + '<br>' +
                              '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
                        }
                      }
      
        GEvent.addListener(_this.map, "click", _this.getAddress);
    }
    </script>

Beispiel-HTML:

Code: 
<body onload="initialize({id:'paris'  ,opts:{lat:48.8580124,  lng:2.2941951,  zoom:15}},
                         {id:'rom'    ,opts:{lat:41.8907348,  lng:12.4890636, zoom:15}},
                         {id:'erkner' ,opts:{lat:52.4221579,  lng:13.753152,  zoom:15}})">
    <h4>Paris</h4>  
      <div id="paris"   style="width: 1100px; height: 250px"></div>
    <h4>Rom</h4>    
      <div id="rom"     style="width: 1100px; height: 250px"></div>
    <h4>Erkner</h4>
      <div id="erkner"  style="width: 1100px; height: 250px"></div>
  </body>

Die Funktion initialize erwartet jetzt diverse Parameter in Objektform.
Als Beispiel:
Code: 
{id:'paris'  ,opts:{lat:48.8580124,  lng:2.2941951,  zoom:15}}
  1. id:'paris'
    ...die ID der Map(<div id="paris" ....>)
  2. lat:48.8580124
    Center-Latitude
  3. lng:2.2941951
    Center-Longitude
  4. zoom:15
    Zoomfaktor

Das wars eigentlich schon, ich hoff es passt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück