8/1/2014 - 9:26 AM

[mobile] [kendo] sample app - google map

[mobile] [kendo] sample app - google map

<!DOCTYPE html>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <title>GoogleMap and KendoUI</title>
        <link href="" rel="stylesheet" />
        <script src=""></script>
        <script src=""></script>
		<!-- add the google maps scripts -->
        <script type="text/javascript" src=""></script>
		<!-- The following style is used to disable the scroller and set the correct height for the map element -->
            #map .km-content,
            #map .km-scroll-container,
            #map #map_canvas {
                display: -webkit-box;
                width: 100%;
        <div data-role="view" data-title="Info" id="info">
            <div style="width:100%; text-align: center">
				<h1>Using Google Maps<br />in KendoUI application</h1>
		<!-- hook up to the init event of the view and initialize the google map -->
        <div data-role="view" data-init="buildMap" id="map" data-title="Map">
            <div id="map_canvas" style="width:100%;"></div>

        <div data-role="layout" data-id="default">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>

            <div data-role="footer">
                <div data-role="tabstrip">
                    <a href="#info" data-icon="info">Info</a>
                    <a href="#map" data-icon="globe">Map</a>

        new, {layout: "default"});
		//initialize the google map
        function buildMap(e) {
            var myOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP

            var mapElement = $("#map_canvas");
            var container = e.view.content;

            var map = new google.maps.Map(mapElement[0], myOptions);