Home/ Questions/Q 7840369
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T15:45:33+00:00

I have the following code( to draw a map using google map API V3):

  • 0

I have the following code( to draw a map using google map API V3):

 <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% ; width:100%;}
      </style>
      <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
      <script type="text/javascript">

        var previousPosition = null;

        function initialize() {
          map = new google.maps.Map(document.getElementById("map_canvas"), {
                zoom: 19,
                center: new google.maps.LatLng(48.858565, 2.347198),
                mapTypeId: google.maps.MapTypeId.ROADMAP
              });
        }

        if (navigator.geolocation)
          var watchId = navigator.geolocation.watchPosition(successCallback, null, {enableHighAccuracy:true});
        else
          alert("Votre navigateur ne prend pas en compte la géolocalisation HTML5");

        function successCallback(position){
          map.panTo(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
            map: map
          });
          if (previousPosition){
            var newLineCoordinates = [
               new google.maps.LatLng(previousPosition.coords.latitude, previousPosition.coords.longitude),
               new google.maps.LatLng(position.coords.latitude, position.coords.longitude)];

            var newLine = new google.maps.Polyline({
              path: newLineCoordinates,
              strokeColor: "#FF0000",
              strokeOpacity: 1.0,
              strokeWeight: 2
            });
            newLine.setMap(map);
          }
          previousPosition = position;
        };
      </script>
    </head>

    <body onload="initialize()">
      <div id="map_canvas"></div>
    </body>

    </html>

it works very well(you can test it), but when i put :

<div id="a">
 <div id="map_canvas"></div>
</div>

instead of:

 <div id="map_canvas"></div>

it does not work anymore…

why it does not work in the second version ?

PS: I have just given a simple code that represents my real code(just so you understand more easily)…

EDIT:
I do not really understand, I think this is a problem of selector … as said Michael Haren.

I tried to do this in my code but when i click in ‘click me’ it does not work…

<!DOCTYPE html> 
<html>

<head>
<style>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
/*
 #content,#right = #a,#map_canvas{..
*/
#content,#right { width:70%; height: 100%;margin-left:2%;  box-shadow: 0px 5px 5px 5px #aaa; }

</style>


<title>Géolocalisation restreinte</title>
<%@include file="includes/head.html" %>  
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
  <script type="text/javascript">

    function drawMap(){
   var locTunisie= new google.maps.LatLng(33.858565, 10.347198);
   map = new google.maps.Map(document.getElementById("right"), {
            zoom: 6,
            center:locTunisie,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          });     
}



</script>

</head>

<body>

<!-- iclure le  header-->
<%@include file="includes/header.html" %>     
<!-- fin inclure -->   

<div id="notification"><!-- zone de notification -->

</div>

<!--  Le contenu  -->
<div id="content">
    <form name="f">


<!--  draw the map Here  -->
         <div id="right">

        </div> 

    <div id="left">
        <a onclick="drawMap()">Click Here</a>

        <input type="date" placeholder="Date debut jj-mm-aaaa" name="dateDeb" id="dateDeb">&rarr;<input type="date"placeholder="Date Fin jj-mm-aaaa" name="dateFin"id="dateFin">
        <br/>
        <br/>

        <div class="scrollbar-b">

        <table class="newspaper-a" summary="">
    <caption>Liste des Automobile en lignes</caption>
    <thead>
        <tr>
            <th scope="col">Type</th>
            <th scope="col">Matriculation</th>
            <th scope="col">Marque</th>
            <th scope="col">Model</th>


        </tr>
    </thead>

           <tbody id="onLine">

           </tbody>
         </table>  
       </div>  <br/><br/>   
       <div class="scrollbar-b">       
        <table class="newspaper-a" summary="">
    <caption>Liste des Automobile hors lignes</caption>
    <thead>
        <tr>
            <th scope="col">Type</th>
            <th scope="col">Matriculation</th>
            <th scope="col">Marque</th>
            <th scope="col">Model</th>


        </tr>
    </thead>

           <tbody id="offline">

           </tbody>
         </table>  

        </div>
    </div>  




    </form>
</div>      
<!--  Fin contenu  -->    


<!-- iclure le footer-->
<%@include file="includes/footer.html" %>   
<!-- fin iclure-->
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue is that the 100%-sized map container is originally bounded by the window as the root element. But when you nest it inside another div, it’s now bounded by that div, which is much smaller (ie 0).

    You need to make the outer div bigger, too:

    #a, #map_canvas { height: 100% ; width:100%;}
^^^
    • 0