find-templates

map slider

zurück zur Übersicht

jQuery "Map-Slider"



fahre mit der Maus über das Menü, die Karte "bewegt" sich.

  • Flensburg

    Strand Solitüde

    Solitüde:
    Die Badestelle befindet sich an der Flensburger Förde am östlichen Ausgang Richtung Glücksburg.

  • Flensburg

    Wassersleben

    Wassersleben Sandstrand wurde 1971 künstlich aufgespült.

  • Flensburg

    Skaterpark

    Skatepark

    Norddeutschlands Betonskatepark direkt am Meer.

  • Flensburg

    Hauptbahnhof

    Bahnhof

    Am 9. Dezember 2007 rollte der erste fahrplanmäßige ICE in Flensburg ein.

Hover Info

Info bei Hover



Das Info-Feld rechts kann entfernt werden, Karte oder Menü können auch verbreitert werden.




Schritt 1: Der CSS Code



/* Karte */
#map_canvas { width:300px; height:300px; float:left; position:relative; z-index:30 !important;}

/* Menue links */
#locations { list-style: none; width: 180px; float: left; margin:0px; padding:0px; }
#locations li { padding: 10px; width: 550px; float: left; position: relative; z-index: 20;}
#locations li:hover, #locations li.hover { background-color: #ccc; }

/* Titel links */
h3 { margin: 0px 0px  1px 0px; font: bold 18px Arial, Sans-Serif; letter-spacing: -1px; }
#locations li:hover h3, #locations li.hover h3 { color: red; }

/* Infofeld rechts */
#more-info { width:150px; height:294px; float:left; margin-left:10px; overflow:hidden; border:3px solid #ccc; }
#more-info * { position: relative; z-index:40; }
#more-info > div { background-color: #fff; padding:10px; height:294px; }
.longdesc { display: none; }


Schritt 2: Javascript-Code


- auf "Eigene Seiten editieren"
- Seite wählen, wo der Map-Slider hinein soll
- im Editor oben links auf "Quellcode" klicken

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script>

<script type='text/javascript'>
  
    $(function() {
    
      var flensburg = new google.maps.LatLng(XX.XXXXXX, XX.XXXXXX),
          pointToMoveTo, 
          first = true,
          curMarker = new google.maps.Marker({}),
          $el;
      
      var myOptions = {
          zoom: 12,
          center: flensburg,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
      
      var map = new google.maps.Map($("#map_canvas")[0], myOptions);
    
      $("#locations li").mouseenter(function() {
      
        $el = $(this);
                
        if (!$el.hasClass("hover")) {
        
          $("#locations li").removeClass("hover");
          $el.addClass("hover");
        
          if (!first) { 
            
            // Clear current marker
            curMarker.setMap(); 
            
            // Set zoom back to level
            // map.setZoom(12);
          }
          
          // Move (pan) map to new location
          pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
          map.panTo(pointToMoveTo);
          
          // Add new marker
          curMarker = new google.maps.Marker({
              position: pointToMoveTo,
              map: map,
              icon: "https://img.webme.com/pic/f/find-templates/marker.png"
          });
          
          // On click, zoom map
          google.maps.event.addListener(curMarker, 'click', function() {
             map.setZoom(12);
          });
          
          // Fill more info area
          $("#more-info")
            .find("h2")
              .html($el.find("h3").html())
              .end()
            .find("p")
              .html($el.find(".longdesc").html());
          
          // No longer the first time through (re: marker clearing)        
          first = false; 
        }
        
      });
      
      $("#locations li:first").trigger("mouseenter");
      
    });

  </script>

Hier können Grafikadresse des "Markers" und der Karten-Zoom angepasst werden.

ROT markiert (XX.XXXXXX) ist die Stelle, wo die zwei Koordinaten deines Ortes platziert werden müssen.
Schritt 4 erklärt, wie (bzw. wo) diese beiden Werte ermittelt werden können.




Schritt 3: Der HTML-Code des Map-Sliders


<ul id="locations">

<li data-geo-lat="XX.XXXXXX" data-geo-long="XX.XXXXXX">
<h3>Hier Titel 1</h3>
<p>Text unter Titel</p>
<p class="longdesc"><strong>Titel Rechts</strong><br />
Infotext Rechts neben Karte
<br /> <br />
<img src="Grafikadresse" alt="" /></p>
</li>
        
<li data-geo-lat="XX.XXXXXX" data-geo-long="XX.XXXXXX">
<h3>Hier Titel 2</h3>
<p>Text unter Titel</p>
<p class="longdesc"><strong>Titel Rechts</strong><br />
Infotext Rechts neben Karte
<br /> <br />
<img src="Grafikadresse" alt="" /></p>
</li>

<li data-geo-lat="XX.XXXXXX" data-geo-long="XX.XXXXXX">
<h3>Hier Titel 3</h3>
<p>Text unter Titel</p>
<p class="longdesc"><strong>Titel Rechts</strong><br />
Infotext Rechts neben Karte
<br /> <br />
<img src="Grafikadresse" alt="" /></p>
</li>

<li data-geo-lat="XX.XXXXXX" data-geo-long="XX.XXXXXX">
<h3>Hier Titel 4</h3>
<p>Text unter Titel</p>
<p class="longdesc"><strong>Titel Rechts</strong><br />
Infotext Rechts neben Karte
<br /> <br />
<img src="Grafikadresse" alt="" /></p>
</li>
        
</ul>

<div id="map_canvas"> </div>
<div id="more-info"> <div>
<h2>Hover Info</h2><p>Info bei Hover</p>
</div> </div>
<br style="clear:both;" />

  • Breite für Grafiken im Info-Feld rechts : 130 Pixel
  • Map-Slider passt in Seiteninhalt mit mindestens 600 Pixel breite

  • das Info-Feld rechts kann entfernt werden (wenn Seite kleiner ist)
  • dann im CSS Code letzten Code-Abschnitt entfernen
  • und im HTML-Code entfernen: <div id="more-info"> <div> bis zum </div> </div>


Wo finde ich die Koordinaten meines Ortes ?


  • gehe zu Google Maps
  • gebe Deinen Ort ein
  • zoome den Punkt, Platz, an, den Du verlinken möchtest
  • Links von der Karte auf den kleinen Link "Maps Labs" klicken
  • es öffnet sich 1 Fenster
  • Haken in das Feld "LatLng-Kurzinfo" aktivieren
  • Haken in das Feld "LatLng-Markierung" aktivieren

  • nun Mausklick (linke Maustaste) an die Stelle, die verlinkt werden soll
  • nun Rechtsklick auswählen : "LatLng-Markierung setzen"
  • auf der Karte siehst du nun ein kleines Feld, es enthält 2 Zahlen
  • diese beiden Zahlen benötigst du für den HTML-Code (siehe die XX.XXXXXX)

  • Die beiden Zahlen für die erste Verlinkung auch im Javascript-Code einfügen





Heute: 25 Besucher