CODEWITHSUNDEEP
javascriptgoogle-maps-api-3
seb
seb

Reputation: 313

Google maps doesn't show correctly

See this screnshot:

GMaps

I don't understand why i only see a little square of the map at the top left and the rest of the map is grey. I "calling" my map in a modal form. When i "call" my map outside of the modal form everything is Ok. I am using the Jquery Modal form Widget from there : http://jqueryui.com/dialog/

html :

<div id='rayon_dialogue' title="Modifier le rayon de déplacement">
    <form action='profil.php' method='post'>
        <label>Rayon de déplacement maximal : </label>
        <input type='text' name='rayonDeplacement' id='rayonDeplacement' <?php echo "value='".$_SESSION['authentification']['rayonActivite']."'"; ?> /><br/>

        <label>Rayon de déplacement non chargé : </label>
        <input type='text' name='rayonCharge' id='rayonCharge' <?php echo "value='".$_SESSION['authentification']['rayonActiviteCharge']."'"; ?> /><br/><br/>

        <div id="container">
            <div id="map">
                <p>Veuillez patienter pendant le chargement de la carte...</p>
            </div>
        </div>

        <input type='submit' name='validerDeplacement' value='sauvegarder' />
    </form>
</div>

javascript :

<script>
    var citymap = {};
citymap['chicago'] = {
  center: new google.maps.LatLng(45.893682,-74.161776),
  radius: 8000,
  color: '#FF00FF'
};

citymap['test'] = {
  center: new google.maps.LatLng(45.893682,-74.161776),
  radius: 6000,
  color: '#FFFF00'
};
var cityCircle;

function initialize() {
var latLng = new google.maps.LatLng(45.8911875,-74.16832060); // Correspond au coordonnées de Lille
var latLng2 = new google.maps.LatLng(45.903826,-74.245745); // Correspond au coordonnées de Lille

  var mapOptions = {
    zoom: 10,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN 
  };

  var map = new google.maps.Map(document.getElementById('map'),
      mapOptions);



  var marker = new google.maps.Marker({
    position : latLng,
    draggable:true,
    animation: google.maps.Animation.DROP,
    map      : map,
    title    : "Test"
    //icon     : image // Chemin de l'image du marqueur pour surcharger celui par défaut
  });

}

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

Modal form option : 

 $("#rayon_dialogue").dialog({
      autoOpen: false,
      width:1200,
      height:650,
      draggable: false,
      resizable:false,
      closeOnEscape: true,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

Upvotes: 2

Views: 2325

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

I believe that it works if you change this call:

google.maps.event.addDomListener(window, 'load', initialize);

to this (if you're using jQuery):

$(document).ready(function() { initialize(); });

The problem is that the map is initializing before the document is ready, so it doesn't get the size of the div, and so the viewport doesn't fit it.

UPDATE: If that doesn't work, try adding it to the open event of the dialog:

open: function() {
    initialize();
}

Upvotes: 2

Related Questions