Google Map API - Custom Icons & XML

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Google Map API - Custom Icons & XML

    Hallo Forum,

    so, nach laaaaanger langer Suche, probieren und tüfteln habe ich es nun nach gut 5 Tagen aufgegeben.
    Ich komme mit meienr Map nicht klar und brauche dringend hilfe.

    Und zwar geht es um Folgendes.

    Ich nutze seit kurzem für meien Website die Google Maps. Ganz easy und nicht wirklich kompliziert.

    Möchte abe rnun quasi "ausbauen" und mehr als nur einen Punkt auf der Map anzeigen Lassen und dazu das ganze noch mit eigenen Icons die je nach Kategorie des Anzuzeigendem Punkt unterschiedlich sind.....Also für Partys das Party Icon, für Konzerte das Konzerte Icon, für Märkte das Markt icon usw.

    Hier ist die Ausgangsmap:

    Quellcode

    1. var map; jQuery(document).ready(function($) {
    2. map = new GMap2(document.getElementById('map'));
    3. map.addControl(new GSmallMapControl());
    4. map.geocoder = new GClientGeocoder();
    5. lat = '48,9'.split(',')
    6. var point = new GLatLng(parseFloat(lat[0]), parseFloat(lat[1]));
    7. map.marker= new GMarker(point);
    8. map.setCenter(new GLatLng(51.286829315599924, 7.723388671875), 10);
    9. map.marker.changed = false;
    10. map.addOverlay(map.marker);
    11. map.marker.show();
    12. map.geocoder.getLatLng('STADT',
    13. function(point) { if (point) { map.checkResize(); map.setCenter(point, 10); map.marker.setPoint(point); map.marker.show(); map.marker.changed=true; }
    15. else {
    16. document.getElementById('map').style.display='none';
    17. document.getElementById('nomap').style.display='block';
    18. }});});
    Alles anzeigen


    Diese soll nun um folgende Dunktionene erweitert werden:

    1. Auslese einer XML Datei mit den Koordinaten der einztelnen Punkte
    2. Punkte haben verschiedene Kategorien wie oben beschrieben und sollen demendsprechen jeweils eigene Icons haben


    Frage ist nun, was für code muss ich wo einfügen. Ich schaffs nicht habe unzählige Seiten gewälzt und auch teilweise sachen gefunden aber nichts hat zums chlus sso funktioniert wies sollte...

    BITTE.....

    HILFE !!!!!


    Besten Dank und Grüße

    Sven

  • Na gut, das ist beides nicht schwer. Wo ist denn dein Versuch? Wo sind die Probleme?

    Custom Icons findest du hier: code.google.com/intl/de/apis/m…examples/icon-custom.html

    Quellcode

    1. // Create a base icon for all of our markers that specifies the
    2. // shadow, icon dimensions, etc.
    3. var baseIcon = new GIcon(G_DEFAULT_ICON);
    4. baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
    5. baseIcon.iconSize = new GSize(20, 34);
    6. baseIcon.shadowSize = new GSize(37, 34);
    7. baseIcon.iconAnchor = new GPoint(9, 34);
    8. baseIcon.infoWindowAnchor = new GPoint(9, 2);
    10. // Creates a marker whose info window displays the letter corresponding
    11. // to the given index.
    12. function createMarker(point, index) {
    13. // Create a lettered icon for this point using our icon class
    14. var letter = String.fromCharCode("A".charCodeAt(0) + index);
    15. var letteredIcon = new GIcon(baseIcon);
    16. letteredIcon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
    18. // Set up our GMarkerOptions object
    19. markerOptions = { icon:letteredIcon };
    20. var marker = new GMarker(point, markerOptions);
    22. GEvent.addListener(marker, "click", function() {
    23. marker.openInfoWindowHtml("Marker <b>" + letter + "</b>");
    24. });
    25. return marker;
    26. }
    Alles anzeigen


    XML Download findest du hier: code.google.com/intl/de-DE/api…ervices.html#XML_Requests

    Quellcode

    1. // Download the data in data.xml and load it on the map. The format we
    2. // expect is:
    3. // <markers>
    4. // <marker lat="37.441" lng="-122.141"/>
    5. // <marker lat="37.322" lng="-121.213"/>
    6. // </markers>
    7. GDownloadUrl("data.xml", function(data, responseCode) {
    8. var xml = GXml.parse(data);
    9. var markers = xml.documentElement.getElementsByTagName("marker");
    10. for (var i = 0; i < markers.length; i++) {
    11. var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
    12. parseFloat(markers[i].getAttribute("lng")));
    13. map.addOverlay(new GMarker(point));
    14. }
    15. });
    Alles anzeigen


    Willst du noch ein Bild im XML angeben, dann füg ein weiteres Attribut ein... "image"

  • Mein Problem ist, das ich bisher nur den Code habe den ich poben bereits angezeigt habe. UN d nicht weiss wann ich was einbinden muss um das gewüpnschte ergebnis zu bekommen. vor allem halt das einbinden eigener Icons. und diese danna uch noch verschiedener kategorien zuzuweisen. Und vor allem was ich aus dem code oben jetzt rausnehmen muss damit die neuen codes greifen....

    HTML, CSS alles kein problem, aber Das ist mir im momment noch etwas hoch^^

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von RiseUpNoX ()

  • Ok,

    Step1 du löschst deinen Code und verwendest kopierst das Beispiel mit der XML auf deine Webseite:
    code.google.com/intl/de-DE/api…xamples/xhr-requests.html

    Step2 du erweiterst die XML Datei um ein Attribut

    Quellcode

    1. <marker lat="37.322" lng="-121.213" icon="http://deinurl/maps/icon/konzert.gif" />


    Step3 du erweiterst den JavaScript Code..
    Dazu musst du das XML Beispiel ändern..
    statt map.addOverlay(new GMarker(point));
    verwende map.addOverlay(createMarker(point));

    und die createMarker musst du nach dem Beispiel etwas abwandeln.
    Den Rest musst du aber wirklich alleine hinbekommen.
    Ansonsten geh ein paar JavaScript Tutrials durch.