Google Maps API - click marker and pass info to Livecode

[GSA_DC]

I posted this in the beginners forum and have had 50 views and no replies. Can anyone here help? I'm trying to urgently resolve this for a student and I'm at a loss.

I have a Google map with markers in a browser object in an iOS app and I want to be able to click on the markers and have them pass their marker title to Livecode.
I dynamically create markers in a repeat loop from Livecode:

Code: Select all

      put specialFolderPath("engine") & "/billboards.csv" into pathToFile
      put url ("file:" & pathToFile) into tContents
      put 1 into i
      repeat for each line tLine in tContents
         put item 14 of tLine into lat
         put item 13 of tLine into lng
         put item 18 of tLine into titleName 
          // Call Javascript function within the loaded map HTML page
         MobileControlDo browserID, "execute", ("setMarkerAt(" && lat & "," & lng & "," & i & ")")
         add 1 to i
      end repeat

I have this following Javascript function in the HTML page used to create a marker on the Google Map:

Code: Select all

function setMarkerAt(lat, lng, i){
var markerPos=new google.maps.LatLng(lat, lng);
var titleName = i.toString() //i is just an index number to identify markers when clicked using marker.getTitle()
var marker=new google.maps.Marker({
  position:markerPos,
  map:map,
  title:titleName
  });
  marker.setMap(map);
  marker.addListener('click', function() {
  window.alert(marker.getTitle());
  });
}

So when I click on a marker I am opening an alert window showing the title of the marker. Great - but how can I pass this marker title back to Livecode, to use eg. to display an image related to the marker?

I'm not sure to how to actually do this (possible?) or how to ask Google. Any help in this really appreciated. Thanks.

Kind regards, Paul.

[strongbow]

Hi Paul

Yes, you can do this.

In your javascript event listener function for your markers, use something like:

Code: Select all

window.location = '#?title='+e.title(); 

and then in your LC script you can add a browserLoadRequest handler, that checks the load request (which occurs when changing the window in JS - or something like that, can't remember exactly!). eg.

Code: Select all

on browserLoadRequest pUrl, pReason
   -- This arrives when the browser URL is changed.
   -- in this case, we're changing the URL to pass extra info back to the browser
   -- so we should strip it off and/or just not pass the message along
   if pURL contains "title" then -- handle the title
     yourTitleHandlerHere pURL
  else
      pass browserLoadRequest
   end if
end browserLoadRequest

As I indicated above, can't remember why setting the window.location inside your JavaScript sends a browserLoadRequest, but should be easy to find out using Google... Hopefully the above helps you somewhat. I did this some years ago so have forgotten so much! Good luck!

cheers

Alan

[leonardodavinci]

it would be nice to have a sample stack looks like this:
- A button getting latitude and longitude by inserting State, City, Address, Zip code and add a text field below each other
- A button to appear as more markers (maybe even colored) from a formatted text field: latidudine, longitude
- Display the result in a sub stack Map using revBrowser
- Use either mobile so that desktop

maybe add in your tutorial

I hope someone give me an answer thanks