वेबसाइट मेनू ओवरले के साथ एक पूर्ण स्क्रीन Google मानचित्र कैसे बनाएं?

Question

मैं ऐसी वेबसाइट का निर्माण कर रहा हूं जिसमें मुख्य रूप से बड़े (मैनिपुलेबल) ग्राफ और Google मानचित्र विभिन्न प्रकार के डेटा के साथ ओवरलेड हो। वेबसाइट नेविगेशन शीर्ष पर HTML divs का एक क्षैतिज पट्टी है - लेकिन शीर्ष पर सभी तरह से नहीं।

मैं नक्शा एपीआई/ऐप डिस्प्ले को "नीचे" नेविगेशन बनाने और खिड़की के बाकी हिस्सों को लेने का तरीका ढूंढना चाहता हूं। क्या कोई सलाह दे सकता है?

Answer 1

आप इस तरह मतलब है:

<div id="container"> 
    <div id="nav">Nav Menu</div> 
    <div id="map"></div> 
</div> 

सेट कुछ शैलियों:

html { height: 100% } 
body { height: 100%; margin: 0px; padding: 0px } 
#container { width: 100%; height: 100% } 
#nav { z-index: 100; position: absolute; 
     margin: 10px 0px 0px 200px; background-color: #fff; 
     border: 1px #000 Solid; padding: 5px; } 
#map { width: 100%; height: 100% } 

नक्शे लोड करें:

var mapOptions = { 
     center: new google.maps.LatLng(40.435833800555567, -78.44189453125), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     zoom: 11 
     };  
var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

Answer 2

एक छोटी http://jsfiddle.net/8PpjH/1/

एक कंटेनर में जोड़ें को सुधारना पिछले संस्करण:

HTML: (सिर्फ एक कंटेनर)

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

सीएसएस:

#map{ 
    height: 400px; 
    width: 300px; 
} 

जावास्क्रिप्ट (आप कुछ देखने के लिए एक ऊंचाई और चौड़ाई को परिभाषित करने के लिए है ऊपर अपने उद्देश्य के लिए, लेकिन) :

function initialize() { 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
    var myOptions = { 
     zoom: 8, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("map"), 
      myOptions); 
} 

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

स्रोत: Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null