Zur Navigation

Karte mit Stecknadel versehen

1 Isabell (Gast)


guten Tag Jörg

nun habe ich wieder ein Problem, welches sich selbst nicht lösen kann.

Ich möchte eine Karte mithilfe von Google Maps erstellen und diese Karte mit dem OpenStreetMap-Layer versehen.
Mithilfe des Beispiels von http://wiki.openstreetmap.org/wiki/Google_Maps_Example habe ich das auch geschafft.
Siehe hier: http://www.erdbeertorte.lima-city.de/Karte//osm.html

nun möchte ich diese Karte aber mit einer Stecknadel bzw. einem Marker wie zum Beispiel bei http://www.erdbeertorte.lima-city.de/Karte/ versehen, aber was ich auch probiert habe, es hat nicht funktioniert.

Eigentlich wollte ich mein Problem im Forum von openstreetmap ( http://forum.openstreetmap.org/viewforum.php?id=14 ) veröffentlichen, aber irgendwie finde ich dort nichts, wo ich mich in diesem Forum anmelden kann.
Daher ruht meine Hoffnung auf dir.

Vielen Dank schonmal für deine Antwort

viele Grüße, Isabell

21.09.2013 15:42

3 Jörg

Die Beispielkarte könntest du ja als Ausgangspunkt nehmen und an deine Anforderungen anpassen (sofern der Code frei verwendet werden kann)

Wobei der Code unvollständig ist:

document.getElementById("sidebar").innerHTML = sidebar_html;

Das setzt noch ein HTML-Element mit der ID "sidebar" voraus

------------------------------------------------------------------------------------------------------------------------------------------
Edit:
Die Seite www.erdbeertorte.lima-city.de/Karte/Beispiel.html verwendet die Google-API überhaupt nicht?!
------------------------------------------------------------------------------------------------------------------------------------------

Da auf wiki.openstreetmap.org/wiki/Google_Maps_Example die Google-Maps-API verwendet wird, kannst du aber auch die entsprechende Dokumentation zurate ziehen (und den dortigen Beispiel-Code als Ausgangspunkt nehmen), dort ist das eigentlich recht gut erklärt, wie man Markierungen (marker) setzt:

https://developers.google.com/maps/documentation/javascript/overlays?hl=de#Markers

21.09.2013 17:04 | geändert: 21.09.2013 17:13

4 Isabell (Gast)

Hallo Jörg

danke schon mal für deine Antwort.
Wenn ich bei der GoogleMaps mit dem osm-Layout den Code

    var marker = new google.maps.Marker({
        position: latlng, 
        map: map,
        title:"Praxis"
    });   
einfüge, der den Marker setzt, dann funktioniert gar nichts mehr.

Das zuletzt verlinkte Beispiel verwendet nicht die GoogleMaps-Api. Dieses Beispiel habe ich nur verlinkt, weil dort eine Markierung vorhanden ist. Ich habe aber keinen Erfolg gehabt, den Code für die Markierung in meine gewünschte Seite einzufügen.

Du weißt dann also auch keinen Rat, oder wie?

21.09.2013 19:47

5 Jörg

Ich gehe mal von dem JavaScript-Code auf www.erdbeertorte.lima-city.de/Karte//osm.html aus - den würde ich folgendermaßen erweitern:

  var element = document.getElementById("map_canvas");
  var map = new google.maps.Map(element, {
      center: new google.maps.LatLng(49.482099, 9.899858),
      zoom: 15, 
      mapTypeId: "OSM",
      mapTypeControl: false,
      streetViewControl: false
  }); 
  map.mapTypes.set("OSM", new google.maps.ImageMapType({
      getTileUrl: function(coord, zoom) {
          return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
      },  
      tileSize: new google.maps.Size(256, 256),
      name: "OpenStreetMap",
      maxZoom: 18
  }));

  // Koordinaten des Markers:
  var myLatlng = new google.maps.LatLng(49.482099, 9.899858);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: "Text, der bei Mouse-Hover erscheinen soll"
  });

21.09.2013 19:58

6 Isabell (Gast)

Hallo Jörg

ich habe deine Ergänzung eingefügt und nun wird der Marker angezeigt. Ich bin begeistert! Du bist wirklich ein absoluter Experte! Und vielen vielen Dank, dass du mir geholfen hast! Ich danke dir wirklich sehr.
Ein schönes Wochenende wünsche ich dir noch und nochmals danke

viele Grüße, Isabell

21.09.2013 21:08

Beitrag schreiben (als Gast)





[BBCode-Hilfe]