How to get some information in google maps without click event on marker and show this in a div, other than infoWindow

问题

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). 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. 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

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). 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)

回答1:

You can use the addDomListener event of the google maps api. 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.

回答2:

From the google Docs in the section about InfoWindow:

Note that if you call open() without passing a marker, the InfoWindow will use the position specified upon construction through the InfoWindow options object.

So in your code, why don't you simply init your infoWindow and call the open() method? I am not particularly familiar with the api, but how about:

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.

回答3:

You can use jQuery to .triger() a click event on the first marker on document.ready:

$(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.

When you bind to document.ready you don't need encapsulate document in quotes:

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

Or you could use the short-hand if you're into that sort of thing:

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

UPDATE

You can place the trigger function call after your for loop where you are setting up the markers:

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');
    }
}

回答4:

You can fire a tilesloaded event on the map object. Check out the Map reference for events

tilesloaded waits until the map tiles are actually loaded before firing. 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();
  });

来源：https://stackoverflow.com/questions/8581392/how-to-get-some-information-in-google-maps-without-click-event-on-marker-and-sho

标签

javascript

jquery

google-maps

google-maps-api-3

google-maps-markers