Polygone aktivier und deaktiverbar und selektion übernehmen - Google Maps Api

[dwex]

Hallo Leute,

ich habe eine Aufgabe bekommen an der ich mir den Kopf zerbreche.
Kurz zu mir - ich bin ziemlich fit in PHP aber JavaScript ist für mich noch immer ein rotes Tuch.
Ich habe vor einiger Zeit (2 Jahre) einmal über Gmapper die Ausgabe einer Filialsuche mit Fähnchen und Text realisiert.

Jetzt soll ich folgendes machen:

1. integration Der Google Maps Api - Karte in einen Bestellprozess
2. PLZ-Gebiete sollen selektierbar und deselektierbar sein.
3. Die PLZ-Gebiete habe ich jeweils als KML-Datei (als Polygon)
4. Die Gebiete sollen wenn sie nicht (per Mausklick) aktiviert wurden unsichtbar sein und wenn diese aktiviert wurden sollen diese sichtbar werden.
5. Die selektion soll anschließend weiterverarbeitet werden können.

Ein Beispiel findet ihr unter https://ps1.mailingfactory.de/PostwurfFrontend/
Gebt dort bitte auf der ersten Seite eine PLZ ein und wählt ein Gewicht und klickt auf "weiter".
Dort erscheint eine Karte in der man die andere PLZ anklicken (und damit selektieren/deselektieren kann) und dann anschliessen über den Link oben links an der Karte kann man dann die Selektion zur weiterverarbeitung übergeben.

Hat jemand eine Idee wie ich das realisieren könnte?
Die API von der Post liefert mir nur die KML-Dateien und die jeweiligen Informationen - nicht jedoch die Funktionalität der Karte.

Vielen Dank für eure Hilfe im voraus.

 

[abuzze]

Die KML-Dateien, kannst du etwas mehr ins Detail gehen?

Hast du für jedes PLZ-Polygon eine eigene KML-Datei verfügbar?

 

[dwex]

Ja ich habe für jede PLZ eine Kml- Datei. Diese sind genau (und komplex) weil direkt von der Post geliefert.

 

[abuzze]

Das sollte dann recht einfach zu machen sein.

Angenommen eine Map, erstmal ohne Layer.

Der User klickt auf die Map, du ermittelst per Geocoding die PLZ.

Jetzt, wo du die PLZ weisst, brauchst du nur noch den Layer einbinden.

Die erzeugten Layer speicherst du in einem Object ab, a'la

//beim laden der Seite
Layers={};

//.....beim anclicken der Map, geocoding ist erfolgt, PLZ ist verfügbar, z.B. 12345:
//wenn Layer nicht vorhanden, erzeugen
if(typeof Layers[12345]=='undefined')
{
   Layers[12345]=new google.maps.KmlLayer('http://example.org/12345.kml');
}
//Anzeige des Layers togglen
Layers[12345].setMap((Layers[12345].getMap())?null:mapObject)

Sind eigentlich nur ein paar Zeilen, das extrahieren der plz aus dem Geocode-Result ist ein wenig umständlicher.


Das Weiterverarbeiten ist auch nicht weiter kompliziert, du sammelst einfach die Label aller Layer ein, deren Map nicht null ist.

Alternativ kannst du beim Einbinden der Layer auch eine checkbox in einem Formular erzeugen(deren checked-Eigenschaft musst du dann natürlich synchron mit der Layeranzeige togglen), und sendest dies Formular dann irgendwo hin.


Hier mal eine Demo:http://jsfiddle.net/vhAkQ/

(Dort werden Marker zur PLZ angezeigt, da ich die KMLs nicht habe, der Ablauf mit KML-Layers ist nahezu identisch, du musst halt nur einen KML-Layer statt eines Markers erzeugen, wo genau ist im script vermerkt).

 

[dwex]

Das ist ja schon mal super - vielen vielen Dank erstmal dafür.

Leider habe ich noch so meine Probleme damit.

Für die Google-Maps braucht man doch auch einen API-Key - den finde ich in deinem Beispiel garnicht.

Auch habe ich es mit deinem Codebeispiel bzgl. der KML keine Erfolge erzielen können. Muss hier für jede PLZ ein eigener Aufruf rein?

Es wäre ganz nett wenn du mir weiterhelfen könntest.

 

[abuzze]

Für die Google-Maps braucht man doch auch einen API-Key - den finde ich in deinem Beispiel garnicht.

Den key benötigt man in Version3 der Maps-API nicht mehr. Du kannst ihn allerdings weiterhin verwenden, wenn du einen hast.

Auch habe ich es mit deinem Codebeispiel bzgl. der KML keine Erfolge erzielen können. Muss hier für jede PLZ ein eigener Aufruf rein?

Ein eigener Aufruf muss nicht hinein, bei jedem Klick wird nach erfolgreichem geocoding die function toggleLayer aufgerufen, wobei ihr als erstes Argument die PLZ übergeben wird.

