Google maps api several markers with info windows

Question

my teeth just plunged into the Google Maps API.

I am trying to build a pair of markers on a map. Done. However, I recycle the variable / object for each marker.

First, I create a marker with parameters and add to the map, then I take the same marker variable, rearrange it and add it to the map again. This creates two unique markers with separate title tags.

I want to display an info window for each marker, but I doubt this is the best way to do this. I also see that an error icon appears on each marker, which assigns click events, since I use the same variable to add each marker, I'm not sure how to add its click event to unique markers (by name, as the name same for both since it never gets any identifier?)

var marker_obj = new google.maps.Marker({ position: myLatlng, title:"This is Marker 1", }); marker_obj.setMap(map); marker_obj = new google.maps.Marker({ position: myLatlng, title:"This is Marker 2", }); marker_obj.setMap(map); 

To create information windows, I thought about using one variable / object to save the information window, and then reprogram it with new text in each marker click event.

Questions I have:

1: Should I use a separate unique variable / object for each marker (overhead?), If not, how to determine its click event.

2: Did you succeed in reassigning (reassigning) the information window object with new text before it pops up, or did you create a unique information window for each marker?

I am a bit of Java n00b, so any help would be greatly appreciated.

Answer 1

You are on the right lines. Have one infowindow object just like you have one marker object. Then the contents of the info-index change depending on which marker you click. One thing you need to pay attention to (this also happens if you create markers in a loop) is that the danger is that all info windows end with the contents of the latter. So let's create a new function that updates the content.

In addition, aside, you do not need to call the setMap () function for marker objects, you can simply specify the map attribute in the parameters that you pass when creating the markers.

 var infowindow = new google.maps.InfoWindow({ content: '' }); var marker_obj = new google.maps.Marker({ position: myLatlng, title:"This is Marker 1", map: map }); bindInfoWindow(marker_obj, map, infowindow, 'Marker 1'); marker_obj = new google.maps.Marker({ position: myLatlng, title:"This is Marker 2", map: map }); bindInfoWindow(marker_obj, map, infowindow, 'Marker 2'); 

Then the new function:

 function bindInfoWindow(marker, map, infowindow, html) { marker.addListener('click', function() { infowindow.setContent(html); infowindow.open(map, this); }); } 

Answer 2

create a global infowindow object. var infowindow = new google.maps.InfoWindow();

and add a listener for your global marker.

 google.maps.event.addListener(marker, "click", function (e) { infowindow.setContent("set marker specific content here"); infowindow .open(map, this); });