将Google地图复制到第</div>页上的单独<div>元素

时间:2013-08-23 09:25:47

标签: javascript google-maps

我在网页上有一张谷歌地图。我正在使用以下代码行来获取地图并将其分配给新变量。

 newmap = map.getMap();

当我将newmap打印到控制台时,它显示正在将地图分配给变量。我现在想要将具有完全相同选项的地图复制到以下div ....

 <div id="map-larger-canvas"></div>

我知道如何做到这一点?

1 个答案:

答案 0 :(得分:0)

为每个地图定义选项,并在init两次之后:

var map_options = {
        center: new google.maps.LatLng(41.811729,12.738513),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

function initialize() {
    var map1 = document.getElementById('map-1st');
    var map_canvas = document.getElementById('map-larger-canvas');

    var map1 = new google.maps.Map(map1, map_options)
    var map2 = new google.maps.Map(map_canvas, map_options);
}
google.maps.event.addDomListener(window, 'load', initialize);

我以这种方式使用Json,看看:

$('#map_canvas_europe').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON( 'json/locations_europe.json', function(data) { 
        $.each( data.markers, function(i, marker) {
            $('#map_canvas_europe').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                'bounds': true 
            }).click(function() {
                $('#map_canvas_europe').gmap('openInfoWindow', { 'content': marker.content }, this);
            });
        });
    });
});

$('#map_canvas_asia').gmap().bind('init', function() { 
    // This URL won't work on your localhost, so you need to change it
    // see http://en.wikipedia.org/wiki/Same_origin_policy
    $.getJSON( 'json/locations_asia.json', function(data) { 
        $.each( data.markers, function(i, marker) {
            $('#map_canvas_asia').gmap('addMarker', { 
                'position': new google.maps.LatLng(marker.latitude, marker.longitude), 
                'bounds': true 
            }).click(function() {
                $('#map_canvas_asia').gmap('openInfoWindow', { 'content': marker.content }, this);
            });
        });
    });
});