Android Development - using WebView to pull in an iframe with a google maps reference is not showing custom markers

Issue

I am building a realty app that relies on pulling in some HTML that was generated from the trulia.com tools page from this location.

The problem I'm encountering is that when I use WebView to pull in this html it will not show the markers on the iframe that point to the property locations on the map and show the price of the home located there. I have javascript enabled on the WebView and the map shows up just fine, just not the markers.

Does anyone have any experience getting these markers to work with WebView. And please don't tell me to just use Google Maps API. This is supposed to be a simple solution. Thanks ahead of time.

UPDATE:

Here is the html I am pulling in

<link rel="stylesheet" href="http://css.trulia-cdn.com/css/G26_32/css/pg_truliatool-generate.css"><div class="trulia_tool container300x250 map-search green" style="width: 296px; height: 250px;"><div class="trulia_tool_header"><h6>Map Search</h6></div><iframe height="400px" src="http://synd.trulia.com/tools/map-search/embedded?params%5Blocation%5D=Idaho+Falls%2C+ID&params%5BlocationId%5D=19191&params%5Bagent_id%5D=&params%5Bproperty_status%5D=for+sale&params%5Btitle%5D=Map+Search&params%5Bcolor%5D=green&params%5Bemail%5D=&params%5Buser_url%5D=&params%5Bwidth%5D=300&params%5Bheight%5D=250&params%5Bguid%5D=53ced10419feb" style="height: 185px; overflow: hidden;"><p>Your browser does not support iframes</p></iframe><div class="trulia_tool_footer"><div class="footer-link typeTruncate"><a href="http://www.trulia.com/for_sale/Idaho_Falls,ID/" title="See homes in Idaho Falls, ID" target="_blank">See homes in</a><br /><span>Idaho Falls, ID</span></div><a class="trulia-logo" href="http://www.trulia.com/" title="Trulia" target="_blank"></a></div>

UPDATE:

Here are the logcat messages:

