Google Maps - Eigene Icons

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Google Maps - Eigene Icons

    Hallo,
    ich hoffe, ich bin in diesem Bereich richtig.

    Vielleicht kennt sich jemand etwas mit der Google Maps API aus.
    Die Kartenstandorte kommen aus DB und werden auch korrekt dargestellt. Was nicht klappt: ein eigenes Icon einsetzen.
    Vielleicht habe ich die Doku falsch verstanden? (http://code.google.com/apis/maps/doc...nce.html#GIcon)

    Mein Code:
    PHP-Code:
    var baseIcon = new GIcon();
            baseIcon.image = "marker_custom.gif";
            baseIcon.iconSize = new GSize(30, 50);
            baseIcon.iconAnchor = new GPoint(15, 50);
            
            function createMarker(point,html) {
                var marker = new GMarker(point);
                GEvent.addListener(marker, "click", function() {
                  marker.openInfoWindowHtml(html);
                });
                return marker;
              }
            
            var map = new GMap2(document.getElementById("map"));
            map.addControl(new GLargeMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(51.6,10),6);

    <?php echo $string_js?>
    }
    Im String $string_js stehen dann die einzelnen Markeraufrufe:
    PHP-Code:
    var point = new GLatLng(52.2597,9.442);
    var 
    marker createMarker(point'test-data')
    map.addOverlay(marker); 
    Kann man überhaupt das eigene Bild mit dem baseIcon-Bereich definieren?

    Ich habe auch andere Wege probiert, aber entweder wurde das eigene Icon dargestellt oder das Info-Fenster. Beides zusammen hat nicht funktioniert.
    Danke für einen Tip,
    Wolfgang

  • #2
    Code:
    var marker = new GMarker(point, [B]{icon:baseIcon}[/B] );
    Download ET-Chat v3.x.x

    Kommentar


    • #3
      Danke für den Tip. Leider ein kleiner Schönheitsfehler:
      das eigene Icon wird jetzt angezeigt, dafür das Info-Fenster bei Click nicht mehr.

      Kommentar


      • #4
        Könnten Sie vielleicht das URL zu Ihrer Anwendung geben? Dann könnte ich mir dies ansehen und den Fehler lokalisieren.
        Download ET-Chat v3.x.x

        Kommentar


        • #5
          Hallo E.T.,
          danke für das österliche Engagement!
          Link: nicht mehr aktiv
          Zuletzt geändert von user1949; 09.04.2008, 19:52.

          Kommentar


          • #6
            Also bei mir werden die InfoWindows angezeigt nach dem Click auf jeden Marker. Getestet auf IE7 und FF2. Ich kann hier keinen Fehler feststellen.
            Download ET-Chat v3.x.x

            Kommentar


            • #7
              Ja, das sind ja auch die Google Icons.

              Ich habe jetzt eine zweite Version hochgeladen.
              Unten sind jeweils Links auf die andere Seite.
              In der Version 2 habe ich die Google Icons durch ein eigenes ersetzt (Hund) und schon geht das Info-Fenster nicht mehr.
              Im Browser wird unten angezeigt "Fehler auf Seite" -> "x ist Null oder kein Objekt".

              Kommentar


              • #8
                Das fehlt:
                Code:
                baseIcon.infoWindowAnchor = new GPoint(5, 1);
                Download ET-Chat v3.x.x

                Kommentar


                • #9
                  Danke E.T.!!
                  Ich bin ausgesprochen begeistert!!

                  Ist noch eine Verständniss-Frage erlaubt?

                  Wenn der String "html" (kommt aus textarea -> db) einen Zeilenumbruch enhält, wird die 2. zeile im quelltext in einer neuen Zeile dargestellt und die Karte wird nicht gezeigt. Wenn ich aber in einem input-Feld
                  PHP-Code:
                  z-1<br>z2 
                  eingebe, wird der string in einer zeile ausgegeben und die Karte wird gezeigt. Ist JacaScript an dieser Stelle derart empfindlich?

                  Wie auch immer, vielen Dank für die schnelle und effektive Hilfe!
                  Schöne Ostern noch,
                  Wolfgang

                  Nachtrag:
                  für alle, die ähnliche Probleme haben, hier der komplette Code:
                  PHP-Code:
                  <!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</title>
                  <
                  script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=EIGENER GOOGLE-KEY' type='text/javascript'></script><script type='text/javascript'>
                  //<![CDATA[
                  function load() {
                      if (
                  GBrowserIsCompatible()) {
                          
                          var 
                  baseIcon = new GIcon();
                          
                  baseIcon.image "eigenes_img.png";
                          
                  baseIcon.iconSize = new GSize(3050);
                          
                  baseIcon.iconAnchor = new GPoint(1550);
                          
                  baseIcon.infoWindowAnchor = new GPoint(51);
                          
                          function 
                  createMarker(point,html) {
                              
                  //var marker = new GMarker(point);
                              
                  var marker = new GMarker(point, {icon:baseIcon} );
                              
                  GEvent.addListener(marker"click", function() {
                                
                  marker.openInfoWindowHtml(html);
                              });
                              return 
                  marker;
                            }
                          
                          var 
                  map = new GMap2(document.getElementById("map"));
                          
                  map.addControl(new GLargeMapControl());
                          
                  map.addControl(new GMapTypeControl());
                          
                  map.setCenter(new GLatLng(51,11),6);
                          
                          var 
                  point = new GLatLng(52.2597,9.442);
                          var 
                  marker createMarker(point'Text Info Box 1')
                          
                  map.addOverlay(marker);
                      
                          var 
                  point = new GLatLng(54.7297,9.1692);
                          var 
                  marker createMarker(point'Text Info Box 2')
                          
                  map.addOverlay(marker);
                      }
                  }
                  //]]>
                  </script>
                  </
                  head>

                  <
                  body onload='load()' onunload='GUnload()'>
                  <
                  div style='width:100%; text-align:center;'>
                  <
                  div id='map' style='width: 460px; height: 360px; border:1px solid #000000;'></div>
                  </
                  div>
                  </
                  body>
                  </
                  html
                  Zuletzt geändert von user1949; 23.03.2008, 16:13.

                  Kommentar


                  • #10
                    Leider kann ich im Moment Ihr Problem nicht nachvollziehen. Ein Beispiel wäre gut... ich könnte Ihnen dann eher sagen wo das Problem zu suchen ist.
                    Download ET-Chat v3.x.x

                    Kommentar


                    • #11
                      Ok, Beispiel:
                      Texteingabe in textarea -> DB -> auslesen und in das map-Script einfügen:
                      (\n, \r und <br /> wurden vorher ersetzt bzw. gelöscht)
                      PHP-Code:
                      var point = new GLatLng(52.2597,9.442);
                          var 
                      marker createMarker(point'Zeile 1<br>
                      Zeile 2'
                      )
                          
                      map.addOverlay(marker); 
                      Keine Kartenanzeige.

                      Texteingabe in input-Feld -> DB -> auslesen und in das map-Script einfügen:
                      PHP-Code:
                      var point = new GLatLng(52.2597,9.442);
                          var 
                      marker createMarker(point'zeile 1<br><br>zeile 2')
                          
                      map.addOverlay(marker); 
                      Offenbar muss der Info-Text zwingend in einer Zeile stehen?

                      Kommentar


                      • #12
                        Falsch:
                        Code:
                        var marker = createMarker(point, 'Zeile 1<br>
                        Zeile 2');
                        Richtig:
                        Code:
                        var marker = createMarker(point, 'Zeile 1<br>\
                        Zeile 2');
                        Download ET-Chat v3.x.x

                        Kommentar


                        • #13
                          ok, versuch' ich morgen mal.

                          frage: weshalb muss der backslash dorthin?

                          btw: ich bin hier im forum noch nie mit "Sie" angesprochen worden. hat das einen bestimmten grund?

                          Kommentar


                          • #14
                            Der backslash escaped den Zeilenumbruch...

                            Aber du könntest doch auch einfach die Zeilenumbrüche ersetzen beim ausgeben -> str_replace("\n", "<br />", $deintext);

                            Kommentar

                            Lädt...
                            X