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

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

You can provide a `callback` parameter on the request of the Google maps JS file like so: `http://maps.google.com/maps/api/js?sensor=false&callback=googleMapsLoaded` The globally scoped `googleMapsLoaded` function (obviously you can change this to whatever you want) gets called after the map is loaded. In that function you can locate the center-most pin to display its data in your right-side information panel. — potench, Dec 30 '11 at 01:32

score 4 · Accepted Answer · answered Dec 29 '11 at 18:23

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.

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 e-g:

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

Jasper · Answer 2 · 2011-12-30T17:12:46.730

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

@mike Here is a StackOverflow question/answer that should help you with that: http://stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript — Jasper, Dec 20 '11 at 20:35
This approach seems a bit far-fetched to me; I am sure there is ways you can achieve this via the api itself. — kontur, Dec 30 '11 at 13:10

score 0 · Answer 3 · edited Dec 24 '12 at 07:18

0

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

edited Dec 24 '12 at 07:18

onkar

4,427
10
52
89

answered Dec 20 '11 at 20:25

Mano Marks

8,761
3
27
28

I tried tilesloaded but it doesn't work. actually the data that I want to put in the div comes from kml. so i wonder is there a different event listener for kml layer – Mike Dec 21 '11 at 11:42

score 0 · Answer 4 · answered Dec 30 '11 at 13:09

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.

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

4 Answers4

Linked