Question

I am working on a prototype bike parking map for my school using Google Maps API.
I have saved all the bike rack locations in MYSQL with only attributes being lattitude
and longitude of the location. Now I’m trying to add a feature where when the users click
on the markers, they would show the pictures of the corresponding bike racks.

I am trying to do this using InfoWindow object.

Now the problem is, although InfoWindow is almost exclusively used with Markers, a Marker object cannot have an InfoWindow object as one of its properties/attributes.

So I was thinking creating a fresh new InfoWindow every time users click on markers. But i feel like it’s going to create some lagging.

Another option I had in mind was creating another table or a column in the current table
which contains all the InfoWindow object.

However, I really want to make the InfoWindow objects to be part of Marker objects because
intuitively it makes the most sense.

Answer 1

Not saying the best way to do it is this, but a marker object sure can have an infoWindow as one of it’s properties! Google’s API doesn’t restrict/throw errors when you put random properties/methods on it’s marker objects. The following is perfectly valid code:

var someMarker = new google.maps.Marker(properties);
someMarker.infoWindow = new google.maps.InfoWindow(properties);
someMarker.infoWindow.setMap(map);
someMarker.infoWindow.open();

That being said, on a lot of google maps implantations there’s generally only a single infoWindow object on the map. The reason for this if you opened up 4 or 5 infoWindows in a single map view, they tend to clutter up the map and you can’t see any of the base map tiles anymore.

For that reason, you can have a single infoWindow object, and just change the contents of it, depending on which marker is clicked:

var yourGlobalInfoWindow = new google.map.InfoWindow(properties);
var someMarkerA = new google.maps.Marker(properties);
var someMarkerB = new google.maps.Marker(properties);
someMarkerA.infoWindowContent = 'some A HTML content here';
someMarkerB.infoWindowContent = 'some B HTML content here';

google.maps.event.addListener(someMarkerA,'click',function() { yourGlobalInfoWindow.setContent(someMarkerA.infoWindowContent); });

google.maps.event.addListener(someMarkerB,'click',function() { yourGlobalInfoWindow.setContent(someMarkerB.infoWindowContent); });

Note that the code above is for illustrative purposes only and is far from optimized or elegant, but it gets the point across.