Jazzeroki/HybridWebView.cs

## HybridWebView.cs
using System.IO;
using System.Reflection;
using Xamarin.Forms;
using XLabs.Forms.Controls;

namespace TeamDiscountCard.Pages
{
    public class MapScreenHybridView : ContentPage
    {
        public MapScreenHybridView()
        {
            NavigationPage.SetHasNavigationBar(this, false);
            var serializer = new XLabs.Serialization.JsonNET.JsonSerializer();
            HybridWebView browser = new HybridWebView(serializer) { VerticalOptions = LayoutOptions.FillAndExpand};

            var assembly = typeof(MapScreenHybridView).GetTypeInfo().Assembly;
            Stream stream = assembly.GetManifestResourceStream("TeamDiscountCard.Pages.MapPage.html");
            string text = "";

            using (var reader = new System.IO.StreamReader(stream))
            {
                text = reader.ReadToEnd();
            }
            browser.Source = new HtmlWebViewSource
            {
                Html = text
            };
            browser.RegisterCallback("dataCallback", JSCallback);
            Content = new StackLayout
            {
                Children = {
                    browser
                }
            };
        }
        private void JSCallback(string result)
        {
            DisplayAlert("callback", result, "ok");

        }
    }
}

## MapPage.Html
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD9akWz16swUE-pD3FaJ40kj-F9KWbi1M">
    </script>
</head>
<body>
    <button onclick="callbackTest()">Call Back</button>
    <div id="mapDiv" style="height:100%; width:100%; position:absolute"></div>
    <script>
        function callbackTest() {
            Native("dataCallback", "test");
        };

        function initialize() {
            var mapOptions = { center: new google.maps.LatLng(41.027928, -111.924355), zoom: 17 };
            var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
            var mindFireMarker = new google.maps.Marker({
                position: new google.maps.LatLng(41.027579, -111.925207),
                map: map,
                title: "MindFire"
            });
            mindFireMarker.addListener('click', function () {
                callbackTest();
            });
        }
        google.maps.event.addDomListener(window, "load", initialize);
    </script>
</body>
</html>
	using System.IO;
	using System.Reflection;
	using Xamarin.Forms;
	using XLabs.Forms.Controls;

	namespace TeamDiscountCard.Pages
	{
	public class MapScreenHybridView : ContentPage
	{
	public MapScreenHybridView()
	{
	NavigationPage.SetHasNavigationBar(this, false);
	var serializer = new XLabs.Serialization.JsonNET.JsonSerializer();
	HybridWebView browser = new HybridWebView(serializer) { VerticalOptions = LayoutOptions.FillAndExpand};

	var assembly = typeof(MapScreenHybridView).GetTypeInfo().Assembly;
	Stream stream = assembly.GetManifestResourceStream("TeamDiscountCard.Pages.MapPage.html");
	string text = "";

	using (var reader = new System.IO.StreamReader(stream))
	{
	text = reader.ReadToEnd();
	}
	browser.Source = new HtmlWebViewSource
	{
	Html = text
	};
	browser.RegisterCallback("dataCallback", JSCallback);
	Content = new StackLayout
	{
	Children = {
	browser
	}
	};
	}
	private void JSCallback(string result)
	{
	DisplayAlert("callback", result, "ok");

	}
	}
	}
	<!DOCTYPE html>

	<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD9akWz16swUE-pD3FaJ40kj-F9KWbi1M">
	</script>
	</head>
	<body>
	<button onclick="callbackTest()">Call Back</button>
	<div id="mapDiv" style="height:100%; width:100%; position:absolute"></div>
	<script>
	function callbackTest() {
	Native("dataCallback", "test");
	};

	function initialize() {
	var mapOptions = { center: new google.maps.LatLng(41.027928, -111.924355), zoom: 17 };
	var map = new google.maps.Map(document.getElementById("mapDiv"), mapOptions);
	var mindFireMarker = new google.maps.Marker({
	position: new google.maps.LatLng(41.027579, -111.925207),
	map: map,
	title: "MindFire"
	});
	mindFireMarker.addListener('click', function () {
	callbackTest();
	});
	}
	google.maps.event.addDomListener(window, "load", initialize);
	</script>
	</body>
	</html>