Размещение карты Google в ящик с красками


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

Прямо сейчас я скрываю див, что Google загружает карты в:

<div style="width:0; height: 0; overflow: hidden;">
    <div id="map_canvas" style="width:600px; height:400px; "></div>
</div>

Вот звонок в ящик с красками:

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_canvas"), myOptions);


$(document).ready(function(){

    $("#farm_on_google_maps").colorbox({
        inline: true,
        width:700,
        height:450,
        href : '#map_canvas'
        });
});

Хотя это работает, я интересно, если карту может быть загружен прямо на ящик с красками.



7521
6
задан 10 марта 2011 в 04:03 Источник Поделиться
Комментарии
2 ответа

Если вы хотите динамически вставить карту Google, а не просто ссылок на высоту, вы можете сделать следующее:

В HTML, имею базовые наброски ящик с красками готова:

<div id="box">
<div class="google-map"></div>
</div>

Затем, когда вы вызываете свой ящик с красками, вызвать в HTML функцию:

$("#farm_on_google_maps").colorbox({
inline: true,
width:700,
height:450,
html : $("#box").html()
});

Это позволит настроить ваш ящик с красками с основной структуры HTML. Затем нам нужно вставить Google Карты динамически, в ящик с красками следующим образом:

var googleMap = $("#cboxLoadedContent").find("div.google-map")[0];
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(googleMap, myOptions);

В cboxLoadedContent див создается colorbox, когда он вызывается, так что это просто вопрос поднять, и использовать его для установки Гугл Карты.

4
ответ дан 14 марта 2011 в 11:03 Источник Поделиться

Нет ничего проще, чем этот:

<a href="URLTOMAP" class="colorbox">Map</a>

$(document).ready(function(){
$(".colorbox").colorbox({ rel:'colorbox' });
});

Делает точно, что он говорит на олово.

1
ответ дан 18 декабря 2012 в 12:12 Источник Поделиться