• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage GoogleMaps InfoWindow mit Parallax

Curved

Neues Mitglied
Hallo zusammen,

ich habe auf meiner Webseite: http://jp.mediago.de eine Einbindung einer GoogleMaps-Karte mit einem kleinen Scroll-Parallax-Effekt. Jetzt möchte ich, dass über dem Marker ein InfoWindow angezeigt wird, in dem die Adresse steht. Sobald ich dieses jedoch einfüge funktioniert der Parallax-Effekt nicht mehr, bzw. beginnt beim Seitenaufruf bereits zu scrollen und die Karte zeigt dann Bereiche viel weiter oben, sobald man diese (durch scrollen) erreicht.

Code:
<div id="map_canvas">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&.js"></script>
<script>
  var map;
  function initialize() {
  var mapOptions = {
    zoom: 16,
    styles: [...],
    scrollwheel: false,
    center: new google.maps.LatLng(48.740497, 9.2982691),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scroll:{x:$(window).scrollLeft(),y:$(window).scrollTop()}
  };
  map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

  var contentString = "<h3 class='GMapsHead'>Joe Pe&ntilde;a's Esslingen</h3>"+
    "<p class='GMapsText'>Kollwitzsstr. 1 <br>"+
    "73728 Esslingen</p>";
  var koordinaten = {lat: 48.740897, lng: 9.2982691};
  new google.maps.InfoWindow({content:contentString,map:map,position:koordinaten});
  new google.maps.Marker({map:map,position:map.getCenter()});
                         
  var offset=$(map.getDiv()).offset();
  map.panBy(((mapOptions.scroll.x-offset.left)/3),((mapOptions.scroll.y-offset.top)/3));
  google.maps.event.addDomListener(window, 'scroll', function(){
    var scrollY=$(window).scrollTop(),
    scrollX=$(window).scrollLeft(),
    scroll=map.get('scroll');
    if(scroll){
      map.panBy(-((scroll.x-scrollX)/3),-((scroll.y-scrollY)/3));
    }
  map.set('scroll',{x:scrollX,y:scrollY})
  });                       
  }

google.maps.event.addDomListener(window, 'load', initialize);
</script>             
</div>

Auf der Seite ist das InfoWindow aktuell ausgeklammert, damit man sieht wie es eigentlich aussehen sollte. Wie gesagt befindet sich die Karte realtiv weit unten auf der Startseite. Wenn das infoWindow eingebunden ist beginnt die Karte schon beim Seitenaufruf nach oben zu scrollen und bis man dann die Karte sieht ist der eigentliche Standort verschwunden. Ich hoffe meine Problemstellung ist so verständlich.

Ich habe auch schon versucht bei position: map.getCenter() zu übergeben, das bringt allerdings auch nichts. Vielleicht setze ich aber auch am falschen Punkt an?

Vielen Dank für eure Hilfe!

Curved
 
Werbung:
Zurück
Oben