I followed this tutorial on youtube here: https://www.youtube.com/watch?v=gw3AKC4MsGQ
I have done everything the same but have come to a slight problem as the javascript has been updated since the video was made. Any ideas on what changes should be made to my code to accommodate the changes in the javascript?
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMsQzZKDhyiXUMOxllFxi5iBz1tZ1j-mc&callback=initMap">
</script>
<script type="js/direction.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Get Directions</h1>
</ion-header-bar>
<ion-content>
<div id="map"></div>
</ion-content>
</ion-pane>
And this is the Javascript:
function initMap() {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: {lat: 41.85, lng: -87.65}
});
directionsDisplay.setMap(map);
var onChangeHandler = function() {
calculateAndDisplayRoute(directionsService, directionsDisplay);
};
document.getElementById('start').addEventListener('change', onChangeHandler);
document.getElementById('end').addEventListener('change', onChangeHandler);
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
type="js/direction.js", it will be src="js/direction.js"
Related
I'm using leaflet v1.5.1.
The error from Chrome is:
leaflet.js:5 Uncaught TypeError: this.callInitHooks is not a function
at Object.i [as Marker] (leaflet.js:5)
at map1Rose2.php:77
Below is the minimal code that will reproduce the issue in Chrome. I do NOT see an issue with the function. The error appears at the first 'var' (line 77) in the .
I've prodded and poked at this thing to exhaustion does anyone have an idea?
<!DOCTYPE html>
<html lang="en">
<head>
<title>NCM Map of Station Locations</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon-32x32.png" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ******************************** Load LEAFLET from CDN *********************************** -->
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<!-- ********************************* End Load LEAFLET **************************************** -->
<!-- ******************************** Load ESRI LEAFLET from CDN ******************************* -->
<script src="https://unpkg.com/esri-leaflet#2.2.4/dist/esri-leaflet.js"
integrity="sha512-tyPum7h2h36X52O2gz+Pe8z/3l+Y9S1yEUscbVs5r5aEY5dFmP1WWRY/WLLElnFHa+k1JBQZSCDGwEAnm2IxAQ=="
crossorigin=""></script>
<!-- Load Esri Leaflet Geocoder from CDN -->
<link rel="stylesheet" href="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.css"
integrity="sha512-v5YmWLm8KqAAmg5808pETiccEohtt8rPVMGQ1jA6jqkWVydV5Cuz3nJ9fQ7ittSxvuqsvI9RSGfVoKPaAJZ/AQ=="
crossorigin="">
<script src="https://unpkg.com/esri-leaflet-geocoder#2.2.14/dist/esri-leaflet-geocoder.js"
integrity="sha512-uK5jVwR81KVTGe8KpJa1QIN4n60TsSV8+DPbL5wWlYQvb0/nYNgSOg9dZG6ViQhwx/gaMszuWllTemL+K+IXjg=="
crossorigin=""></script>
<!-- ******************************** End ESRI LEAFLET ***************************************** -->
<!-- ******************************** Added Functionality *************************************** -->
<link rel="stylesheet" href="css/leaflet_numbered_markers.css" />
<link rel="stylesheet" href="css/L.Grid.css" />
<link rel="stylesheet" href="css/L.Control.MousePosition.css" />
<link rel="stylesheet" href="css/control.w3w.css" />
<link rel="stylesheet" href="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.css" />
<link rel="stylesheet" type="text/css" href="css/maps.css">
<link rel="stylesheet" type="text/css" href="css/leaflet/leaflet.contextmenu.min.css">
<script src="js/leaflet_numbered_markers.js"></script>
<script src="js/L.Grid.js"></script> <!-- https://github.com/jieter/Leaflet.Grid -->
<script src="js/L.Control.MousePosition.js"></script> <!-- https://github.com/ardhi/Leaflet.MousePosition -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OverlappingMarkerSpiderfier-Leaflet/0.2.6/oms.min.js"></script>
<script src="js/control.w3w.js"></script>
<script src="https://ppete2.github.io/Leaflet.PolylineMeasure/Leaflet.PolylineMeasure.js"></script>
<script src="js/leaflet/leaflet.contextmenu.min.js"></script>
<script src="https://unpkg.com/leaflet.maidenhead#1.0.0/src/maidenhead.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-geometryutil#0.9.1/src/leaflet.geometryutil.min.js"></script>
<!-- https://github.com/Turfjs/turf -->
<script src="https://cdn.jsdelivr.net/npm/#turf/turf#5/turf.min.js"></script>
<style>
</style>
</head>
<body>
<!-- the map div holds the map -->
<div id="map"></div>
<script>
var WA0TJT = L.Marker(new L.LatLng(39.202911,-94.602887),{
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedDivIcon({number: '1' }),
title:"marker_1" }).addTo(fg).bindPopup("1<br><b>ID: #0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup();
var KA0OTL = L.Marker(new L.LatLng(39.233702,-94.635126),{
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedGreenDivIcon({number: '2' }),
title:"marker_2" }).addTo(fg).bindPopup("2<br><b>ID: #0025</b><br>KA0OTL<br>Jeff Libby<br>Platte Co., MO Dist: A<br>39.233702, -94.635126<br>EM29qf").openPopup();
/*
var map = L.map('map', {
center: [39.73, -104.99],
zoom: 10,
layers: [base, pois]
});
*/
var fg = new L.featureGroup();
function circleKoords(e) { };
</script>
</body>
</html>
You have to call new L.Marker() or L.marker()
To fix your second error (in the comments) you have to define first your featureGroup and then create the markers.
var fg = new L.featureGroup();
var WA0TJT = L.Marker(new L.LatLng(39.202911,-94.602887),{
contextmenu: true,
contextmenuWidth: 140,
contextmenuItems: [{ text: 'Click here to add mileage circles', callback: circleKoords}],
icon: new L.NumberedDivIcon({number: '1' }),
title:"marker_1" }).addTo(fg).bindPopup("1<br><b>ID: #0013</b><br>WA0TJT<br>Keith Kaiser<br>Platte Co., MO Dist: A<br>39.202911, -94.602887<br>EM29QE").openPopup();
also you will nothing see on the map, because you are not added your featuregroup to the map. And you need a map instance.
var map = L.map('map', {
...
});
fg.addTo(map);
I have to add a click handler to the button provided that will retrieve the users current location using the geolocation api.
Here's my code, I'm trying to use geolocation to set the current location of the user to the map but the button for some reasons does not work. Can anyone point out what I'm doing wrong and help me out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<style>
#mapid { height: 600px; }
</style>
<script>
const Mapping = {
map : null,
initializeMap : () => {
Mapping.map = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
subdomains: ['a','b','c']
}).addTo( Mapping.map );
},
resetLocation : ({lat,lon}) => {
Mapping.map.setView([lat,lon], 13);
}
}
window.onload = () => {
Mapping.initializeMap();
userCode();
}
function userCode() {
// JS CODE START
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
let pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
Mapping.setPosition(pos);
Mapping.open(Mapping.map);
Mapping.map.setPosition(pos);
})
}
// JS CODE END
}
</script>
</head>
<body>
<!-- HTML CODE GOES HERE-->
<button onclick="userCode()">Get Location</button>
<div id="mapid" style="width: 600px; height: 400px;"></div>
</body>
</html>
Use
Mapping.resetLocation({lat:pos.lat,lon:pos.lng});
Instead of
Mapping.setPosition(pos);
How can I mark multiple locations in google map. Latitude and Longitute are getting from my table as json response. Please check below code and json response and correct me?
When I alert(myCenter) latitude and longitude are showing correctly but not showing correctly on map
Json encode
[{"id":"1","lat":"9.9710364","lng":"76.2382596","address":"Ernakulam, pra"},{"id":"2","lat":"9.5946677"
,"lng":"76.5030831","address":"Kochi pra"},{"id":"3","lat":"8.8862925","lng":"76.5850831","address":"Kollam
pra"},{"id":"4","lat":"8.4998965","lng":"76.8543216","address":"Trivandrum pra"}]
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<h1>Load Multiple Marker</h1>
<div id="googleMap" style="width: 800px; height: 500px;">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Map -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
$(function(){
$.ajax({
url: 'geo-locations.php',
success:function(data){
//Loop through each location.
$.each(data, function(){
//Plot the location as a marker
var myCenter = new google.maps.LatLng(this.lat, this.lng);
//alert(myCenter)
function initialize()
{
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
});
}
});
});
</script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
There is no need to initialize map instance per every marker, you could change the flow to:
initialize a map
once the data is loaded, place markers on the map
Example
$(function () {
$.ajax({
url: 'https://rawgit.com/vgrem/e2dda2a255a24df92bff/raw/d9c694b635612ee405c7d16c355dca19adb6380c/geo-locations.json',
success: function (data) {
initialize(data);
}
});
});
function addMarker(map,position){
var marker = new google.maps.Marker({
position: position,
title: 'Click to zoom'
});
marker.setMap(map);
// Zoom to 9 when clicking on marker
google.maps.event.addListener(marker, 'click', function () {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
function initialize(data) {
var mapProp = {
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var bounds = new google.maps.LatLngBounds();
$.each(data,function(pos) {
var pos = new google.maps.LatLng(this.lat, this.lng);
bounds.extend(pos);
addMarker(map,pos);
});
map.fitBounds(bounds);
}
<h1>Load Multiple Marker</h1>
<div id="googleMap" style="width: 800px; height: 500px;">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
PhpFiddle
var exampleApp= angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
exampleApp.controller('MapController', function($scope, $ionicLoading) {
var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable: true,
animation: google.maps.Animation.DROP
});
navigator.geolocation.getCurrentPosition(function(pos) {
map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
var myLocation = new google.maps.Marker({
position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
map: map,
title: "My Location"
});
});
$scope.map = map;
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="MapController">
<div id="map" data-tap-disabled="true"></div>
</ion-content>
</ion-pane>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1oJGDZP2lM3c1dnPBmAbPBOb_Rh4u8n0&sensor=true"></script>
</body>
</html>
This part is the javascript and html part of the code
I dont undestand why the google map unable to get user current location in android device but it work on ios simulator i will be very grateful if anyone of you can help me to solve
Its a bad idea to use navigator directly in ionic, i would recommend using ngCordova and its powerful plugins for cross platform features:
http://ngcordova.com/docs/plugins/geolocation/
Apart from this I would also check if you have enabled geolocation for your app.
You should see something like this:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
in your AndroidManifest.xml file
I'm building an app within Phonegap and I've got two parts working on their own, but will not work together.
Here is the HTML I'm trying to render:
<body>
<div id="map"></div>
<div data-role="collapsible-set" id="storeList">
<div data-role="collapsible" data-mini="true">
<h3>Section 1</h3>
<p>I'm the collapsible set content for section 1.</p>
</div>
<div data-role="collapsible" data-mini="true">
<h3>Section 2</h3>
<p>I'm the collapsible set content for section 2.</p>
</div>
</div>
</body>
When my header is in this order, the map shows up, but the jQuery mobile collapsing dropdown does not. This is probably stemming from trying to load jQuery Mobile before jQuery itself.
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>
<title>Working Google Maps</title>
</head>
However, when I flip it around and place jQuery before jQuery mobile, then the collapsible data sets work, but google Maps does not show up. It's just a blank white space.
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"> </script>
The CSS that matters:
html, body {
width: 100%;
height: 100%;
padding-top: 10%;
}
#map {
width: 100%;
height: 60%;
z-index: 5
}
#storeList {
height: 30%;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2
}
The lengthy JavaScript
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
// app.receivedEvent('deviceready');
navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},
onSuccess: function(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var latLong = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: latLong,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myLocationMarkerImage = {
url: 'img/blue_dot.png',
anchor: new google.maps.Point(16, 0)
};
var myLocationMarker = new google.maps.Marker({
position: latLong,
map: map,
title: 'my location',
icon: myLocationMarkerImage
});
},
onError: function(error){
alert("the code is " + error.code + ". \n" + "message: " + error.message);
},
};
app.initialize();
TIA!
I was able to figure this out by looking at these two articles:
PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?
JQuery Mobile + Google Maps v3
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link href='http://fonts.googleapis.com/css?family=Lobster|Quattrocento+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
</head>
<body>
<div data-role="page" id="map-page" data-url="map-page">
<div data-role="header" data-theme="a">
<h1>My App</h1>
</div>
<div role="main" class="ui-content" id="map">
<!-- map loads here... -->
</div>
<div id="storeListLoading"><img src="img/loader.gif"></div>
<dl id="storeList"></dl>
</div>
</body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/async.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/jquery.scrollintoview.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=_MY_API_KEY_&libraries=geometry,places"> </script>
</html>
CSS
#map-page {
width: 100%;
height: 100%;
padding: 0;
}
#map {
width: 100%;
height: 45%;
z-index: 10;
position: fixed;
}
JS
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
// app.receivedEvent('deviceready');
navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},
onSuccess: function(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var latLong = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: latLong,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myLocationMarkerImage = {
url: 'img/blue_dot.png',
anchor: new google.maps.Point(16, 0)
};
var myLocationMarker = new google.maps.Marker({
position: latLong,
map: map,
title: 'my location',
icon: myLocationMarkerImage
});
},
onError: function(error){
alert("the code is " + error.code + ". \n" + "message: " + error.message);
},
};
$( document ).on( "pageshow", "#map-page", function() {
app.initialize();
});