google maps v3 выглядит искаженным и удвоенным

Этот код отлично работает на jsfiddle и любом другом приложении для песочницы JavaScript, но он не работает на моем веб-сайте.google maps v3 выглядит искаженным и удвоенным

HTML:

<div id="mapcontainer" style="position:absolute;width:280px;height:160px;"></div>

JS:

<script src="http://maps.googleapis.com/maps/api/js?key=*********************************&sensor=false"></script> 
<script> 
    var myCenter = new google.maps.LatLng(33.436150, -117.623090); 

    function initialize() { 
     var mapProp = { 
      center: myCenter, 
      zoom: 9, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("mapcontainer"), mapProp); 

     var marker = new google.maps.Marker({ 
      position: myCenter, 
     }); 

     marker.setMap(map); 

     google.maps.event.trigger(map, 'resize') 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 
</script>

Это выглядит следующим образом:

enter image description here

Обратите внимание, как верхняя 2/3 является искажено, а нижняя 1/3 - в порядке. Как я могу это исправить?

источник

2013-06-29 Thomas Lai

У вас есть ссылка на ваш сайт, так как это должно быть вызвано чем-то другим? Вероятно, конфликтующие JS или CSS. – tw16

мой сайт находится на oceankarma.co ... имя пользователя oceankarma, а пароль Tycoonaks90 –

просто интересно ... что вы редактировали? –

Возможно, в коде есть какая-то другая проблема.

Ваш код Google Maps выглядит идеально, я сделал fiddle, чтобы показать разницу.

С вашего скрипта, похоже, вы с использованием ключа для карт Google. Я думаю, что это не обязательно в v3. поэтому попробуйте заменить его, как показано ниже.

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

источник

2013-06-29 19:21:43 Praveen

Я скопировал и вставил код с вашей скрипки, и это не имеет значения. –

@ DABAU5NERD О, это должно сработать. – Praveen

@ DABAU5NERD Я проверил ваш сайт, и, похоже, все в порядке? Можете ли вы поделиться своими мыслями по этому вопросу? – Praveen

Я выяснил аналогичный вопрос из-за решения этой проблемы в комментариях.

Это был случай, глядя на одном из изображений в карте с помощью CSS отладчик и увидеть, если он пострадал от других стилей на странице

источник

2015-10-08 19:41:45 Shane

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

$(window).resize(function(){ initMap(); });

«initMap();» часть - это просто обновляет функцию карты. Если вы назвали функцию чем-то другим, что вам нужно использовать. В конечном итоге я понимаю, что это исправление проблемы. Но он работает как шарм и едва заметен для конечного пользователя. Все, что вы делаете, это обновление функции карты при изменении размера окна.

источник

2015-11-19 20:48:36

google maps v3 выглядит искаженным и удвоенным

ответ

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