Expand information when Google Maps Marker is clicked

[Angel Garcia]

I am doing an app where I have a map where are markers with locations of people stored in LocalStorage. I want to open a panel expanding user's description when "Details" button of marker's InfoWindow is clicked.

My problem is when I click "Details". The panel opens, but "Name" and "Description" shows always info of last person instead of person selected.

I'm convinced that I need to add something in eventAddListener of putPeopleInMap function, but I'm not sure how to do it.

MODEL:

• TPeople: Object{Name:String, Lat:String, Long:String, Description:String}

• TPeopleList: Array(TPeople)

  STORAGE:

• PeopleList: TPeopleList

• PersonSelected: TPeople

  ADD MARKERS FUNCTION (edited to add image better than text):
  

  e.g. I have PeopleList with this values:{[0]: {Name: Peter Pan, Lat: 55, Long: 40, Description: Hello, I'm Peter}, [1]: {Name:James Water, Lat: 88, Long: 52, Description: Hello, I'm James}, [2] {Name:John Cobra, Lat: 48, Long: 412, Description: Hello, I'm John}}. If I push in button of markers 0 and 1 (correctly positioned on the map) info shown is of 2.

  How can I open the panel with correct information?

[Serhii Kulibaba]

Hello Angel,

As you can see in google documentation (https://developers.google.com/maps/do...) you should use marker as second parameter of infowindow.open() method

[Angel Garcia]

Thanks for your response.I have tried using infowindow.open(map, this.marker);, but I have the same problem. Always apeears in panel info of last element.

[Evgene Karachevtsev]

Hello Angel,

Sorry for delay. Unfortunately this question is seems to be outside the scope of our support, perhaps you should contact Google support to clarify this issue.

[taucher]

Hello Angel Garcia,

Did you solve this problem(details page with click infowindow)? I am working on a same kind of project... and ı couldn't make it work.

[Angel Garcia]

Yes taucher, I made it:

[taucher]

Thanks Angel. But here is my code:

I open the infowindow and suddenly navigateTo my detail page. Detail page reads the "selectedCoordinate" local variable. But i can not save the on map selected marker's JSON value in to the "selectedCoordinate" variable.

codevar obj = JSON.parse(list_coordinate);

var coordsArray = obj;

var image = 'files/views/assets/image/jalog32.png';

var infowindow = new google.maps.InfoWindow();

var map = Appery("google_map").gmap;

for (var i = 0, j = coordsArray&#46;length; i < j; i++) {

Code: Select all

 var marker = new google.maps.Marker({ 
 position:  new google.maps.LatLng(coordsArray[i].location.latitude, coordsArray[i].location.longitude), 

map: map,
icon: image,
title: coordsArray&#46;job
});
markers&#46;push(marker);

google&#46;maps&#46;event&#46;addListener(marker, 'click', function() {

Code: Select all

 Apperyio.storage.selectedCoordinate.set(coordsArray); 
 infowindow.open(Appery("google_map").gmap,this); 
 infowindow.setContent('İlan Başlığı: ' + this.getTitle()); 
 Apperyio.navigateTo('isDetaylariPage', 
 {transition: 'none', 
  reverse: false}); 

});
}}/code

Not working!!!

This code is saving all the "coordsArray" as same to the "selectedCoordinate" variable

[taucher]

I changed codeApperyio&#46;storage&#46;selectedCoordinate&#46;set(coordsArray)/code with codeApperyio&#46;storage&#46;selectedCoordinate&#46;set(coordsArray[this&#46;index]);/code

and added codeindex : i/code to the marker area.

Now working!

[Angel Garcia]

Well!

[Blair Cox]

I have the reverse. I can map my local storage array to the map component and display each marker. But clicking the marker displays empty values. Maybe it is the same and I just haven't clicked the last marker. I don't understand how this is out of the scope of Appery?

Please at least provide a good code sample for how to work with local storage arrays. Please.