Google map multiple markers works on test and not on Android

[Takis]

Many thanks I will try it out and let you know!
In the above example, I hust need to put inside a page a Google map object, nothing else?
Of course I get the lat, lng from DB.

Can you reply on these also please?
-Why it did not work for target 4.2.x?
-Will 4.4.x be supported, as I do not see it in the list of target SDK?

[Takis]

I get an error on build

========================================
Map.js:line 155:column 85:missing name after . operator
position: new google.maps.LatLng(data.lat, data.long),
Map.js:line 156:column 37:syntax error
map: map,
Map.js:line 157:column 43:syntax error
draggable: true,
Map.js:line 158:column 39:syntax error
title: data.location
Map.js:line 159:column 30:syntax error
});
Map.js:line 176:column 29:invalid property id
long: locationHelper.aLocations[1],
Map.js:line 176:column 30:syntax error
long: locationHelper.aLocations[1],
Map.js:line 177:column 34:syntax error
location: locationHelper.aLocations[2]
Map.js:line 178:column 22:syntax error
});
Map.js:line 1:column 0:Compilation produced 9 syntax errors.

========================================

[Yurii Orishchuk]

Hi Panagiotis,

Please follow these steps.

You need to run following code when you need to populate your markers(please read all comments in this code).

pre
if(!self.markersArray)
self.markersArray();

Code: Select all

 //Were "multiGoogleMap" is map component name. 
 var map = Appery("multiGoogleMap").options.mapElement.gmap('get', 'map'); 

//Create infowindow.
var infowindow = new google.maps.InfoWindow({
content: 'test content',
maxWidth: 320
});

Code: Select all

 var CreateMarker = function(data){ 
     var marker = new google.maps.Marker({ 
         position: new google.maps.LatLng(data.lat, data.long), 
         map: map, 
         draggable: true, 

         title: data.location 
     }); 

    self.markersArray.push(marker); 

     //Add event handler and open infoWindow 
     google.maps.event.addListener(marker, 'click', function() { 
         //Set content for infowindow. 
         infowindow.setContent('Content of + ' + data.location + ''); 

         //Open infowindow. 
         infowindow.open(map, marker); 
     }); 
 }; 

 //Note: in this part you should iterate through your object and create markers you need. 
 for (var i = 0; i < locationHelper&#46;aLocations&#46;length; i++) 
     &#47;&#47;In this function you should to pass latitude, longitude and text to display in infowindow&#46; 
     CreateMarker({lat: locationHelper&#46;aLocations[i][0], long: locationHelper&#46;aLocations[i][1], location:  locationHelper&#46;aLocations[i][2]}); 

/pre

Then you should add to your "Map" JS asset following JS code:

pre

function clearOverlays() {
for (var i = 0; i < markersArray&#46;length; i++ ) {
markersArray&#46;setMap(null);
}
markersArray&#46;length = 0;
}

/pre

After you can invoke code below when you need to clear all markers on the map:

pre

clearOverlays();

/pre

Regards.

[Takis]

Hi

If I put this code, then the code is not executed

if(!self.markersArray)
self.markersArray();

I used your code without the above and
self.markersArray.push(marker);

Can you explain why is not working?
Is there an issue if it do not include the above lines of code?

How can I put a line break on the info window ?

Thanks!

[Yurii Orishchuk]

Hi Panagiotis,

Please replace this code:

pre

Code: Select all

 if(!self.markersArray) 
    self.markersArray(); 

/pre

With following:

pre

Code: Select all

 if(!self.markersArray) 
    self.markersArray = []; 

/pre

You can push inside info window

precode

<br> tag

/code/pre

Regards.

[Takis]

Thanks I will try it.

I tried code<br>/code, in my below code

codeCreateMarker({lat: cords_latlng[0], long: cords_latlng[1], location: customer + " <br>" +locations });/code
or

with escape character before < and

but does not work.

[Maryna Brodina]

Hello!

Have you tried suggestion from Yurii?

[Takis]

Does "push" means specific command, like?

self.markersArray.push(marker);

If yes, what should I do ?
I want to put a break in the text of the info window.

Thanks!

[Yurii Orishchuk]

Hi Panagiotis,

I've tested and it works as suggested.

Here is code:

pre

Code: Select all

         //Set content for infowindow. 
         infowindow.setContent('Content 

of
' + data&#46;location + '');

/pre

Regards.

[Takis]

The question is, how do I put a line break in the text of the info window that will be displayed.

infowindow.setContent('Content of ' + linebreak + data.location + ''); ????

Thanks!