多个谷歌地图在一个页面上 [英] Multiple google maps on one page

问题描述

在一页上显示多个实体。对于每个实体都有一个谷歌地图。这就是我如何处理仅为一个实体显示地图：

  var map; 
 var geocoder; 
 $ b $（document）.ready（function（）{
 google.maps.event.addDomListener（window，'load'，initialize）; 
}）; 
 
函数initialize（）{
 geocoder = new google.maps.Geocoder（）; 
 var mapOptions = {
 zoom：16，
 center：new google.maps.LatLng（50.317408,11.12915），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 map = new google.maps.Map（document.getElementById（'map_canvas'），
 mapOptions）; 
 codeAddress（$（'＃entityID span＃address'）。text（））; 
 
 
函数codeAddress（address）{
 
 geocoder.geocode（{
'address'：address 
}，function（results ，状态）{
 if（status == google.maps.GeocoderStatus.OK）{
 map.setCenter（results [0] .geometry.location）; 
 var marker = new google。 maps.Marker（{
 map：map，
 position：results [0] .geometry.location 
））; 
} else {
 codeAddress（'germany' ）; 
} 
}）; 
} 
  

现在我想显示多个地图，每个地图都有不同的位置。那看起来怎么样？有任何想法吗？该算法应该能够处理动态数量的实体。解析方案

创建一个映射数组，像这样： / p>

  var maps = []; // array for now 
 var geocoder; 
 
 $（document）.ready（function（）{
 google.maps.event.addDomListener（window，'load'，initialize（'map_1'））; //两次调用
 google.maps.event.addDomListener（window，'load'，initialize（'map_2'））; 
}）; 
 
函数初始化（_id）{//为将来操作映射id 
 geocoder = new google.maps.Geocoder（）; 
 var mapOptions = {
 zoom：16，
 center：new google.maps.LatLng（50.317408,11.12915），
 mapTypeId：google.maps.MapTypeId.ROADMAP 
}; 
 maps [_id] = new google.maps.Map（document.getElementById（'map_canvas _'+ _ id），//不同容器
 mapOptions）; 
 codeAddress（$（'＃entityID span＃address'）。text（））; 
 
 
函数codeAddress（address，map_id）{
 
 geocoder.geocode（{
'address'：address 
}，function （results，status）{
 if（status == google.maps.GeocoderStatus.OK）{
 map.setCenter（results [0] .geometry.location）; 
 var marker = new google.maps.Marker（{
 map：maps [map_id]，//以第二个参数为目标的已定位地图
位置：results [0] .geometry.location 
}）; 
} else {
 codeAddress（'germany'）; 
} 
}）; 
} 
  

On one page multiple entities are displayed. For each entity there is a google map. This is how I deal with displaying a map for only one entity:

var map;
var geocoder;

$(document).ready(function(){
    google.maps.event.addDomListener(window, 'load', initialize);
});

function initialize() {
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng(50.317408,11.12915),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
        mapOptions);
        codeAddress($('#entityID span#address').text());
}

function codeAddress(address) {

    geocoder.geocode( {
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
        } else {
            codeAddress('germany');
        }
    });
}

Now I want to show multiple maps, each with a different location. How would that look like? Any ideas? The algorithm should be able to deal with a dynamic amount of entities.

解决方案

Create an array of maps, something like this:

var maps = []; // array for now
var geocoder;

$(document).ready(function(){
    google.maps.event.addDomListener(window, 'load', initialize('map_1')); // two calls
    google.maps.event.addDomListener(window, 'load', initialize('map_2'));
});

function initialize(_id) { // Map id for future manipulations
    geocoder = new google.maps.Geocoder();
    var mapOptions = {
        zoom: 16,
        center: new google.maps.LatLng(50.317408,11.12915),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    maps[_id] = new google.maps.Map(document.getElementById('map_canvas_'+_id), // different containers
        mapOptions);
        codeAddress($('#entityID span#address').text());
}

function codeAddress(address, map_id) {

    geocoder.geocode( {
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({
                map: maps[map_id], // target nedded map by second parametr
                position: results[0].geometry.location
            });
        } else {
            codeAddress('germany');
        }
    });
}

这篇关于多个谷歌地图在一个页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！