martinli: Google Maps API

SELF-Forum

Google Maps API

martinli
– Informationen zu den Bewertungsregeln

Hallo,
Ich habe angefangen mal ein wenig mit Google Maps API zu programmieren. Aber schon bei der Suche nach guter Dokumentation bin ich leider nicht sehr weit bekommen. Klar, auf deutsch ist noch kaum etwas vorhanden.
Aber auch auf englisch kann ich kaum etwas finden.

Was ist machen möchte ist mehrere "GPS"-Positionen miteinander zu einer Linie verbinden. Nennt sich Polyline, soweit bin ich schon gekommen. Ich hab auch Ansätze dazu im Internet gefunden. Aber meist wenn da eine Erklärung ist, dann tauchen im quelltext keine GPS-Positionen auf.

Ein zusammengeschnittener Quelltext, der aber leider nicht ganz vollständig funktioniert ist folgender:

<!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"
xmlns:v="urn:schemas-microsoft-com:vml">
  <head>

<title>Google Map</title>
    <script
src="http://maps.google.com/maps?file=api&v=2&key="
type="text/javascript"></script>

<style type="text/css">
    v:* {
      behavior:url(#default#VML);
    }
    </style>

</head>
  <body onunload="GUnload()">
    <div id="map" style="width:700px; height:495px;"
class="Iframe"></div>
    <script language="Javascript">
     var map = new GMap2(document.getElementById("map"));
          var myZoom = 10;
          map.addMapType(G_NORMAL_MAP);
          map.addMapType(G_SATELLITE_MAP);
          map.addMapType(G_HYBRID_MAP);
          map.addControl(new GSmallMapControl());
          map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(40.440569000000004, -79.959705), myZoom);
    </script>
<script language="JavaScript">

drawCountyBorder();

function drawCountyBorder()
{
        var bounds = new GLatLngBounds();
        var blue = "#0022aa";
        var black = "#000000";

var polyline = new GPolyline([

new GLatLng(40.6745300000000 -80.1486780000000),

new GLatLng(40.6740340000000 -80.1365010000000),

new GLatLng(40.6741140000000 -80.1171090000000),

new GLatLng(40.6742390000000 -80.1117080000000),
                                                     ])

}

</script>
  </head>
  <body onload="load()" onunload="GUnload()">
  <center>
    <div id="map" style="width: 900px; height: 500px"></div>
    </center>
  </body>
</html>

