Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 1, 2015 09:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/4c28aec658790a56bd93 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/4c28aec658790a56bd93 to your computer and use it in GitHub Desktop.
Download ZIP
Google Map and Kendo UI // source http://jsbin.com/cipuq
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="minimal-ui" />
<title>Google Map and Kendo UI</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.mobile.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<style id="jsbin-css">
#info h1,
#info h2 {
text-align: center;
}
#map_canvas {
width: 100%;
}
.km-modalview .km-scroll-container {
padding: 15px;
}
.km-scroll-container i.km-icon {
display: inline-block;
}
.button-container {
margin-top: 15px;
text-align: center;
}
</style>
</head>
<body>
<div data-role="layout" data-id="default">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<div data-role="footer">
<div data-role="tabstrip">
<a href="#info" data-icon="info">Info</a>
<a href="#map" data-icon="globe">Map</a>
</div>
</div>
</div>
<div id="info" data-role="view" data-title="Falafel App">
<h1>Google Map<br />in Kendo UI Mobile</h1>
<h2>(with Geolocation!)</h2>
</div>
<div id="map" data-role="view"
data-title="Map"
data-stretch="true"
data-init="App.initMap">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button"
data-click="App.onSetGeoLocationClick"
data-align="right"
data-icon="home">
</a>
</div>
</div>
<div id="map_canvas"></div>
</div>
<div id="map-modal" data-role="modalview" style="width: 95%; height: 18em;"
data-title="Getting Started">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
The <i class="km-icon km-home"></i> home button in the top right will get your current geolocation when clicked.
<div class="button-container">
<a data-role="button"
data-click="App.onCloseModalClick"
data-icon="action">
OK, got it!
</a>
</div>
</div>
<div id="geolocation-error-modal" data-role="modalview" style="width: 95%; height: 18em;"
data-title="Geolocation Error">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button"
data-click="App.onCloseModalClick"
data-align="right"
data-icon="downloads">
</a>
</div>
</div>
Geolocation has been denied or is not enabled on this device.
Turn on location services in privacy settings and try again.
</div>
<script id="jsbin-javascript">
var App = {
mobile: null,
map: null,
geoLocation: {
position: null,
marker: null,
timer: null,
error: false
},
init: function () {
//INITALIZE MOBILE APP AND SAVE FOR LATER USE
this.mobile = new kendo.mobile.Application(document.body, {
layout: 'default',
initial: 'info'
});
},
initMap: function (e) {
var me = App;
var element = document.getElementById('map_canvas');
var options = {
center: new google.maps.LatLng(36.9759254, -121.9533386),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
//CREATE MAP AND SAVE TO APP FOR LATER USE
me.map = new google.maps.Map(element, options);
//OPEN MODAL INSTRUCTIONS
$('#map-modal').getKendoMobileModalView().open();
},
//USE TO CLOSE ANY MODAL
onCloseModalClick: function (e) {
//GET MODAL
var modal = e.target
.closest('.km-modalview')
.getKendoMobileModalView();
//CLOSE MODAL
modal.close();
},
onSetGeoLocationClick: function (e) {
var me = App;
me.setGeoLocation(true);
},
//TRACKS THE DEVICE GEO LOCATION
//http://diveintohtml5.info/geolocation.html
//http://www.bennadel.com/blog/2023-Geocoding-A-User-s-Location-Using-Javascript-s-GeoLocation-API.htm
setGeoLocation: function (watchPosition, fnCallback) {
var me = this;
var options = {
timeout: (5 * 1000), //5 seconds
maximumAge: (1000 * 60 * 15), //15 mins
enableHighAccuracy: true
};
var success = function (position) {
//PROCESS CALLBACK IF APPLICABLE
if (fnCallback) fnCallback(position ? {
lat: position.coords.latitude,
lng: position.coords.longitude
} : null);
//RESET ERROR FLAG
me.geoLocation.error = false;
//VALIDATE POSITION
if (!position) {
me.geoLocation.position = null;
me.geoLocation.marker.setVisible(false);
return;
}
//DECLARE VARIABLES
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//UPDATE GEO POSITION
me.geoLocation.position = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
//HANDLE NEW GEO MARKER FIRST TIME
if (!me.geoLocation.marker) {
//ADD GEO MARKER
me.geoLocation.marker = new google.maps.Marker({
position: latLng,
map: me.map,
animation: google.maps.Animation.DROP
});
} else {
//UPDATE POSITION IF APPLICABLE
me.geoLocation.marker.setMap(me.map);
me.geoLocation.marker.setPosition(latLng);
me.geoLocation.marker.setVisible(true);
}
me.map.setCenter(latLng);
};
var error = function (err) {
//HANDLE ERROR
switch (err.code) {
case err.PERMISSION_DENIED:
//NOTIFY USER OF NEW ERROR
if (!me.geoLocation.error)
//OPEN MODAL INSTRUCTIONS
$('#geolocation-error-modal').getKendoMobileModalView().open();
break;
case err.POSITION_UNAVAILABLE:
//NOTIFY USER OF NEW ERROR
if (!me.geoLocation.error)
//OPEN MODAL INSTRUCTIONS
$('#geolocation-error-modal').getKendoMobileModalView().open();
break;
case err.TIMEOUT:
break;
case err.UNKNOWN_ERROR:
break;
}
//SET ERROR FLAG
me.geoLocation.error = true;
};
//HANDLE GEO LOCATION IF APPLICABLE
if (navigator.geolocation) {
//REQUEST INITIAL GEO LOCATION
navigator.geolocation.getCurrentPosition(success, error, options);
//WATCH FOR PHYSICAL MOVEMENT
//SAVE TIMER FOR STOPPING LATER IF NEEDED
if (watchPosition) me.geoLocation.timer = navigator.geolocation.watchPosition(success, error);
}
},
getGeoLocation: function (fnCallback) {
this.setGeoLocation(false, fnCallback);
}
};
//INITAILIZE APP
App.init();
</script>
<script id="jsbin-source-css" type="text/css">#info h1,
#info h2 {
text-align: center;
}
#map_canvas {
width: 100%;
}
.km-modalview .km-scroll-container {
padding: 15px;
}
.km-scroll-container i.km-icon {
display: inline-block;
}
.button-container {
margin-top: 15px;
text-align: center;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var App = {
mobile: null,
map: null,
geoLocation: {
position: null,
marker: null,
timer: null,
error: false
},
init: function () {
//INITALIZE MOBILE APP AND SAVE FOR LATER USE
this.mobile = new kendo.mobile.Application(document.body, {
layout: 'default',
initial: 'info'
});
},
initMap: function (e) {
var me = App;
var element = document.getElementById('map_canvas');
var options = {
center: new google.maps.LatLng(36.9759254, -121.9533386),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
//CREATE MAP AND SAVE TO APP FOR LATER USE
me.map = new google.maps.Map(element, options);
//OPEN MODAL INSTRUCTIONS
$('#map-modal').getKendoMobileModalView().open();
},
//USE TO CLOSE ANY MODAL
onCloseModalClick: function (e) {
//GET MODAL
var modal = e.target
.closest('.km-modalview')
.getKendoMobileModalView();
//CLOSE MODAL
modal.close();
},
onSetGeoLocationClick: function (e) {
var me = App;
me.setGeoLocation(true);
},
//TRACKS THE DEVICE GEO LOCATION
//http://diveintohtml5.info/geolocation.html
//http://www.bennadel.com/blog/2023-Geocoding-A-User-s-Location-Using-Javascript-s-GeoLocation-API.htm
setGeoLocation: function (watchPosition, fnCallback) {
var me = this;
var options = {
timeout: (5 * 1000), //5 seconds
maximumAge: (1000 * 60 * 15), //15 mins
enableHighAccuracy: true
};
var success = function (position) {
//PROCESS CALLBACK IF APPLICABLE
if (fnCallback) fnCallback(position ? {
lat: position.coords.latitude,
lng: position.coords.longitude
} : null);
//RESET ERROR FLAG
me.geoLocation.error = false;
//VALIDATE POSITION
if (!position) {
me.geoLocation.position = null;
me.geoLocation.marker.setVisible(false);
return;
}
//DECLARE VARIABLES
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//UPDATE GEO POSITION
me.geoLocation.position = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
//HANDLE NEW GEO MARKER FIRST TIME
if (!me.geoLocation.marker) {
//ADD GEO MARKER
me.geoLocation.marker = new google.maps.Marker({
position: latLng,
map: me.map,
animation: google.maps.Animation.DROP
});
} else {
//UPDATE POSITION IF APPLICABLE
me.geoLocation.marker.setMap(me.map);
me.geoLocation.marker.setPosition(latLng);
me.geoLocation.marker.setVisible(true);
}
me.map.setCenter(latLng);
};
var error = function (err) {
//HANDLE ERROR
switch (err.code) {
case err.PERMISSION_DENIED:
//NOTIFY USER OF NEW ERROR
if (!me.geoLocation.error)
//OPEN MODAL INSTRUCTIONS
$('#geolocation-error-modal').getKendoMobileModalView().open();
break;
case err.POSITION_UNAVAILABLE:
//NOTIFY USER OF NEW ERROR
if (!me.geoLocation.error)
//OPEN MODAL INSTRUCTIONS
$('#geolocation-error-modal').getKendoMobileModalView().open();
break;
case err.TIMEOUT:
break;
case err.UNKNOWN_ERROR:
break;
}
//SET ERROR FLAG
me.geoLocation.error = true;
};
//HANDLE GEO LOCATION IF APPLICABLE
if (navigator.geolocation) {
//REQUEST INITIAL GEO LOCATION
navigator.geolocation.getCurrentPosition(success, error, options);
//WATCH FOR PHYSICAL MOVEMENT
//SAVE TIMER FOR STOPPING LATER IF NEEDED
if (watchPosition) me.geoLocation.timer = navigator.geolocation.watchPosition(success, error);
}
},
getGeoLocation: function (fnCallback) {
this.setGeoLocation(false, fnCallback);
}
};
//INITAILIZE APP
App.init();</script></body>
</html>
Raw
jsbin.cipuq.css
#info h1,
#info h2 {
text-align: center;
}
#map_canvas {
width: 100%;
}
.km-modalview .km-scroll-container {
padding: 15px;
}
.km-scroll-container i.km-icon {
display: inline-block;
}
.button-container {
margin-top: 15px;
text-align: center;
}
Raw
jsbin.cipuq.js
var App = {
mobile: null,
map: null,
geoLocation: {
position: null,
marker: null,
timer: null,
error: false
},
init: function () {
//INITALIZE MOBILE APP AND SAVE FOR LATER USE
this.mobile = new kendo.mobile.Application(document.body, {
layout: 'default',
initial: 'info'
});
},
initMap: function (e) {
var me = App;
var element = document.getElementById('map_canvas');
var options = {
center: new google.maps.LatLng(36.9759254, -121.9533386),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
//CREATE MAP AND SAVE TO APP FOR LATER USE
me.map = new google.maps.Map(element, options);
//OPEN MODAL INSTRUCTIONS
$('#map-modal').getKendoMobileModalView().open();
},
//USE TO CLOSE ANY MODAL
onCloseModalClick: function (e) {
//GET MODAL
var modal = e.target
.closest('.km-modalview')
.getKendoMobileModalView();
//CLOSE MODAL
modal.close();
},
onSetGeoLocationClick: function (e) {
var me = App;
me.setGeoLocation(true);
},
//TRACKS THE DEVICE GEO LOCATION
//http://diveintohtml5.info/geolocation.html
//http://www.bennadel.com/blog/2023-Geocoding-A-User-s-Location-Using-Javascript-s-GeoLocation-API.htm
setGeoLocation: function (watchPosition, fnCallback) {
var me = this;
var options = {
timeout: (5 * 1000), //5 seconds
maximumAge: (1000 * 60 * 15), //15 mins
enableHighAccuracy: true
};
var success = function (position) {
//PROCESS CALLBACK IF APPLICABLE
if (fnCallback) fnCallback(position ? {
lat: position.coords.latitude,
lng: position.coords.longitude
} : null);
//RESET ERROR FLAG
me.geoLocation.error = false;
//VALIDATE POSITION
if (!position) {
me.geoLocation.position = null;
me.geoLocation.marker.setVisible(false);
return;
}
//DECLARE VARIABLES
var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
//UPDATE GEO POSITION
me.geoLocation.position = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
//HANDLE NEW GEO MARKER FIRST TIME
if (!me.geoLocation.marker) {
//ADD GEO MARKER
me.geoLocation.marker = new google.maps.Marker({
position: latLng,
map: me.map,
animation: google.maps.Animation.DROP
});
} else {
//UPDATE POSITION IF APPLICABLE
me.geoLocation.marker.setMap(me.map);
me.geoLocation.marker.setPosition(latLng);
me.geoLocation.marker.setVisible(true);
}
me.map.setCenter(latLng);
};
var error = function (err) {
//HANDLE ERROR
switch (err.code) {
case err.PERMISSION_DENIED:
//NOTIFY USER OF NEW ERROR
if (!me.geoLocation.error)
//OPEN MODAL INSTRUCTIONS
$('#geolocation-error-modal').getKendoMobileModalView().open();
break;
case err.POSITION_UNAVAILABLE:
//NOTIFY USER OF NEW ERROR
if (!me.geoLocation.error)
//OPEN MODAL INSTRUCTIONS
$('#geolocation-error-modal').getKendoMobileModalView().open();
break;
case err.TIMEOUT:
break;
case err.UNKNOWN_ERROR:
break;
}
//SET ERROR FLAG
me.geoLocation.error = true;
};
//HANDLE GEO LOCATION IF APPLICABLE
if (navigator.geolocation) {
//REQUEST INITIAL GEO LOCATION
navigator.geolocation.getCurrentPosition(success, error, options);
//WATCH FOR PHYSICAL MOVEMENT
//SAVE TIMER FOR STOPPING LATER IF NEEDED
if (watchPosition) me.geoLocation.timer = navigator.geolocation.watchPosition(success, error);
}
},
getGeoLocation: function (fnCallback) {
this.setGeoLocation(false, fnCallback);
}
};
//INITAILIZE APP
App.init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment