4

I am using google maps api v3.

Using javascript, how can i open the infowindow of a marker given it's coordinates?

T J
  • 42,762
  • 13
  • 83
  • 138
raklos
  • 28,027
  • 60
  • 183
  • 301
  • can you please share some code? do u have the markers saved? – KJYe.Name Feb 21 '11 at 16:16
  • yes the markers are saved and show on the map. i have a list of links outside the map, which when i currently click i am centering the map to them coordinates but i also want it to load the info window of the marker at them coordinates – raklos Feb 21 '11 at 16:26
  • pls share the code on jsbin or jsfiddle so we can fix it in a second. ;) – Luca Filosofi Feb 21 '11 at 17:12

1 Answers1

12

Here is the Jsfiddle that shows you how to do an "outside" of the map JavaScript interaction w/ the Markers. Yes, you do need to save the markers and it's appropriate InfoWindow within an array so you can access it. I created two random markers and use the coordinates from the array ships.

Here are the HTML and with two generic links where clicking link one would center to maker 1 and popup its infowindow and for marker 2 vise versa:

    <div id='map_canvas'></div>
    <a href='#' onClick="gotoPoint(1);">Click for marker 1</a><br/>
    <a href='#' onClick="gotoPoint(2);">Click for marker 2</a>

Within createMarker i store the created maker along with its associate InfoWindow and push it onto the global scope's marker array. On hover the marker, it'll open its associate infowindow:

function createMarker(lat, lon, html) {
    var newmarker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lon),
        map: map,
        title: html
    });

    newmarker['infowindow'] = new google.maps.InfoWindow({
            content: html
        });

    google.maps.event.addListener(newmarker, 'mouseover', function() {
        this['infowindow'].open(map, this);
    });

    marker.push(newmarker);
}

Here in gotoPoint i simply ass in the marker number as a parameter. I basically set the center of the map to that of marker by using new google.maps.LatLng and use the marker's lat and lng by calling marker[myPoint-1].position.lat(); and marker[myPoint-1].position.lng();, and open its associate InfoWindow with marker[myPoint-1]['infowindow'].open(map, marker[myPoint-1]);:

function gotoPoint(myPoint){
    map.setCenter(new google.maps.LatLng(marker[myPoint-1].position.lat(), marker[myPoint-1].position.lng()));
    marker[myPoint-1]['infowindow'].open(map, marker[myPoint-1]);
}

Let me know if you have any questions about this example.

KJYe.Name
  • 16,969
  • 5
  • 48
  • 63