Google map multiple markers works on test and not on Android

Hi

I followed the tutorial
http://devcenter.appery.io/tutorials/...

and while in test all work fine, in Samsung Galaxy S4, when I click "Place marker" it does not update the map. When I click on show directions it works.

Can you help?
Thanks.
1 person has
this question
+1
This topic is no longer open for comments or replies.
  • Hello Panagiotis,

    Could you please provide us with public link to your project and steps to reproduce the issue?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • The issue does not happen at the test console.
    Only when you install it on my Samsung Galaxy S4 Android 4.4.2

    The strange thing is that the direction from to works fine and markers are displayed.

    The script that I run when clicking on a button is

    var locations = [];

    var values = $('[name="ResultsText5"]').map(function(index,element){
    if ($(element).text().trim().length > 0) {
    return $(element).text();
    }
    }).get().join('@');
    locations = values.split("@");

    for (var i=0;i<locations.length;i++)
    {
    Srv_convert_address.execute({
    'data' : {
    'address' : locations[i],
    'sensor' : false
    }
    });
    }


    Are all OK?
    Should I do any kind of map refresh?

    Thanks!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Panagiotis,

    I see in this code some if statement with "return".

    So this code could stop without any notification.

    Please add before code:



    Srv_convert_address.execute(



    Following code:



    alert("run convert addres");
    Srv_convert_address.execute(



    Also please use WEINRE debugger to see errors in the app in device:

    See details: http://devcenter.appery.io/documentat...

    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Yurii

    I put some alerts as you said

    for (var i=0;i<locations.length;i++)
    {
    alert("run convert addres"); <---------------
    alert(locations[i]);<---------------
    Srv_convert_address.execute({
    'data' : {
    'address' : locations[i],
    'sensor' : false
    }
    });
    }

    Even on mobile these alerts appear correctly.
    So whatever happens,happens inside the Srv_convert_address.execute.
    My locations[i] may be "Leoforos Mesogeion 201 Athens Greece" and not just "Paris" like the example.
    May this long address be an issue? (in test console works ...)

    Thanks
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • On Srv_convert_address service this code is executed on success


    var markerLatLng = new google.maps.LatLng(localStorage.getItem('markerLat'), localStorage.getItem('markerLng'));

    var marker = new google.maps.Marker({
    position: markerLatLng,
    map: map,
    title: data.results[0].address_components[0].long_name,
    animation: google.maps.Animation.DROP
    });

    bounds.extend(markerLatLng);
    map.fitBounds(bounds);
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • I also created a more simple test case.
    One input field, one button.
    on button click

    var locations1 = [];
    locations1 = Apperyio('marker_location').val().split(",");
    alert (locations1);

    for (var i=0;i<locations1.length;i++)
    {
    Srv_convert_address.execute({
    'data' : {
    'address' : locations1[i],
    'sensor' : false
    }
    });
    }


    I put in input "Paris", alert fires fine but map is not updated.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Solved

    I changed the target SDK version to 4.1.x from 4.2.x.
    I have Galaxy S4 with 4.4.2

    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?

    Thanks.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Can I have a sample code so I can put markers in google_map, with title, description and small photo, but just using Lat and Lng values?

    How can I clear all markers before showing on map, the new set of markers?

    Thanks!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Panagiotis,

    Glad you solved it..

    1 That's not good way to show it all. More preferable is to use infowindow on marker click with information you need.

    Here is an example how to use it:



    //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
    });

    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
    });

    //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);
    });
    };

    for (var i = 0; i < locationHelper.aLocations.length; i++)
    //In this function you should to pass latitude, longitude and text to display in infowindow.
    CreateMarker({lat: locationHelper.aLocations[i][0], long: locationHelper.aLocations[i][1], location: locationHelper.aLocations[i][2]});



    2 Unfortunatly there is no way to clear all overlays without handle them.

    But when you have this items (which you want to remove from map) you can remove them with ".setMap(null);" method.

    See details details about implementation:
    http://stackoverflow.com/questions/15...

    So with this implementation when you add marker you need invoke:



    markersArray.push(marker);



    And when you need remove all markers you can run following JS:



    clearOverlays();



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 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?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 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[i][1],
    Map.js:line 176:column 30:syntax error
    long: locationHelper.aLocations[i][1],
    Map.js:line 177:column 34:syntax error
    location: locationHelper.aLocations[i][2]
    Map.js:line 178:column 22:syntax error
    });
    Map.js:line 1:column 0:Compilation produced 9 syntax errors.

    ========================================
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 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).


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

    //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
    });

    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.aLocations.length; i++)
    //In this function you should to pass latitude, longitude and text to display in infowindow.
    CreateMarker({lat: locationHelper.aLocations[i][0], long: locationHelper.aLocations[i][1], location: locationHelper.aLocations[i][2]});



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



    function clearOverlays() {
    for (var i = 0; i < markersArray.length; i++ ) {
    markersArray[i].setMap(null);
    }
    markersArray.length = 0;
    }



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



    clearOverlays();



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 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!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Panagiotis,

    Please replace this code:



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



    With following:



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



    You can push inside info window



    <br> tag



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Thanks I will try it.

    I tried <br>, in my below code

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

    with escape character before < and >

    but does not work.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 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!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Panagiotis,

    I've tested and it works as suggested.

    Here is code:



    //Set content for infowindow.
    infowindow.setContent('Content
    of
    ' + data.location + '');



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 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!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Hi Panagiotis,

    I'm sorry. It seems GS ate my code at all :)

    Here is code with escaping:



    //Set content for infowindow.
    infowindow.setContent('<div style="height:80px;" class="infoWindowCountent">Content <br> of <br> ' + data.location + '</div>');



    Regards.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated