Google maps 多个地理编码器请求谷歌地图api v3

Google maps 多个地理编码器请求谷歌地图api v3,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,您好,我一直在使用谷歌地图API v3和地理编码器来显示地图,到目前为止,它运行良好。当我试图在同一页上显示另一个地图时,只加载第一个地图。第二张地图只是显示一个灰色区域。没有加载地图。我必须做多个地理编码器的要求,但我该怎么做呢。以下是我目前的代码: var geocoder; var map; var map2; var marker; var infobox; function initialize() { //Geocoder geoco

您好,我一直在使用谷歌地图API v3和地理编码器来显示地图,到目前为止,它运行良好。当我试图在同一页上显示另一个地图时,只加载第一个地图。第二张地图只是显示一个灰色区域。没有加载地图。我必须做多个地理编码器的要求,但我该怎么做呢。以下是我目前的代码:

    var geocoder;
var map;
var map2;
var marker;
var infobox;

function initialize() {
            //Geocoder
        geocoder = new google.maps.Geocoder();
        var address = 'Times Square, New York'; 
        geocoder.geocode( { 'address': address }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
            //Marker
            var companyLogo = new google.maps.MarkerImage('images/pin.png',
                new google.maps.Size(20,20),
                new google.maps.Point(0,0),
                new google.maps.Point(10,10)
                );
            //Marker shadow 
            var companyShadow = new google.maps.MarkerImage('images/pin_shadow.png',
                new google.maps.Size(25,33),
                new google.maps.Point(0,0),
                new google.maps.Point(0, 25)
                );
            //Display the marker
            var marker = new google.maps.Marker({
                map: map,
                icon: companyLogo,
                shadow: companyShadow,
                position: results[0].geometry.location,
                title:"Some title"
            });
            //Infobox
            infobox = new InfoBox({
                content: document.getElementById("infobox"),
                disableAutoPan: false,
                maxWidth: 320,
                pixelOffset: new google.maps.Size(-142, -150),
                zIndex: null,
                boxStyle: {
                    opacity: 1,
                    width: "300px"
                    },
                closeBoxMargin: "0px",
                closeBoxURL: "images/close_tooltip.png",
                infoBoxClearance: new google.maps.Size(1, 1)
                });
                        //Open infobox
            google.maps.event.addListener(marker, 'mouseover', function() {
                infobox.open(map, this);
                map.panTo(geocoder);
                });

            } else {
                alert("Geocode was not successful for the following reason: " + status);
                }
            });

                    //Map options
        var myOptions = {
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            scrollwheel: false
        }
    //Call Maps 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    map2 = new google.maps.Map(document.getElementById("map_canvas2"), myOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);

用于设置第二个贴图的
myOptions
对象不包含
center
属性,因此第二个贴图不能居中

调用地理编码器时,设置第一张地图的中心:

map.setCenter(results[0].geometry.location);
但是您没有设置第二个贴图


如果不设置地图的中心,它将保持灰色和空白。

“它不工作”。。。什么不起作用?地理编码器?第二张地图?“不工作”是什么意思?错误控制台中记录了哪些错误?(等,等)对不起,我应该说明一下。第一张地图运行良好。第二张地图根本不会出现。多亏了这张地图才出现,但当然,这两张地图中只有一个相同的位置。我现在有两张完全相同的地图。你能告诉我一个如何获得两个或多个不同位置的解决方案吗?你可以重复你已经为
map
编写的代码,但是使用
map2
,以便将结果应用到正确的地图上。但是,您不应该在每次打开页面时对已知位置进行地理编码。只需找到要显示的位置的坐标,然后使用
setCenter()
设置每个地图的中心。更少的代码出错,更少的对谷歌资源的调用(对你的用户来说也更快)。谢谢你的提示。我希望能与Wordpress合作,因此每个帖子的位置都是未知的,并且由用户添加。不管怎样,我想了些办法。