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.

InfoWindow is rendered as a div... and you can set HTML as the content. What's the purpose behind not using InfoWindow? — MikeSmithDev, Dec 06 '13 at 22:43
possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example), same issue, same fix, just with your div instead of the infowindow. — geocodezip, Dec 06 '13 at 22:46
MikeSmithDev- Once the marker is clicked the map becomes less important than the div on the project I'm working on. I want it to open a window that takes up about 2/3 of the browser window and leaves just a little strip of the map. I already have the divs and their content put in the html and that's why I want to tie the Marker Events to them — koloskus, Dec 07 '13 at 00:10

score 2 · Answer 1 · answered Dec 07 '13 at 02:02

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.

I appreciate it, but unfortunately this is still pretty different from what I'm trying to accomplish. I might be able to dissect your code a little bit to get what I'm looking for, I'll try that. Thanks! — koloskus, Dec 10 '13 at 21:15

Google Maps Markers, Multiple Individual Events

1 Answers1