У меня странная ситуация с использованием Google Maps API.Вот что я пытаюсь сделать:
Пользователи могут загружать фотографии на мой сайт.У них может быть информация о Geo-тегах в EXIF, которую я прочитал.Если они есть, я бы хотел показать небольшую встроенную карту сбоку изображения.
Проблема в том, что я могу показать карту, когда размещаю элемент холста карты непосредственно под телом, но не где-либо еще.Вот пример работы карты:
http://ferdy.dnsalias.com/apps/jungledragon/image/3/leaf.html
Это временный URL-адрес моей среды разработки.Не берите в голову сломанный макет страницы, это просто технический тест, чтобы доказать, что код карты, который я использую, функционален, он даже учитывает фактические координаты.
Так что в этом URL картаЭлемент canvas находится прямо под <body>:
<body>
<div id="map_canvas" style="width: 50%; height: 50%"></div>
Как видите, это работает.Но это не то место, где я хочу, чтобы появилась встроенная карта, она должна быть здесь, в DOM:
<html>-><body>-><div id="wrapper">-><div id="content"><aside>->map canvas here
По сути, я хочу, чтобы она была на боковой панели.Однако когда я перемещаю туда элемент div холста, ничего не отображается.Я пробовал несколько размещенных в DOM, и кажется очень чувствительным, где во вложении находится элемент canvas.
Не уверен, поможет ли это, но мой подход к макету реализует «липкий» колонтитул.
Обновление: Я понял, что когда я помещаю div холста карты где-нибудь внутри моего #wrapper div, он не работает, но работает вне его.Это еще не решает мою проблему, потому что мне нужен этот div-обертка, также я не могу понять, почему он блокирует рендеринг, вот CSS-код div-обертки:
#wrapper { display:block;width: 960px; margin:0 auto;min-height: 100%;overflow:auto; }
Даже если я отключу всеОбъявление CSS этой обертки, она все равно не отображает карту.Mystery!