Google Map API 3 - Карта не показывает полный/размер

Я пытаюсь получить пользовательский API-интерфейс google на веб-сайте, но проблема в том, что карта не отображается полностью, только часть карты отображается. enter image description here Google Map API 3 - Карта не показывает полный/размер

Ниже код:

код расслоение плотной:

$(document).ready(function(){ 

var map=null; 
    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(24.3573, 54.4636), 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var currCenter = map.getCenter(); 
     google.maps.event.trigger(map, 'resize'); 
     map.setCenter(currCenter); 
     map.setZoom(14); 

     var markerOptions = { 
      position: new google.maps.LatLng(24.3573, 54.4636), 
      map: map 
     }; 
     var marker = new google.maps.Marker(markerOptions); 
     marker.setMap(map); 

     var infoWindowOptions = { 
      content: '<b>Compnay Name</b><br> Is Here!' 
     }; 
     var infoWindow = new google.maps.InfoWindow(infoWindowOptions); 
     infoWindow.open(map, marker); 

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

HTML код:

<div class="container"> 
<h1>Location Map</h1> 
<p></p> 
<div id="map-canvas"></div> 
</div>

CSS с ода:

.container {width: 100%; height: 100%;} 
.container #map-canvas { 
width: 500px; 
height: 250px; 
margin: 0; 
border: 1px solid rgb(225, 225, 225);} 
.map h2{ 
font-size: 16px; 
font-weight: bold; 
padding: 20px 0 6px 0;}

Pls дайте мне знать, что я делаю неправильно?

Я слышал, что 'google.maps.event.trigger (map,' resize ');' обычно делает трюк, но в моем коде это, похоже, не работает, возможно, я не место в нужном месте .. PLS помощи.

спасибо.

источник

2013-08-21 Bipin

Возможный дубликат [Карта не отображается в API Google Maps JavaScript v3 при вложении в тег div] (http://stackoverflow.com/questions/16349476/map-isnt- show-on-google-maps-javascript-api-v3-when-nested-in-a-div-tag) – geocodezip

попытайтесь поместить свой 'google.maps.event.trigger (map, 'resize')' за свой последний действие, которое вы делаете с картой. Может быть, после 'google.maps.event.addDomListener (окно, 'load', initialize);' –

Ваш код, опубликованный для меня, [live example] (http://www.geocodezip.com/v3_SO_jquery_topLeftCorner.html) – geocodezip

У меня была та же проблема при использовании вкладки jQuery плагина. Я вызываю функцию initialize(), когда документ готов ($ (document) .ready (function() {initialize();})). Я пытаюсь вызвать функцию initialize(), когда активирована вкладка карты, и проблема исчезла. Это просто мой опыт. Удачи!

Джонни

источник

2014-02-23 09:29:24 Johnny

@Bipin: У меня есть решение для Вас, чтобы исправить эту ошибку

Добавить функцию ниже в вашем Js кодекса

function resizeMap(m) { 
     x = m.getZoom(); 
     c = m.getCenter(); 
     google.maps.event.trigger(m, 'resize'); 
     m.setZoom(x); 
     m.setCenter(c); 
    };

// С м является "карте"

И затем нажмите функцию после

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

Надеясь, что решение может помочь.

источник

2014-12-05 08:20:31 David

Мне удалось заставить это работать, просто позвонив «google.maps.event.trigger (m, 'resize'); без других линий. – Mike

У меня была такая же проблема, но в моем случае карта должна была всплывать. Я преодолел его, используя функцию javascript setTimeout, чтобы дождаться окончания всплывающей анимации, а затем я вызвал функцию инициализации карты. Надеюсь, это поможет.

Кроме того, ваша карта выглядит искаженной. Проверьте этот вопрос для решений: Google Maps api v3 tools: visual distortions?

источник

2015-02-10 15:56:05

Google Map API 3 - Карта не показывает полный/размер

ответ

Смежные вопросы