Google maps probleem

[kleautviool]

Ik heb een, naar mijn ogen vreemd, probleem met google maps op mijn site te plaatsen. Ik wil twee maps hebben, 1 kleine en 1 grote waar ik een route op wil weergeven naar een lokatie. Alles goed en wel, alleen laad de grote map op nog geen kwart van de ruimte (zie afbeelding)



Ik gebruik onderstaande code maar kan de fout niet vinden. Heeft iemand dit eerder gezien?

HTML:

  <script type="text/javascript">
   function initialize() {
    var latlng = new google.maps.LatLng(51.92475, 4.38206);
    var myOptions = {zoom: 10, center: latlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    var marker = new google.maps.Marker({position: latlng, map:map, title:"Cherrytrees"});
    var image = '<?=_URL?>/Core/Images/Icons/citysquare.png';
    var myLatLng = new google.maps.LatLng(51.92308, 4.47058);
    var cityCentre = new google.maps.Marker({position:myLatLng, map:map, icon:image, title:"Centre of Rotterdam"});
    marker.setMap(map);

    var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
    var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
    var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
    var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
    largeMarker.setMap(largeMap); 
   }
  [..]
   jQuery(document).ready(function () {
    [..]
    initialize();
   });
  </script>
[..]
  <div id="shadow" class="inlinePop"></div>
  <div id="shadowContent" class="inlinePop">
   <div id="closebar"><a href="#" title="Close window" id="closeBarLink">Close window</a></div>
   <div id="content">
    <h2>Find route</h2>
    <div id="largeMap" style="width:700px;height:400px;"></div>
   </div>
  </div>

Ohja en de jquery

code:

 $("#showRoute").click(function(e){
  e.preventDefault();
  $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeIn(500);
  $("#shadowContent").show().css({'width':'750px','top':'25px','left':'50%','margin-left':'-400px'});
  $("#closeBarLink").click(function(l){
   l.preventDefault();
   $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeOut(500);
  });
 });

[ Voor 10% gewijzigd door kleautviool op 23-09-2010 14:33 ]

[R4gnax]

Popups en google maps gaan niet goed samen.

Google maps probeert wanneer je deze initialiseert de grootte van zijn container te bepalen en aan de hand hiervan de kaart en user interface te renderen. Op het moment dat deze container een onzichtbaar element is zal de terug gegeven grootte altijd 0px bij 0px zijn. Vandaar het kleine kaartje: dat is de minimale grootte van een Google map.

Je zult de map moeten laten resizen zodra je de popup opent. Google maar eens rond. De oplossing is gemakkelijk terug te vinden.

[OkkE]

Het heeft inderdaad te maken met wat R4gnax zegt, GoogleMaps probeerd het formaat van de popup te achterhalen voor dat deze klaar is met animeren.

Ik weet niet welk script je gebruikt voor het openen van de popup, maar de meeste scripts (nyroModal, ColorBox, LightBox, etc.) hebben wel een callback functie. Daar kun je de GoogleMaps aanroepen, zo wordt deze pas geinitialiseerd als de popup-animatie klaar is.

[kleautviool]

Ok, oplossing al wat dichterbij.

Als ik de display:none verwijder en het volgende doe opent de kaart in de div, maar met nog steeds een raar vakje linksboven..

code:

 jQuery(document).ready(function () { 
  $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).hide(); 
});

Het lijkt wel alsof de map dan twee keer geladen wordt..



Ik ga even verder zoeken. Dank in ieder geval!

OkkE schreef op donderdag 23 september 2010 @ 15:55:
Het heeft inderdaad te maken met wat R4gnax zegt, GoogleMaps probeerd het formaat van de popup te achterhalen voor dat deze klaar is met animeren.

Ik weet niet welk script je gebruikt voor het openen van de popup, maar de meeste scripts (nyroModal, ColorBox, LightBox, etc.) hebben wel een callback functie. Daar kun je de GoogleMaps aanroepen, zo wordt deze pas geinitialiseerd als de popup-animatie klaar is.

Ik gebruik iets zelfgemaakts (zie topicstart )

[ Voor 37% gewijzigd door kleautviool op 23-09-2010 16:00 ]

[OkkE]

kleautviool schreef op donderdag 23 september 2010 @ 15:59:
Ik gebruik iets zelfgemaakts (zie topicstart )

Ook jQuery heeft standaard voor bijna alle functies een callback.

Probeer je GMaps eens te initializeren nadat je de popup hebt zichtbaar gemaakt en je css er aan hebt gehangen met jQuery.

[kleautviool]

Inderdaad! Het werkt! Dank!

code:

function largeMap(){
 var largeLatlng = new google.maps.LatLng(51.92475, 4.38206);
 var largeOptions = {zoom: 10, center: largeLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP};
 var largeMap = new google.maps.Map(document.getElementById("largeMap"), largeOptions);
 var largeMarker = new google.maps.Marker({position: largeLatlng, map:largeMap, title:"Cherrytrees"});
 largeMarker.setMap(largeMap);
}
[..]
 $("#showRoute").click(function(e){
  e.preventDefault();
  $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeIn(500);
  $("#shadowContent").show().css({'width':'750px','top':'25px','left':'50%','margin-left':'-400px'});
  $("#closeBarLink").click(function(l){
   l.preventDefault();
   $("#shadow").add($("#shadowContent"),$("#closebar"),$("#content")).fadeOut(500);
  });
  largeMap();
 });