Google मानचित्र ज़ूम नियंत्रण सही ढंग से प्रदर्शित नहीं कर रहे हैं

Question

मैंने API3 का उपयोग करके एक साधारण मानचित्र बनाया है। हालांकि, शीर्ष बाएं दिखने वाले ज़ूम नियंत्रण "Squashed" - वे ठीक से प्रदर्शित नहीं हो रहे हैं। बाकी का नक्शा ठीक है। अजीब चीज यह है कि मैंने पिछली साइटों के लिए एक ही विधि का उपयोग किया है, जहां चीजें अच्छी तरह से काम करती हैं।

var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
var marker; 
var markersArray=[]; 
var html; //to create urls 
var directionsVisible = new Boolean(); 
directionsVisible = false; 

function initialize() {  
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var orchards = new google.maps.LatLng(52.512805,-2.76007); 
    var myOptions = { 
     zoom:14, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: orchards, 
     panControl: false 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    addMarker(orchards); 
} 

कृपया किसी को भी कर सकते हैं सुझाव क्या गलत है:

यहाँ कुछ कोड है?

Answer 1

मुद्दा सार्वभौमिक img { max-width: 100%; }

की वजह से होना चाहिए अपने सीएसएस करने के लिए यह एक प्रयास करें

.gmnoprint img { 
    max-width: none; 
} 

Answer 2

अगर आप Dreamweaver द्रव ग्रिड सुविधा आपके डिफ़ॉल्ट की स्थापना इस तरह दिखना चाहिए का उपयोग कर रहे:

img, object, embed, video { 
    max-width: 100%; 
} 
/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
} 

इस प्रयास करें:

object, embed, video { 
    max-width: 100%; 
} 
#map_canvas img { max-width: none; } 
/* IE 6 does not support max-width so default to width 100% */ 
.ie6 img { 
    width:100%; 
} 

बस कोड को प्रतिस्थापित करें।

Answer 3

शुरू में मैं बाद में एक ही समस्या का सामना करना पड़ता है, तो पर मुझे पता है

google.maps.event.addDomListener (खिड़की, 'लोड', को प्रारंभ);

बहुत महत्वपूर्ण भूमिका निभाते हैं।

मैंने इसे जोड़ा और मेरे लिए यह काम करता है।

कोड के बाद चेकआउट।

सीएसएस कोड

<style> 
     #divmap { 
     height: 300px; 
     width:100%; 
     margin: 10px; 
     padding: 10px; 

     } 
     .gm-style img { max-width: none; } 
     .gm-style label { width: auto; display: inline; } 
</style> 

जे एस

<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script> 

<script> 

     function initialize() { 
     var mapOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng(21,78), 
     panControl:true, 
     zoomControl:true, 
     mapTypeControl:true, 
     scaleControl:true, 
     streetViewControl:true, 
     overviewMapControl:true, 
     rotateControl:true 
     } 
     var map = new google.maps.Map(document.getElementById("divmap"), 
      mapOptions); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

और अंतिम एचटीएमएल

<div id="divmap"></div>