07-24 02:59:30.444 2239-2239/com.example.FranciscoBarreto I/chromium﹕ [INFO:library_loader_hooks.cc(112)] Chromium logging enabled: level = 0, default verbosity = 0 07-24 02:59:30.456 2239-2239/com.example.FranciscoBarreto I/BrowserProcessMain﹕ Initializing chromium process, renderers=0 07-24 02:59:30.528 2239-2264/com.example.FranciscoBarreto W/chromium﹕ [WARNING:proxy_service.cc(888)] PAC support disabled because there is no system implementation 07-24 02:59:30.652 2239-2239/com.example.FranciscoBarreto D/dalvikvm﹕ GC_FOR_ALLOC freed 290K, 3% free 14391K/14788K, paused 13ms, total 14ms 07-24 02:59:30.760 2239-2239/com.example.FranciscoBarreto I/dalvikvm-heap﹕ Grow heap (frag case) to 16.572MB for 2536932-byte allocation 07-24 02:59:30.808 2239-2248/com.example.FranciscoBarreto D/dalvikvm﹕ GC_FOR_ALLOC freed <1K, 3% free 16867K/17268K, paused 44ms, total 44ms 07-24 02:59:30.972 2239-2239/com.example.FranciscoBarreto I/Choreographer﹕ Skipped 42 frames! The application may be doing too much work on its main thread. 07-24 02:59:31.140 2239-2239/com.example.FranciscoBarreto W/EGL_genymotion﹕ eglSurfaceAttrib not implemented 07-24 02:59:31.164 2239-2239/com.example.FranciscoBarreto W/AwContents﹕ nativeOnDraw failed; clearing to background color. 07-24 02:59:32.464 2239-2239/com.example.FranciscoBarreto W/AwContents﹕ nativeOnDraw failed; clearing to background color. 07-24 02:59:32.884 2239-2239/com.example.FranciscoBarreto W/AwContents﹕ nativeOnDraw failed; clearing to background color. 07-24 02:59:32.968 2239-2239/com.example.FranciscoBarreto W/AwContents﹕ nativeOnDraw failed; clearing to background color. 07-24 02:59:33.232 2239-2278/com.example.FranciscoBarreto I/chromium﹕ [INFO:simple_index_file.cc(397)] Simple Cache Index is being restored from disk. 07-24 02:59:33.416 2239-2239/com.example.FranciscoBarreto I/chromium﹕ [INFO:async_pixel_transfer_manager_android.cc(56)] Async pixel transfers not supported 07-24 02:59:33.936 2239-2239/com.example.FranciscoBarreto I/chromium﹕ [INFO:async_pixel_transfer_manager_android.cc(56)] Async pixel transfers not supported 07-24 02:59:34.548 2239-2239/com.example.FranciscoBarreto E/eglCodecCommon﹕ ** ERROR unknown type 0x0 (glSizeof,73) 07-24 02:59:34.560 2239-2239/com.example.FranciscoBarreto I/Choreographer﹕ Skipped 81 frames! The application may be doing too much work on its main thread. 07-24 02:59:36.072 2239-2239/com.example.FranciscoBarreto E/eglCodecCommon﹕ ** ERROR unknown type 0x0 (glSizeof,73) 07-24 02:59:38.448 2239-2239/com.example.FranciscoBarreto E/eglCodecCommon﹕ ** ERROR unknown type 0x0 (glSizeof,73) 07-24 02:59:38.460 2239-2239/com.example.FranciscoBarreto I/Choreographer﹕ Skipped 108 frames! The application may be doing too much work on its main thread. 07-24 02:59:39.108 2239-2239/com.example.FranciscoBarreto E/eglCodecCommon﹕ ** ERROR unknown type 0x0 (glSizeof,73) 07-24 02:59:39.116 2239-2239/com.example.FranciscoBarreto D/MyApplication﹕ Uncaught ReferenceError: $ is not defined -- From line 1 of 07-24 02:59:39.116 2239-2239/com.example.FranciscoBarreto I/chromium﹕ [INFO:CONSOLE(1)] "Uncaught ReferenceError: $ is not defined", source: (1) 07-24 02:59:39.116 2239-2239/com.example.FranciscoBarreto D/MyApplication﹕ Uncaught ReferenceError: $ is not defined -- From line 1 of 07-24 02:59:39.116 2239-2239/com.example.FranciscoBarreto I/chromium﹕ [INFO:CONSOLE(1)] "Uncaught ReferenceError: $ is not defined", source: (1) 07-24 02:59:40.512 2239-2239/com.example.FranciscoBarreto D/MyApplication﹕ XMLHttpRequest cannot load http://m.trulia.com/_ajax/Location/LocalComps/get_comps/?b=43.547073,-111.937025,43.555782,-111.911619&v=city&c=Idaho%20Falls&s=ID&z=&n=&t=for%20sale. Origin http://synd.trulia.com is not allowed by Access-Control-Allow-Origin. -- From line 0 of http://synd.trulia.com/tools/map-search/embedded?params%5Blocation%5D=Idaho+Falls%2C+ID&params%5BlocationId%5D=19191&params%5Bagent_id%5D=&params%5Bproperty_status%5D=for+sale&params%5Btitle%5D=Map+Search&params%5Bcolor%5D=green&params%5Bemail%5D=&params%5Buser_url%5D=&params%5Bwidth%5D=300&params%5Bheight%5D=250&params%5Bguid%5D=53cc7419073a5 07-24 02:59:40.512 2239-2239/com.example.FranciscoBarreto I/chromium﹕ [INFO:CONSOLE(0)] "XMLHttpRequest cannot load http://m.trulia.com/_ajax/Location/LocalComps/get_comps/?b=43.547073,-111.937025,43.555782,-111.911619&v=city&c=Idaho%20Falls&s=ID&z=&n=&t=for%20sale. Origin http://synd.trulia.com is not allowed by Access-Control-Allow-Origin.", source: http://synd.trulia.com/tools/map-search/embedded?params%5Blocation%5D=Idaho+Falls%2C+ID&params%5BlocationId%5D=19191&params%5Bagent_id%5D=&params%5Bproperty_status%5D=for+sale&params%5Btitle%5D=Map+Search&params%5Bcolor%5D=green&params%5Bemail%5D=&params%5Buser_url%5D=&params%5Bwidth%5D=300&params%5Bheight%5D=250&params%5Bguid%5D=53cc7419073a5 (0) 07-24 02:59:42.460 2239-2239/com.example.FranciscoBarreto E/eglCodecCommon﹕ ** ERROR unknown type 0x0 (glSizeof,73) 07-24 02:59:42.472 2239-2239/com.example.FranciscoBarreto I/Choreographer﹕ Skipped 92 frames! The application may be doing too much work on its main thread. 07-24 02:59:42.476 2239-2239/com.example.FranciscoBarreto D/MyApplication﹕ XMLHttpRequest cannot load http://m.trulia.com/_ajax/Location/LocalComps/get_comps/?b=43.487292,-112.046667,43.49601,-112.021262&v=city&c=Idaho%20Falls&s=ID&z=&n=&t=for%20sale. Origin http://synd.trulia.com is not allowed by Access-Control-Allow-Origin. -- From line 0 of http://synd.trulia.com/tools/map-search/embedded?params%5Blocation%5D=Idaho+Falls%2C+ID&params%5BlocationId%5D=19191&params%5Bagent_id%5D=&params%5Bproperty_status%5D=for+sale&params%5Btitle%5D=Map+Search&params%5Bcolor%5D=green&params%5Bemail%5D=&params%5Buser_url%5D=&params%5Bwidth%5D=300&params%5Bheight%5D=250&params%5Bguid%5D=53cc7419073a5 07-24 02:59:42.476 2239-2239/com.example.FranciscoBarreto I/chromium﹕ [INFO:CONSOLE(0)] "XMLHttpRequest cannot load http://m.trulia.com/_ajax/Location/LocalComps/get_comps/?b=43.487292,-112.046667,43.49601,-112.021262&v=city&c=Idaho%20Falls&s=ID&z=&n=&t=for%20sale. Origin http://synd.trulia.com is not allowed by Access-Control-Allow-Origin.", source: http://synd.trulia.com/tools/map-search/embedded?params%5Blocation%5D=Idaho+Falls%2C+ID&params%5BlocationId%5D=19191&params%5Bagent_id%5D=&params%5Bproperty_status%5D=for+sale&params%5Btitle%5D=Map+Search&params%5Bcolor%5D=green&params%5Bemail%5D=&params%5Buser_url%5D=&params%5Bwidth%5D=300&params%5Bheight%5D=250&params%5Bguid%5D=53cc7419073a5 (0) 07-24 02:59:42.768 2239-2239/com.example.FranciscoBarreto E/eglCodecCommon﹕ ** ERROR unknown type 0x0 (glSizeof,73) 07-24 02:59:44.008 2239-2239/com.example.FranciscoBarreto E/eglCodecCommon﹕ ** ERROR unknown type 0x0 (glSizeof,73) 07-24 02:59:44.020 2239-2239/com.example.FranciscoBarreto I/Choreographer﹕ Skipped 61 frames! The application may be doing too much work on its main thread. 07-24 02:59:44.484 2239-2239/com.example.FranciscoBarreto E/eglCodecCommon﹕ ** ERROR unknown type 0x0 (glSizeof,73) 07-24 02:59:44.984 2239-2239/com.example.FranciscoBarreto E/eglCodecCommon﹕ **** ERROR unknown type 0x0 (glSizeof,73)

