如何在没有点击标记事件的情况下在谷歌地图中获取一些信息，并在除了infoWindow之外的div中显示

Question

Hi I am showing some markers on my google map and on click of the marker, I am calling the click event and showing some info about that place to the right side(area other than Map and not as an infoWindow). 嗨我在谷歌地图上显示一些标记，点击标记，我正在调用点击事件并向右侧显示有关该地点的一些信息（地图以外的区域而不是infoWindow）。 Now this event gets fired on click, and by default when page loads my div remains blank, How can I have the div the basic information being shown up once the map loads up. 现在这个事件在点击时被触发，默认情况下，当页面加载时我的div仍为空白，如何在地图加载后让div显示基本信息。 I need to show the information that corresponds to the marker that is the center point of the map, and later when the users click the marker icons the info should change and correspond to the particular marker being clicked 我需要显示与作为地图中心点的标记对应的信息，稍后当用户单击标记图标时，信息应该更改并对应于要点击的特定标记

I have tried something but it doesn't work: 我尝试了一些东西，但它不起作用：

function loadMap() {
    var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
    var myOptions = {
        zoom: 3,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    var places = [];
    places.push(new google.maps.LatLng(51.43581, -0.51744));
    places.push(new google.maps.LatLng(48.87187, 2.31764));
    places.push(new google.maps.LatLng(45.45979, 9.19681));

    var infowindow;
    for(var i = 0; i<places.length; i++) {
        var marker= new google.maps.Marker({
            position: places[i],
            map: map,
            title: 'Place' + i
        });


        (function (i,marker){
            google.maps.event.addListener(marker, 'click' , function() {
                infowindow.setContent('PLace Number' + i)
                infowindow.open(i, marker)
            });
        });(i, marker);
    }
}
$("document").ready(function () {
    loadMap();
});

UPDATE EDITED 更新已编辑

Basically I need something like Layer KML features 基本上我需要像Layer KML功能这样的东西

But the info should come on the right hand side by default for the first time. 但是信息应该是默认情况下第一次出现在右侧。 Later on when the marker is clicked, the info should change. 稍后单击标记时，信息应该更改。 I am also not adamant that I need this info in a kml file(xml is fine with me as well). 我也不坚持在kml文件中需要这些信息（xml对我来说也很好）。 I can just have a marker and info should popup on click and for the first time be default as well depending on the location of the user. 我可以只有一个标记，并且信息应该在点击时弹出，并且第一次也是默认的，具体取决于用户的位置。

Bottom Line: I need the info to appear on click of a marker and by default when the page loads the info should appear corresponding to the center point of the map. 底线：我需要在点击标记时显示信息，默认情况下，当页面加载时，信息应显示为对应于地图的中心点。 which means users coming from different locations will see different info's corresponding to their location from where they are coming.(I am centering the map based on users location) 这意味着来自不同位置的用户将看到与他们来自哪里的位置相对应的不同信息。（我根据用户位置将地图居中）

Answer 1

You can use the addDomListener event of the google maps api. 您可以使用google maps api的addDomListener事件。 Something like this: 像这样的东西：

<script>
  function initialize() {

    // Map initialization

  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
  <div id="map_canvas"></div>
</body>

Although the above code is Maps Javascript API code, the addDomListener() method binds to the window object of the browser and allows the API to communicate with objects outside of the API's normal domain. 虽然上面的代码是Maps Javascript API代码，但addDomListener（）方法绑定到浏览器的window对象，并允许API与API的普通域之外的对象进行通信。

further reading 进一步阅读

Actually the basic Idea is that you need to read an XMl and parse the data and and show this in a seperate div on right side., This div you can create dynamically when you load the map eg: 实际上，基本的想法是你需要读取一个XMl并解析数据并在右侧的单独div中显示。这个div你可以在加载地图时动态创建，例如：

$("#body").append("<div class='newdiv'></div>")

Answer 2

You can use jQuery to .triger() a click event on the first marker on document.ready : 您可以在document.ready上的第一个标记上使用jQuery来.triger()一个click事件：

$(marker).trigger('click');

This will run the code you have already written and make it so when the page loads your div will be populated with data from whatever element you trigger the click on. 这将运行您已编写的代码，并在页面加载时使用div将填充来自触发单击的任何元素的数据。

When you bind to document.ready you don't need encapsulate document in quotes: 当您绑定到document.ready您不需要在引号中封装document ：

$(document).ready(function () {...});

Or you could use the short-hand if you're into that sort of thing: 或者你可以使用短手，如果你是这样的事情：

$(function () {...});

UPDATE UPDATE

You can place the trigger function call after your for loop where you are setting up the markers: 您可以在设置标记的for循环后放置trigger函数调用：

for(var i = 0; i<places.length; i++) {
    var marker= new google.maps.Marker({
        position: places[i],
        map: map,
        title: 'Place' + i
    });


    (function (i,marker){
        google.maps.event.addListener(marker, 'click' , function() {
            infowindow.setContent('PLace Number' + i)
            infowindow.open(i, marker)
        });
    });(i, marker);

    //only run on the first marker
    if (i === 0) {

        //trigger a click event to show the first info-window
        $(marker).trigger('click');
    }
}

Answer 3

You can fire a tilesloaded event on the map object. 您可以在地图对象上触发tilesloaded事件。 Check out the Map reference for events 查看事件的地图参考

tilesloaded waits until the map tiles are actually loaded before firing. tilesloaded等待直到在触发之前实际加载地图图块。 Using your code, you could do something like this: 使用您的代码，您可以执行以下操作：

function loadMap() {
    var myLatlng = new google.maps.LatLng(40.46998, -3.68705);
    var myOptions = {
        zoom: 3,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);
    google.maps.event.addListener(map, 'tilesloaded', function() {
    doSomething();
  });

Answer 4

From the google Docs in the section about InfoWindow: 关于InfoWindow部分中的google文档：

Note that if you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindow options object. 请注意，如果在不传递标记的情况下调用open（），InfoWindow将使用InfoWindow选项对象在构造时指定的位置。

So in your code, why don't you simply init your infoWindow and call the open() method? 那么在您的代码中，为什么不简单地初始化infoWindow并调用open()方法？ I am not particularly familiar with the api, but how about: 我对api不是特别熟悉，但是怎么样：

var infowindow = new google.maps.InfoWindow({
    content: 'your initial text'
});
infowindow.open();

Or if you need the marker for special purposes on the infowindow, init an marker with the center position and use that in the infowindow.open(your_initial_pos) call. 或者，如果您需要在infowindow.open(your_initial_pos)上出于特殊目的使用标记，请使用中心位置初始化标记并在infowindow.open(your_initial_pos)调用中使用该标记。

如何在没有点击标记事件的情况下在谷歌地图中获取一些信息，并在除了infoWindow之外的div中显示

问题描述

4 个解决方案

解决方案1
4 已采纳 2011-12-29 18:23:50

解决方案2
0 2011-12-20 20:22:10

解决方案3
0 2011-12-20 20:25:57

解决方案4
0 2011-12-30 13:09:15

如何在没有点击标记事件的情况下在谷歌地图中获取一些信息，并在除了infoWindow之外的div中显示

问题描述

4 个解决方案

解决方案1 4 已采纳 2011-12-29 18:23:50

解决方案2 0 2011-12-20 20:22:10

解决方案3 0 2011-12-20 20:25:57

解决方案4 0 2011-12-30 13:09:15

解决方案1
4 已采纳 2011-12-29 18:23:50

解决方案2
0 2011-12-20 20:22:10

解决方案3
0 2011-12-20 20:25:57

解决方案4
0 2011-12-30 13:09:15