Anhand der PLZ musst du dann die URL der KML-Datei zusammenbauen.

Ich weiss nicht, nach welchem Schema die Dateien benannt sind. Mal angenommen, sie heißen ganz simpel 12345.kml(also PLZ==Dateiname), dann müsstest du in meinem Skript diese Passage:

Layers[plz] = new google.maps.Marker({
                          position: location
                        });

hierdurch ersetzen: (Domain und Pfad musst du natürlich noch anpassen)

Layers[plz] = new google.maps.KmlLayer('http://www.example.org/path/to/'+plz+'.kml');

Mehr ist eigentlich nicht anzupassen an der Sache.

 

[dwex]

Das hatte ich auch so eingebaut.
Leider ging der Overlay nicht - Firebug hat mir den entscheidnenden Hinweis geliefert.
Mit KmlLayer wird ein JavaScript aufgerufen welches die Source zur KML übergibt.
Da ich das ganze lokal auf meinem Server getestet habe konnte das nicht funktionieren, da Google ja keinen zugriff auf meinen lokalen Server hatte.

Vielen Dank einstweilen - ich werde das ganze jetzt mal durchtesten.

So das funktioniert jetzt bestens.
Kleinere Probleme habe ich jedoch noch.

1. Die KML liefert eine Description mit - somit kann ich bei erneuten Klick auf den Layer diesen nicht mehr ausblenden. Es wird stattdessen eben eine Sprechblase mit diesen Informationen angezeigt.

Gibt es hier eine Möglichkeit das (optional) zu unterbinden und stattdessen den Layer einfach aus zu blenden?

2. In der KML Datei gibt es weitere Informationen wie z.B. die Anzahl der Haushalte in dieser PLZ kann ich die direkt über die Funtion mit auslesen oder muss ich dort einen eigenen Request bauen.
Ich würde gerne die Anzahl der Haushalte dann auch im Formular mit Anzeigen und darunter auch eine Summe abbilden.

 

[abuzze]

1. Die KML liefert eine Description mit - somit kann ich bei erneuten Klick auf den Layer diesen nicht mehr ausblenden. Es wird stattdessen eben eine Sprechblase mit diesen Informationen angezeigt.

Gibt es hier eine Möglichkeit das (optional) zu unterbinden und stattdessen den Layer einfach aus zu blenden?

Die option gibt es, übergebe beim erzeugen des KML-Layers ein zweites Argument mit folgendem Inhalt:

{suppressInfoWindows:true}

also:

Layers[plz] = new google.maps.KmlLayer('http://www.example.org/path/to/'+plz+'.kml',
                                                                             {suppressInfoWindows:true});

In der KML Datei gibt es weitere Informationen wie z.B. die Anzahl der Haushalte in dieser PLZ kann ich die direkt über die Funtion mit auslesen oder muss ich dort einen eigenen Request bauen.
Ich würde gerne die Anzahl der Haushalte dann auch im Formular mit Anzeigen und darunter auch eine Summe abbilden.

Das kommt drauf an, wo diese Infos stehen. Über die Maps-API kann man auf die META-Daten author,description,name und snippet zugreifen, sobald der Layer fertiggeladen ist.

 

[dwex]

abuzze du bist echt fit in dem Thema - vielen Dank für deine Hilfe ohne dich wäre ich aufgeschmissen.

Das mit suppressInfoWindows funktioniert jedoch verschwindet der Layer trotzdem nicht wenn man ihn anklickt.

Auf einen weiteren Punkt, welcher für mich eigentlich extrem wichtig ist, bin ich gerade auch noch gekommen. Bei der Karten sollten wie im Beispiel unter https://ps1.mailingfactory.de/PostwurfFrontend/ die PLZ-Grenzen sowie die PLZ selbst bereits eingedruckt sein sodass man auch sieht wo die Grenzen verlaufen.

Hast zu hierzu auch noch eine Idee für mich?

 

[abuzze]

Das mit suppressInfoWindows funktioniert jedoch verschwindet der Layer trotzdem nicht wenn man ihn anklickt.

Füge dies nach der Erzeugung des KmlLayers ein:

google.maps.event.addListener(Layers[plz], 'click', function() 
{ toggleLayer(plz)});

Auf einen weiteren Punkt, welcher für mich eigentlich extrem wichtig ist, bin ich gerade auch noch gekommen. Bei der Karten sollten wie im Beispiel unter https://ps1.mailingfactory.de/PostwurfFrontend/ die PLZ-Grenzen sowie die PLZ selbst bereits eingedruckt sein sodass man auch sieht wo die Grenzen verlaufen.

Hast zu hierzu auch noch eine Idee für mich?

Das liesse sich einfacher beantworten, wenn man mal eines der KML-files sehen könnte.