Solution

If you are setting the WebView content using a file containing the html you posted, or you are passing a String containing that html, you may need to use setAllowUniversalAccessFromFileURLs to allow the WebView to make requests to other resources from scripts running on the page.

In your log post, it seems pretty apparent that this is the problem:

02:59:42.476 2239-2239/com.example.FranciscoBarreto D/MyApplication﹕ XMLHttpRequest cannot load http://m.trulia.com/_ajax/Location/LocalComps/get_comps/?b=43.487292,-112.046667,43.49601,-112.021262&v=city&c=Idaho%20Falls&s=ID&z=&n=&t=for%20sale. Origin http://synd.trulia.com is not allowed by Access-Control-Allow-Origin. -- From line 0 of http://synd.trulia.com/tools/map-search/embedded?params%5Blocation%5D=Idaho+Falls%2C+ID&params%5BlocationId%5D=19191&params%5Bagent_id%5D=&params%5Bproperty_status%5D=for+sale&params%5Btitle%5D=Map+Search&params%5Bcolor%5D=green&params%5Bemail%5D=&params%5Buser_url%5D=&params%5Bwidth%5D=300&params%5Bheight%5D=250&params%5Bguid%5D=53cc7419073a5

The javascript running on the page, which Trulia fetches, is trying to retrieve the locations to display using an Ajax call, given the coordinates for your area. This is failing because the browser isn't allowing any network calls to a new "Origin" address, which will be any address if you are not loading a remote page in the WebView.

Try using this call on the webView to allow these requests to go through:

if (Build.VERSION.SDK_INT >= VERSION_CODES.JELLY_BEAN) {
    webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
}

Answered By - mattgmg1990