Google Map ne montre pas l'intérieur div disposition liquide

-1

Je suis en train de charger une carte google dans une page avec une mise en page liquide.Google Map ne montre pas l'intérieur div disposition liquide

C'est le CSS de mon index.php page:

html, body { 
    margin: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
    position: fixed; 
    font: normal 13px/150% Arial, Helvetica, sans-serif; 
} 
#div1 { 
    width: 50%; 
    height: 50%; 
    float: left; 
    background: #DDD; 
    overflow: scroll; 
} 
#div2 { 
    width: 50%; 
    height: 100%; 
    float: right; 
    background: #AAA; 
    overflow: scroll; 
} 
#div3 { 
    width: 50%; 
    height: 50%; 
    float: left; 
    background: #777; 
    overflow: scroll; 
}

Ma carte est contenue dans une autre page map.php Voici le contenu de ma page map.php:

<html> 
<head> 
    <style type="text/css"> 
     html { width: 100%; height: 100%; } 
     body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; } 
     #map { width: 100%; height: 100%; border: 0px; padding: 0px; } 
    </style> 

    <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script> 
    <script type="text/javascript"> 
     // google map code 
    </script> 
</head> 

<body onload="initMap()"> 
    <div id="map"></div> 
</body>

La carte fonctionne très bien quand je l'ouvre de map.php. Mais quand j'essaie de le charger à l'intérieur div # 2 de index.php, tout ce que je vois est une zone grise.

Je ne sais pas ce qui cause le problème. J'apprécierais grandement votre aide. Merci!

EDIT:

<?php 
    // include db connect class 
    require_once 'db_connect.php'; 

    // connecting to db 
    $db = new DB_CONNECT(); 
?> 

     <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script> 
     <script type="text/javascript"> 
      // google map code with a query inside 
     </script> 

     <div id="map"></div>

La carte est toujours pas montrer.

Source

2013-03-09 user1994644

Expliquez comment vous l'ouvrir dans un 'div' sur un autre page? L'autre page via ajax? Montre le code qui charge la carte dans le 'div'. – Sparky

oui, j'ai un script dans mon index.php '$ (" # div2 "). Load (" map.php ");' – user1994644

C'est tout votre problème. Vous ne pouvez pas déclencher un autre événement 'body.onload' de telle sorte que vous n'exécutez jamais la fonction' initMap() '. – Sparky

Le problème est ici ...

<body onload="initMap()">

Vous ne serez pas cet événement body.onload si cette page est chargée par ajax. body.onload n'est lancé qu'une seule fois lorsque la page d'origine (index.php) est chargée ou actualisée. Tout contenu chargé sur cette page avec ajax n'obtiendra pas d'autre événement body.onload. (C'est l'un des principaux points de ajax, pour charger le contenu sans rafraîchir la page.)

Pour contourner ce problème, utiliser the .load() callback function ... il se déclenche après la charge ajax est terminée.

$("#div2").load('map.php', function() { 
    // put init inside the callback 
    initMap(); 
});

Je voudrais également re-facteur le code HTML de map.php de sorte que vous ne finissent pas avec HTML incorrect index.php. En d'autres termes, vous ne pouvez pas avoir de code HTML valide avec les tags <html></html>, <head></head> et <body></body> à l'intérieur d'un <div>.

Déplacez votre CSS dans votre fichier CSS global ou le head de index.php, et votre page map.php doit contenir seulement les éléments suivants:

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script> 
<script type="text/javascript"> 
    // google map code 
    function initMap() { // etc. 
     .... 
</script> 
<div id="map"></div>

Source

2013-03-09 15:40:53 Sparky

Ok merci fera un essai – user1994644

Will do. En ce moment je ne suis pas vraiment sûr comment je vais refactoriser ma map.php pour exécuter le javascript (avec des bits de code php) sans les balises html – user1994644

@ user1994644, voir mes modifications. Le code, lorsqu'il est chargé dans 'div2', finira par _inside_ des balises' html' et 'body' qui appartiennent déjà à' index.php'. – Sparky

Google Map ne montre pas l'intérieur div disposition liquide

Répondre

Questions connexes