Viele Grüße
Martin

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Google Maps API

    martinli
    – Informationen zu den Bewertungsregeln

    Hm,
    sehe ich es richtig, dass hier auch kaum jemand viel ahnung von Google Maps API hat?
    Gruß
    Martin

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Google Maps API

    Thollsten
    – Informationen zu den Bewertungsregeln

    Du musst Deiner Map schon noch sagen, das die Polyline angezeigt werden soll ;)

    map.addOverlay(polyline); ist Dein Freund

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Google Maps API

      martinli
      – Informationen zu den Bewertungsregeln

      Hallo,
      leider funktioniert das immer noch nicht so ganz. Entweder wird weder karte nicht noch Polyline angezeigt (Fall 1)
      Oder es wird die Karte angezeigt, aber nicht die Polyline (Fall 2).
      Was hab ich da noch falsch?
      Vielen dank schon mal
      Martin:

      <!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"
      xmlns:v="urn:schemas-microsoft-com:vml">
        <head>

      <title>Google Map</title>
          <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=xx"
      type="text/javascript"></script>

      <style type="text/css">
          v:* {
            behavior:url(#default#VML);
          }
          </style>

      </head>
        <body onunload="GUnload()">
          <div id="map" style="width:700px; height:495px;"
      class="Iframe"></div>
          <script language="Javascript">
           var map = new GMap2(document.getElementById("map"));
                var myZoom = 10;

      map.addMapType(G_NORMAL_MAP);
                map.addMapType(G_SATELLITE_MAP);
                map.addMapType(G_HYBRID_MAP);
                map.addControl(new GSmallMapControl());
                map.addControl(new GMapTypeControl());
      Fall 1    map.addOverlay(polyline);
                map.setCenter(new GLatLng(40.6740340000000, -80.1365010000000), myZoom);
      Fall 2    map.addOverlay(polyline);
          </script>
      <script language="JavaScript">

      drawCountyBorder();

      function drawCountyBorder()
      {
              var bounds = new GLatLngBounds();
              var blue = "#0022aa";
              var black = "#000000";

      var polyline = new GPolyline([

      new GLatLng(40.6745300000000 -80.1486780000000),

      new GLatLng(40.6740340000000 -80.1365010000000),

      new GLatLng(40.6741140000000 -80.1171090000000),

      new GLatLng(40.6742390000000 -80.1117080000000),
                                                           ])

      }

      </script>
        </head>
        <body onload="load()" onunload="GUnload()">
        <center>
          <div id="map" style="width: 900px; height: 500px"></div>
          </center>
        </body>
      </html>

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Google Maps API

        JürgenB Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo martinli,

        bzgl. Google Maps API kann ich dir nicht helfen, aber glaubst Du, das das hier richtig ist?

        ...
          <head>
        ...
            <title>Google Map</title>
          </head>
          <body onunload="GUnload()">
        ...
          </head>
          <body onload="load()" onunload="GUnload()">
        ...
          </body>
        </html>

        Korrektes HTML ist eine notwendige, wenn auch keine hinreichende Bedingung für funktionierendes Javascript.

        Gruß, Jürgen

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Google Maps API

          martinli
          – Informationen zu den Bewertungsregeln

          Hallo,
          so, ich hab mal eine menge verbessert.
          Aber die Polyline wird leider immer noch nicht angezeigt. Hat da jemand einen Tipp??

          <!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"
          xmlns:v="urn:schemas-microsoft-com:vml">
            <head>

          <title>Google Map</title>
              <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=xxx"
          type="text/javascript"></script>

          <style type="text/css">
              v:* {
                behavior:url(#default#VML);
              }
              </style>

          </head>
            <body onunload="GUnload()">
              <div id="map" style="width:700px; height:495px;"
          class="Iframe"></div>
              <script language="Javascript">
               var map = new GMap2(document.getElementById("map"));
                    var myZoom = 10;
                    map.addMapType(G_NORMAL_MAP);
                    map.addMapType(G_SATELLITE_MAP);
                    map.addMapType(G_HYBRID_MAP);
                    map.addControl(new GSmallMapControl());
                    map.addControl(new GMapTypeControl());
                    map.setCenter(new GLatLng(53.100, 08.800), myZoom);

          drawCountyBorder();

          function drawCountyBorder()
          {
                  var bounds = new GLatLngBounds();
                  var blue = "#0022aa";
                  var black = "#000000";

          var polyline = new GPolyline([

          new GLatLng(53.1000 +08.8000),

          new GLatLng(53.4000 +08.9000),

          new GLatLng(53.6000 +08.6000),

          new GLatLng(53.8000 +08.3000),
                                                               ])

          }
          map.addOverlay(polyline);

          </script>
              </body>
          </html>

          Danke schon mal
          Martin

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Google Maps API

            Thollsten
            – Informationen zu den Bewertungsregeln

            function drawCountyBorder()
            {
                                    var polyline = new GPolyline([
                                                new GLatLng(53.1000 +08.8000),
                                                new GLatLng(53.4000 +08.9000),
                                                new GLatLng(53.6000 +08.6000),
                                                new GLatLng(53.8000 +08.3000),
                                                                 ])
            }
            map.addOverlay(polyline);

            Warum ist das addOverlay ausserhalb der Funktion?

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Google Maps API

              martinli
              – Informationen zu den Bewertungsregeln

              Hi,
              ich hatte es vorher auch in der Funktion versucht, aber das hat auch nicht geklappt.
              Unter www.mosambik.info/google kannst du dir das ja mal ansehen.
              Hier auch noch mal der quellcode, aber die Linie wird immer noch nicht angezeigt.

              <!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"
              xmlns:v="urn:schemas-microsoft-com:vml">
                <head>

              <title>Google Map</title>
                  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-hE6C9baL2Wea6Gzdfdn8BQnTPZjkmapnTEkupB1AXq-aatS0xSNe8-yiSTu1Bqz1Hsa5zuvQ-TfGg"
              type="text/javascript"></script>

              <style type="text/css">
                  v:* {
                    behavior:url(#default#VML);
                  }
                  </style>

              </head>
                <body onunload="GUnload()">
                  <div id="map" style="width:700px; height:495px;"
              class="Iframe"></div>
                  <script language="Javascript">
                   var map = new GMap2(document.getElementById("map"));
                        var myZoom = 10;
                        map.addMapType(G_NORMAL_MAP);
                        map.addMapType(G_SATELLITE_MAP);
                        map.addMapType(G_HYBRID_MAP);
                        map.addControl(new GSmallMapControl());
                        map.addControl(new GMapTypeControl());
                        map.setCenter(new GLatLng(53.100, 08.800), myZoom);

              drawCountyBorder();

              function drawCountyBorder()
              {
                      var bounds = new GLatLngBounds();
                      var blue = "#0022aa";
                      var black = "#000000";

              var polyline = new GPolyline([

              new GLatLng(53.1000 +08.8000),

              new GLatLng(53.4000 +08.9000),

              new GLatLng(53.6000 +08.6000),

              new GLatLng(53.8000 +08.3000),
                                                                   ])
              map.addOverlay(polyline);
              }

              </script>
                  </body>
              </html>

              Über weitere Hilfe würde ich mich sehr freuen!
              Martin

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Google Maps API

                svg4you
                – Informationen zu den Bewertungsregeln

                Tach Martin,

                ich hatte es vorher auch in der Funktion versucht, aber das hat auch nicht geklappt.
                Unter www.mosambik.info/google kannst du dir das ja mal ansehen.

                Mit welchem Browser klappt es nicht? Zumindest im Firefox ab 1.5 wird eine blaue Line auf SVG-Basis erzeugt, mal im DOM-Inspector nachsehen:

                  
<DIV style="position: absolute; left: 0px; top: 0px; z-index: 100;">  
  <svg style="position: absolute; left: -19px; top: 218px;" version="1.1"  
       width="2058px" height="2058px" viewBox="-19 218 2053 2053" overflow="visible">  
    <path d="M350,248 L423,223 L204,260 L-14,92702" stroke-opacity="0.45"  
          stroke-linejoin="round" stroke-linecap="round" stroke="#0000ff" fill="none" stroke-width="5px"/>  
  </svg>  
</DIV>

                Der IE sollte das wohl auf VML-Basis machen ...

                Man liest sich,
                svg4you

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Google Maps API

                  martinli
                  – Informationen zu den Bewertungsregeln

                  Nein, der IE bekommt das leider nicht hin.
                  Irgenwo hab ich mal gelesen, dass das "," hinter:
                  new GLatLng(53.1000, +08.8000),
                  wegmuss, aber wenn ich das mache, dann wird mir nirgends was angezeigt?
                  Vielen dank
                  Martin

                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln