Google Maps Markers, Multiple Individual Events

Question

I'm trying to do something that I can't seem to find any examples of somebody having done before, and I need a little help.

I'm trying to use a element as an alternative to an InfoWindow. When you click a marker I want a div to appear instead of the infoWindow.

I already know how to make divs appear, I just need to figure out how to tie that to Google Maps/Marker Events.

The current chunk of code that I know;

google.maps.event.addListener(marker, 'click', (function(marker) {
  return function() {
    map.panTo(marker.getPosition());
    map.panBy(m_w_pan,0);
  }
})(marker));

addresses all markers on the map. If I remember correctly, removing the )(marker)); at the end makes it so that the code only references one marker, but how do I know which marker it relates to/pick the marker I want to tie the Event to?

Using a marker array (sample):

var memory = [
  ['A', 37.769587, -122.444344, 1],
  ['B', 37.769587, -122.454344, 2],
  ['C', 37.769587, -122.464344, 3],
  ['D', 37.769587, -122.474344, 4],
  ['E', 37.769587, -122.484344, 5]
];  

How do you specify that you want div 1 to appear when you click marker A, and div 2 to appear when you click marker B, etc?

I hope that makes sense.

Thanks!

EDIT: It seems my question is a bit confusing to people, I'll try to simplify it. How do I add an event to one specific marker out of the array of markers? Is this possible? Everybody is mentioning how to create infowindows for all markers in the array, what I need to do is target one specific marker. Maybe that will make this a little clearer? We'll see.

Answer 1

I've created a script that might help you, let me try to give you only what you could use in order to make your code work and see if what I did might help you.

I've used the following script:

http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js

So, lets say that you have an array of markes, which you will iterate in a for loop:

mapOptions = {
    zoom: 18,
    center: new google.maps.LatLng(youLat, yourLng),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    panControl: false,
    zoomControl: false,
    mapTypeControl: false,
    scaleControl: false,
    streetViewControl: false,
    overviewMapControl: false
};

map = new google.maps.Map(mapElementId, mapOptions);

ib = new InfoBox();

for (var i = 0; i < markers.length; i++) {

    var options = {
        content: markers[i].htmlContent,
        disableAutoPan: false,
        maxWidth: 0,
        pixelOffset: new google.maps.Size(100, 100),
        zIndex: null,
        closeBoxMargin: "-1000000px",
        closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
        infoBoxClearance: new google.maps.Size(1, 1),
        isHidden: false,
        pane: "floatPane",
        enableEventPropagation: false
    }

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i].lat, markers[i].lng),
        map: map,
        icon: path/to/icon
    });

    google.maps.event.addListener(marker, 'click', function() {
        map.panTo(marker.getPosition());
        ib.setOptions(options);
        ib.open(map, this);
    });

}

markers[i].htmlContent should be the content you want to set to the infoBox. Let me know if this works, My script is a lot more complicated and I dont want you to get lost in it, so ive isolated the most important parts that could help you. With this, you will have always one instance of the infoBox object, and for each marker, you change the options that that infobox will have.