Jemand Ahnung von Google Maps API - Karteneinbindung

KOENICH

KOENICH

der Monarch
Moinsen!
Ich bastel gerade an einer Website, auf der u.a. eine Umgebungskarte dargestellt werden soll.
Da ich weiß, dass Kartenhersteller wie Falk o.ä. ziemlich fix reagieren, wenn man eine der Karten kopiert (und sie auch relativ hohe Preise für eine ihrer Kartendarstellungen fordern) vbin ich auf Google Maps API gestoßen.
Damit kann man sich eben Google Maps direkt in die Website einbinden - hat damit jemand schon erfahrung? :)
Ich wühle mich gerade durch die (englischsprachige) Doku, und finde -das zum Anfang- noch nicht mal, wie ich genau den Ort angebe, der dargestellt werden soll - es scheint eine Art Längen/Breitengradsystem zu sein...
 
Der Code dazu sieht so aus:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAQ9AMArIdRzvJp9gwxlR_bhSX_192d9Kg2Cmp4uQXZNoasZ4IkxTBG2Xl_x2hbaw8F5iLGGeSn7iZTw"
      type="text/javascript"></script>
    <script type="text/javascript">

    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var center = new GLatLng(49.63545, 8.621);
        map.setCenter(center, 13);
            GDownloadUrl("data.xml", function(data, responseCode) {
              var xml = GXml.parse(data);
              var markers = xml.documentElement.getElementsByTagName("marker");
              for (var i = 0; i < markers.length; i++) {
                var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));
                map.addOverlay(new GMarker(point));
              }
            });
        var marker = new GMarker(center, {draggable: true});
        
        GEvent.addListener(marker, "dragstart", function() {
          map.closeInfoWindow();
          });
        
        GEvent.addListener(marker, "dragend", function() {
          marker.openInfoWindowHtml("Just bouncing along...");
          });
        
        map.addOverlay(marker);
        
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>
Der Eintrag Key ist nur für meine Seite gültig.

Die Angaben "49.63545, 8.621" (Länge/Breite) sind in Grad und müssen an dein Standort angepasst werden (z.B. von Google Earth).
Zusätzlich muss noch eine "data.xml"-Datei erstellt werden mit folgendem Inhalt:
HTML: 
<markers>
  <marker lat="49.63545" lng="8.621"/>
</markers>
Die musst Du, wie oben, mit deinen Koordinaten fühlen.:)
 
Vielen Dank euch :)
Ich werde leider erst am Montag dazu kommen, mich daran zu setzen - dann komm ich bestimmt mit weiteren Fragen ;)
 
KOENICH schrieb:
Vielen Dank euch ...
Zum Vergrößern anklicken....
Aber, aber... es ist nötig mich mit euch zu titulieren... Jurek reicht :angel

KOENICH schrieb:
...dann komm ich bestimmt mit weiteren Fragen ;)
Zum Vergrößern anklicken....
Du hast mich da in was reingeritten...:eek:
Je mehr ich mit diesem Zeug arbeite, desto mehr Probleme kommen zu vorschein.
Ich habe inzwischen auch Fragen . . . und lese mich durch versch. Tutorials durch. :wand

Der Zwischenstand sieht so aus: die Karte.
 
Jurek schrieb:
Aber, aber... es ist nötig mich mit euch zu titulieren... Jurek reicht :angel
Zum Vergrößern anklicken....
Äh, ich weiß auch nicht, wo ich war :D

Wie auch immer: Vielen Dank! Ich hab gerade eine Nachtschicht eingelegt und mir gleich mal ein bisschen Code von dir geklaut :angel
Bin jetzt schonmal herrlich zufrieden, Standort wird angezeigt, bei Klick drauf ne kleine Erklärung. Bei Zeiten kommt dann noch ein Bildchen dazu - das muss ich aber erst noch machen.

Den Link zu meinem Werk veröffentliche ich aber erst die Tage ;)

Gute Nacht - und nochmals danke, die Tutorials sind klasse! (y)
 
Wow,
dass es solche langen Schlüssel gibt, wußte ich gar nicht.
Da habt ihr gute Arbeit geleistet, lieber Jurek. (y)

Sowas hätte ich vor 2 Wochen brauchen können, als ich in einen falschen Zug einstieg...
Mann war das peinlich.

Aber trotzdem verschiebe ich euch drei oder mehr zu den allgemeinen Fragen. ;)
 
Jurek schrieb:
Im Webdesign wäre es besser aufgehoben (y)
Zum Vergrößern anklicken....
Erledigt :)

Die GoogleMaps-Einbindung brauchte ich natürlich deswegen: https://www.supernature-forum.de/bo...nung-lokals-cookie-and-koenich-lueneburg.html

Ich habe inzwischen auch schon beim Marker ein Bild mit rein gesetzt - allerdings hatte ich von deiner Seite den Code für den alternativen Marker geklaut
Code: 
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
Jetzt wollte ich mal schauen, wie es mit dem Standard Marker (der mit dem schwarzen Punkt) aussieht - aber irgendwie schaff ich das gerade ums Verrecken nicht...
:)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Oben