Ergebnis 1 bis 12 von 12
  1. #1
    jilli ist offline Foren As
    registriert
    09-01-2005
    Beiträge
    95

    Angry Google Maps API: Karte in Div platzieren

    Hallo,

    nachdem ich nun Erfolgreich meine Karten mit Google Maps-API erstellt habe, möchte ich sie in meine bestehende HTML-Seite einbauen.

    So soll es aussehen:
    http://www.braun-markenschuhe.de/test/kontakt_ds.htm

    Ich musste aber noch in das Infofenster den Link "Route berechnen" integrieren und musste das Skript dafür ändern.

    Ergebnis:
    http://www.braun-markenschuhe.de/tes..._from_here.htm
    Klicke auf die Ortsmarke

    Jetzt will ich bei Dateien zusammenbringen.

    Dann habe ich folgendes Problem: die Karte erscheint nicht in den div (roter Bereich).
    http://www.braun-markenschuhe.de/test/test.htm

    Setze ich jetzt <div id="map" style="width: 530px; height: 400px"></div>

    An die Stelle <div id="linksKarte"></div> wo normal meine Karte sitzt, erscheint die Karte nicht und ich bekomme eine Skriptfehlermeldung.

    Ich habe das Div sowohl "map" als auch "linksKarte" genannt alles ohne erfolg.

    ich freue mich über jede Hilfe.

    DANKE - jilli
    HTML-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" xml:lang="en" lang="en">
    <html>
      <head>
    	<title>Braun Markenschuhe: 5x rund um Frankfurt - Bad Homburg, Bad Vilbel, Dreieich-Sprendlingen, Gr&uuml;ndau-Lieblos, Weiterstadt</title>
    	<link rel="stylesheet" href="style.css" type="text/css" />
    	<link rel="stylesheet" href="nav.css" type="text/css" />
    	<link rel="stylesheet" href="kontakt.css" type="text/css" />
    	
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=de&amp;key=ABQIAAAA1Fbg1IKrQq4-PeiY3VULghSmZ16I8y8jszNHFoKkRDEKisoiexTFsH37OkYidOApdw2hKrmcSLA4Qw" type="text/javascript"></script>
      </head>
      <body onunload="GUnload()">
    
        <!-- the div where the map will be displayed -->
        <div id="map" style="width: 530px; height: 400px"></div>
        
        <!-- fail nicely if the browser has no Javascript -->
        <noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b> 
          However, it seems JavaScript is either disabled or not supported by your browser. 
          To view Google Maps, enable JavaScript by changing your browser options, and then 
          try again.
        </noscript>
    
    
    
    
        <script type="text/javascript">
        //<![CDATA[
    
        // Check to see if this browser can run the Google API
        if (GBrowserIsCompatible()) {
    
          var gmarkers = [];
          var htmls = [];
          var to_htmls = [];
          var from_htmls = [];
          var i=0;
    
          // A function to create the marker and set up the event window
          function createMarker(point,name,html) {
            var marker = new GMarker(point);
    
            // The info window version with the "to here" form open
            to_htmls[i] = html + '<br>Route berechnen: <b>Hierher<\/b> - <a href="javascript:fromhere(' + i + ')">Von hier<\/a>' +
               '<br>Startadresse:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
               '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
               '<INPUT value="Los" TYPE="SUBMIT">' +
               '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
                      // "(" + name + ")" + 
               '"/>';
            // The info window version with the "to here" form open
            from_htmls[i] = html + '<br>Route berechnen: <a href="javascript:tohere(' + i + ')">Hierher<\/a> - <b>Von hier<\/b>' +
               '<br>Zieladresse:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
               '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
               '<INPUT value="Los" TYPE="SUBMIT">' +
               '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                      // "(" + name + ")" + 
               '"/>';
            // The inactive version of the direction info
            html = html + '<br>Route berechnen: <a href="javascript:tohere('+i+')">Hierher<\/a> - <a href="javascript:fromhere('+i+')">Von hier<\/a>';
    
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
            });
            gmarkers[i] = marker;
            htmls[i] = html;
            i++;
            return marker;
          }
    
          // functions that open the directions forms
          function tohere(i) {
            gmarkers[i].openInfoWindowHtml(to_htmls[i]);
          }
          function fromhere(i) {
            gmarkers[i].openInfoWindowHtml(from_htmls[i]);
          }
    
          // Display the map, with some controls and set the initial location 
          var map = new GMap2(document.getElementById("map"));
          map.addControl(new GSmallMapControl()); 
    	  map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(50.2091764,8.7468265), 15);	
        
          // Set up three markers with info windows 
        
          var point = new GLatLng( 50.2091764,8.7468265);
          var marker = createMarker(point,'Elm Street','<img src="images/braun_kl_bv.jpg" width="200" height="150" alt=""></img>')
          map.addOverlay(marker);
        }
    
        
        // display a warning if the browser was not compatible
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        </script>
    	
    	<div id="layout">
    	<div id="logo"><img src="images/braun_logo.png" width="100" height="100" alt="" />
    		<span>Braun Markenschuhe</span>
    	</div>
    	
    	<ul id="nav">
    		<li><a href="index.htm" title="zur Startseite">Home</a></li>
    		<li><a href="marken.htm">Markenwelt</a></li>
    		<li><a href="angebote.htm">Angebote</a></li>
    		<li><a href="kontakt.htm">Kontakt</a></li>
    	</ul>
    	
    	<div class="clear abstand"></div>
    	
    	<div id="linksKarte"></div>
    	
    	
    	<div id="rechts">
    		<p class="roterText_super">Braun in Bad Vilbel</p>
    		<p class="klein">
    		 Industriestra&szlig;e 1<br/>
    		 61118 Bad Vilbel-Dortelweil
    		 </p>
    		 <p class="klein">
    		 Fon: 0 61 01 - 52 49 20<br/>
    		 Fax: 0 61 01 - 52 49 22 7<br/>
    		 <a class="textlink2" href="mailto:info@braun-markenschuhe.de">info@braun-markenschuhe.de</a>
    		 </p>
    		 <p class="klein">
    		 <span style="font-weight:bold;">&Ouml;ffnungszeiten</span><br/>
    		 Mo - Fr: 9:30 - 19:30 Uhr<br/>
    		 Sa:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9:30 - 18:00 Uhr
    		</p>
    		<ul class="liste">
    		<li>Eines der gr&ouml;&szlig;ten Markenschuhh&auml;user im Rhein-Main-Gebiet</li>
    		<li>&Uuml;ber 50.000 Paar Markenschuhe zu Outletpreisen</li>
    		<li>Gro&szlig;e Sportabteilung mit Funktionsschuhen</li>
    		<li>Damen- und Herrenschuhe auch in &Uuml;bergr&ouml;&szlig;en</li>
    		<li>Kinderschuhe bis Gr&ouml;&szlig;e 42</li>
    		</ul>
    		
    		 <p class="klein">
    		Zur&uuml;ck zur <a class="textlink2" href="kontakt_braun.htm">&Uuml;bersicht</a>.
    		</p>
    		</div>
    		
    		
    		
    			
    	<div id="fusszeile">
    		<div id="fuß_links"><b>Braun</b> in <a href="kontakt_bv.htm">Bad Vilbel-Dortelweil</a> | <a href="kontakt_bh.htm">Bad Homburg</a> | <a href="kontakt_ds.htm">Dreieich-Sprendlingen</a> | <a href="kontakt_gl.htm">Gr&uuml;ndau-Lieblos</a> | <a href="kontakt_we.htm">Weiterstadt</a></div>
    		<ul id="fuß_rechts">
    		<li><a href="impressum.htm">Impressum</a></li>
    		<li><a href="javascript:NeuFenster1()">Datenschutz |</a></li>
    		</ul>
    	</div>
    	
    </div>
      </body>
    
    </html>

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.687

    AW: Google Maps API: Karte in Div platzieren

    Du musst deinen JS-Code hinter dein Layout setzen, damit die Node, in die du deine Karte zeichnen willst, schon existiert, wenn der Code ausgeführt wird.

  3. #3
    jilli ist offline Foren As
    registriert
    09-01-2005
    Beiträge
    95

    AW: Google Maps API: Karte in Div platzieren

    Hallo KKapsner,

    vielen dank für Deine Antwort. es hat geklappt. Da wäre ich nie drauf gekommen.

    Jetzt hätte ich noch eine JS-Frage:
    Im Moment öffnet sich das Infofenster erst durch klick auf die Ortsmarke - es soll sich aber direkt öffnen bei Aufruf der Seite.

    Eine Idee?

    Jilli

  4. #4
    jilli ist offline Foren As
    registriert
    09-01-2005
    Beiträge
    95

    Question Google Maps-API: Infofenster soll sich direkt öffnen und nicht per Mausklick

    Hallo,

    ich habe mittel Google Maps-API Karten für die verschiedenen Filialen erstellt und in mein HTML/Css layout integriert. Im Infofenster ist ein Foto und der Link "Route berechnen" hierher - von hier. Das Infofenster öffnet sich erst durch klick auf die Ortsmarke, es soll sich aber direkt öffnen beim Aufruf der Seite/Map.

    http://www.braun-markenschuhe.de/test/kontakt_bv.htm

    Jetzt habe ich diese Anweisung gefunden. Integriere ich sie, öffnet sich das Infofenster direkt, aber mein Link "Route berechnen" ist weg.

    if(point) map.openInfoWindowHtml(point, html, { pixelOffset:new GSize(8,-24)});

    Wo muss ich was integrieren?

    Ich freue mich über jeden Hinweis.

    DANKE - Jilli
    ---------------------------------------------------------
    Code:
    <script type="text/javascript">
        //<![CDATA[
    
        // Check to see if this browser can run the Google API
        if (GBrowserIsCompatible()) {
    
          var gmarkers = [];
          var htmls = [];
          var to_htmls = [];
          var from_htmls = [];
          var i=0;
    
          // A function to create the marker and set up the event window
          function createMarker(point,name,html) {
            var marker = new GMarker(point);
    
    
            // The info window version with the "to here" form open
            to_htmls[i] = html + '<br>Route berechnen: <b>Hierher<\/b> - <a href="javascript:fromhere(' + i + ')">Von hier<\/a>' +
               '<br>Startadresse:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
               '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
               '<INPUT value="Los" TYPE="SUBMIT">' +
               '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() + 
                      // "(" + name + ")" + 
               '"/>';
            // The info window version with the "to here" form open
            from_htmls[i] = html + '<br>Route berechnen: <a href="javascript:tohere(' + i + ')">Hierher<\/a> - <b>Von hier<\/b>' +
               '<br>Zieladresse:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
               '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
               '<INPUT value="Los" TYPE="SUBMIT">' +
               '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                      // "(" + name + ")" + 
               '"/>';
            // The inactive version of the direction info
            html = html + '<br>Route berechnen: <a href="javascript:tohere('+i+')">Hierher<\/a> - <a href="javascript:fromhere('+i+')">Von hier<\/a>';
    
            GEvent.addListener(marker, "click", function() {
              marker.openInfoWindowHtml(html);
            });
            gmarkers[i] = marker;
            htmls[i] = html;
            i++;
            return marker;
          }
    
          // functions that open the directions forms
          function tohere(i) {
            gmarkers[i].openInfoWindowHtml(to_htmls[i]);
          }
          function fromhere(i) {
            gmarkers[i].openInfoWindowHtml(from_htmls[i]);
          }
    
          // Display the map, with some controls and set the initial location 
          var map = new GMap2(document.getElementById("linksKarte"));
          map.addControl(new GSmallMapControl()); 
      map.addControl(new GMapTypeControl());
          map.setCenter(new GLatLng(50.2091764,8.7468265), 15); 
        
          // Set up three markers with info windows 
        
          var point = new GLatLng( 50.2091764,8.7468265);
          var marker = createMarker(point,'Elm Street','<img src="images/braun_kl_bv.jpg" width="200" height="150" alt=""></img>')
          map.addOverlay(marker);
        }
    
        
        // display a warning if the browser was not compatible
        else {
          alert("Sorry, the Google Maps API is not compatible with this browser");
        }
    
        </script>

  5. #5
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.687

    AW: Google Maps API: Karte in Div platzieren

    Code:
    marker.openInfoWindowHtml(html);

  6. #6
    jilli ist offline Foren As
    registriert
    09-01-2005
    Beiträge
    95

    AW: Google Maps API: Karte in Div platzieren

    Hi,

    so steht es aber im Code!?

    Müsste ich nicht eher was an dem "click" ändern?

    GEvent.addListener(marker, "click", function() {


    --------------------

    // The inactive version of the direction info
    html = html + '<br>Route berechnen: <a href="javascript:tohere('+i+')">Hierher<\/a> - <a href="javascript:fromhere('+i+')">Von hier<\/a>';

    GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
    });
    gmarkers[i] = marker;
    htmls[i] = html;
    i++;
    return marker;
    }

  7. #7
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.687

    AW: Google Maps API: Karte in Div platzieren

    Ja in dem click-Event - du musst die Funktion aber gleich ausführen.
    Höchstwahrscheinlich hinter
    Code:
    map.addOverlay(marker);
    - wobei du da deine Variable html nochmal erstellen musst - die ist da nicht mehr existent.

  8. #8
    jilli ist offline Foren As
    registriert
    09-01-2005
    Beiträge
    95

    Question AW: Google Maps API: Karte in Div platzieren

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ja in dem click-Event - du musst die Funktion aber gleich ausführen.
    Höchstwahrscheinlich hinter
    Code:
    map.addOverlay(marker);
    - wobei du da deine Variable html nochmal erstellen musst - die ist da nicht mehr existent.
    Hi,

    ich muss noch mal nachfragen - denn ich bin JS Laie. Ich bin froh, dass ich das mit Maps-Api hinbekommen habe, aber der Rest ist zu hoch für mich.

    Wo erstelle ich nochmal die Var. "html"?

    JILLI

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.687

    AW: Google Maps API: Karte in Div platzieren

    In der Funktion createMarker.

    Was eventuell auch funktioniert (kenn mich mit Google Maps nicht wirklich aus) is
    Code:
    GEvent.trigger(marker, "click");

  10. #10
    Avatar von Ebi
    Ebi
    Ebi ist offline Mitglied
    registriert
    15-06-2009
    Ort
    Hamburg
    Beiträge
    42

    AW: Google Maps API: Karte in Div platzieren

    Jetzt muss ich auch ma eben doof nachfragen, weil ichs net genau weiß aber vllt helfen könnte:
    Kann ich das nicht quasi als Parameter beim Laden der Map an die API mitgeben? N Kollege arbeitet immer damit.
    - Ich frage ihn ansonsten mal im Laufe des Tages.

  11. #11
    jilli ist offline Foren As
    registriert
    09-01-2005
    Beiträge
    95

    AW: Google Maps API: Karte in Div platzieren

    Hallo kkapsner und Ebi,

    vielen dank für Eure Antworten. Leider funktioniert es bis jetzt noch nicht.

    Ebi: Es wäre super wenn Du mal Deinen Kollegen fragen könntest.

    Jilli

  12. #12
    Avatar von jspit
    jspit ist offline Lounge-Member
    registriert
    19-06-2009
    Beiträge
    1.710

    AW: Google Maps API: Karte in Div platzieren

    Hallo jilli,
    Bin neu hier. Ja die gmaps-api hat so einige Tücken.
    Nachdem ich kurz in deinen Code geschaut habe, muß ich erstmal 2 allgemeine Tipps ablassen:
    1. js als funktionen im header vereinbaren, damit es vor dem html geladen ist.
    function load() {
    if (GBrowserIsCompatible()) {...
    2. <body onload="load()" onunload="GUnload()">
    Damit wird sichergestellt, dass alles geladen ist und html-Bezüge auch vorhanden sind.

    Ein Infofenster kann mit in der function load untergebracht werden,
    am besten am Ende:
    :
    map.openInfoWindowHtml(map.getCenter(),
    "<div align='center'><b>Info</b></div>Die Karte kann interaktiv bedient werden.<br />");

    Mit map.getCenter wird das Infofenster hier als Beispiel in der Mitte positioniert und sofort nach dem Laden der Karte angezeigt.

    jspit

Ähnliche Themen

  1. Google Maps API Stadtbegrenzung
    Von antiheld2000 im Forum Allgemeines
    Antworten: 3
    Letzter Beitrag: 10-06-2009, 23:29
  2. Javascript, Google Maps API ... Listener-Problem
    Von derschlumschs im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 06-01-2009, 18:57
  3. Google Maps API - Dhtml / dropdown Menu ?
    Von syrianferrari im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 19-03-2008, 19:05
  4. Google Maps einbinden! Keine Karte?!
    Von ChilliNr1 im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 29-09-2006, 01:32
  5. Beerbt Google Microsoft als IT-Supermacht?
    Von kasimir83 im Forum Smalltalk
    Antworten: 5
    Letzter Beitrag: 16-04-2004, 15:07

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •