Add pins to Google Map in a TWebBrowser and process clicks

Question

How do I add pins to a Google Map in a TWebBrowser and call an event when a pin is clicked? The solution needs to work on both iOS and Android.

Answer 1

You have to make some bridging between native (iOS/Android) and your GoogleMaps javascript code. To drop a pin on the map for example, you will have to inject js code calling your addPin method on js side.

On iOS, it's done by calling a web view method called stringByEvaluatingJavaScriptFromString:

[webview stringByEvaluatingJavaScriptFromString:@"addPin()"];

and to listen to tap events on webview, you will have to implement a callback when the pin is tapped, and call your objC method using the iFrame approach:

var iframe = document.createElement("IFRAME");
iframe.setAttribute("src", "js-frame:myPinTappedMethod";
document.documentElement.appendChild(iframe);
iframe.parentNode.removeChild(iframe);
iframe = null;

It will trigger web view's shouldStartLoadWithRequest: delegate on native side, so all you have to do is read the request and process ...

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType 
{

  // Intercept custom location change, URL begins with "js-call:"
  if ([[[request URL] absoluteString] hasPrefix:@"js-call:"]) {

    // Extract the selector name from the URL
    NSArray *components = [requestString componentsSeparatedByString:@":"];
    NSString * functionName = [components objectAtIndex:1];

    // Call the given selector
    [self performSelector:NSSelectorFromString(functionName)];

    // Cancel the location change
    return NO;
  }

  // Accept this location change
  return YES;

}

Part of this example I take from here

Hope it helps!