Google Maps Android

So I am all setup to use google maps for xamarin.android however I need some help on how to proceed.

I have a JS Fiddle here you can look at http://jsfiddle.net/chriswatts91/9wu90dze/6/

It takes information from my Visual Studio Web Api. I was wondering how I could take the below code and pop it into xamarin.android. What issues I will run into if any.

`google.load('visualization', '1.0');

google.maps.event.addDomListener(window, 'load', init);

function init() {

// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
    // How zoomed in you want the map to start at (always required)
    zoom: 7,

    // The latitude and longitude to center the map (always required)
    center: new google.maps.LatLng(56.967762, -4.445642), // Scotland

    // How you would like to style the map.
    // This is where you would paste any style found on Snazzy Maps.
    styles: [{"featureType":"all","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#000000"}]},{"featureType":"all","elementType":"labels","stylers":[{"visibility":"on"}]},{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#ffffff"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},{"featureType":"administrative.country","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#c4c4c4"},{"visibility":"on"},{"weight":"1"}]},{"featureType":"landscape","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20},{"visibility":"off"}]},{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#000000"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape.natural.landcover","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},{"featureType":"poi.sports_complex","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#a0a0a0"},{"lightness":"0"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":[{"color":"#000000"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18},{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#555555"}]},{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},{"featureType":"road.arterial","elementType":"labels.text.stroke","stylers":[{"color":"#555555"}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#222222"},{"lightness":16},{"visibility":"on"}]},{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#333333"}]},{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#999999"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19},{"visibility":"off"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17},{"visibility":"on"}]},{"featureType":"water","elementType":"labels.text","stylers":[{"lightness":"-45"}]}]
};

// Get the HTML DOM element that will contain your map
// We are using a div with id="map" seen below in the <body>
var mapElement = document.getElementById('map');

// Create the Google Map using our element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);

var layer = new google.maps.FusionTablesLayer({
    query: {
        select: 'geometry',
        from: '11RJmSNdTr7uC867rr2zyzNQ6AiE1hcREmGFTlvH3'
    },
    styles: [{
        polygonOptions: {
            fillColor: '#000000',
            strokeColor: '#ffffff',
            fillOpacity: 0.65,
            strokeWeight: 1,
        },

    }]

});
layer.setMap(map);

// Load mountains from JSON
// Add you URL here: 
var uri = 'https://api.myjson.com/bins/4e50j';

var mountainPolygons = new google.maps.Polygon();
var markers = [];

// On mountain area click
google.maps.event.addListener(layer, 'click', function(event) {

    // Clear all markers
    while(markers.length) { 
        markers.pop().setMap(null); 
    }

    // Get Polygone from FustionTable
    getMountainPolygonFromFusionTable(event.row.label.value).then(function(mountainPolygons) {

        $.getJSON(uri).done(function (data) {

            // On success, 'data' contains a list of mountains.
            $.each(data, function (key, item) {

                //Put seperate data fields into one variable 
                var latLng = new google.maps.LatLng(item.Latitude, item.Longitude);

                if (google.maps.geometry.poly.containsLocation(latLng, mountainPolygons)) {

                    // @todo set infowindow, title...
                    var marker = new google.maps.Marker({
                        position: latLng,
                        title: 'Marker info here',
                    });
                    marker.setMap(map);
                    markers.push(marker);

                }

            });

        });



    });

}); 

/**
 * Converts fustions table polygon to GoogleMaps polygon
 * 
 * @param   {int}                   Label of Mountain Polygon
 * @return  {google.maps.Polygon}   Google Maps Polygon
 */ 
 function getMountainPolygonFromFusionTable(label) {
    // Return a new promise.
    return new Promise(function(resolve, reject) {

        var sql = encodeURIComponent("SELECT 'geometry' FROM 11RJmSNdTr7uC867rr2zyzNQ6AiE1hcREmGFTlvH3 WHERE label ='" + label + "'");
        var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq=' + sql);

        query.send(function (response) {
            var data = response.getDataTable().getValue(0, 0);
            // Create a XML parser
            if (window.DOMParser) {
                var parser = new DOMParser();
                var kml = parser.parseFromString(data, "text/xml");
            } else { 
                var kml = new ActiveXObject("Microsoft.XMLDOM");
                kml.loadXML(data);
            }

            // Get the coordinates of Mountain Areas
            var latLngs = kml.getElementsByTagName("coordinates")[0].childNodes[0].nodeValue.split(' ');

            var mountainPolygonLatLngs = [];
            for (var i = 0; i < latLngs.length; i++) {
                var latLng = latLngs[i].split(',');
                mountainPolygonLatLngs.push(new google.maps.LatLng(latLng[1], latLng[0]));
            }

            // Create the polygon
            mountainPolygons = new google.maps.Polygon({
                paths: mountainPolygonLatLngs,
                fillColor: 'transparent',
                strokeColor : 'transparent'
            });

            resolve(mountainPolygons);

        });

    });
}
Sign In or Register to comment.