Instantly share code, notes, and snippets.

Embed
What would you like to do?
Phonegap Cordova Geolocation with Google Maps Javascript API v3
* {
-webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}
html, body {
width: 100%;
height: 100%;
padding-top: 10%;
}
#map{
width: 100%;
height: 80%;
}
body {
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
background-color:#E4E4E4;
background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-ms-linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
background-image:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #A7A7A7),
color-stop(0.51, #E4E4E4)
);
background-attachment:fixed;
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
font-size:12px;
margin:0px;
padding:0px;
text-transform:uppercase;
}
h1 {
font-size:24px;
font-weight:normal;
margin:0px;
overflow:visible;
padding:0px;
text-align:center;
}
.event {
border-radius:4px;
-webkit-border-radius:4px;
color:#FFFFFF;
font-size:12px;
margin:0px 30px;
padding:2px 0px;
}
.event.listening {
background-color:#333333;
display:block;
}
.event.received {
background-color:#4B946A;
display:none;
}
@keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
@-webkit-keyframes fade {
from { opacity: 1.0; }
50% { opacity: 0.4; }
to { opacity: 1.0; }
}
.blink {
animation:fade 3000ms infinite;
-webkit-animation:fade 3000ms infinite;
}
<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" />
<title>Working Google Maps</title>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"> </script>
</body>
</html>
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 marker = new google.maps.Marker({
position: latLong,
map: map,
title: 'my location'
});
},
onError: function(error){
alert("the code is " + error.code + ". \n" + "message: " + error.message);
},
};
app.initialize();
@abhishekbedi

This comment has been minimized.

Copy link

abhishekbedi commented Jan 1, 2015

simple nice and easy well written !

@appskitchen

This comment has been minimized.

Copy link

appskitchen commented Jan 28, 2015

Perfect

@tejasghutukade

This comment has been minimized.

Copy link

tejasghutukade commented May 15, 2016

the map load and then dissappears. what to do?

@evandrolamaral

This comment has been minimized.

Copy link

evandrolamaral commented May 22, 2016

Works!! thanks!!

@madhvi93

This comment has been minimized.

Copy link

madhvi93 commented Aug 25, 2016

the map load and then dissappears. what to do?..Could you please help me out.?

@oscarsanma

This comment has been minimized.

Copy link

oscarsanma commented Sep 26, 2016

madhvi93, tejasghutukade check YOUR_API_KEY

@plxmas

This comment has been minimized.

Copy link

plxmas commented Nov 22, 2016

I receive this message

the code is 2.
message: Origin does not have permission to use Geolocation service

@cppprog

This comment has been minimized.

Copy link

cppprog commented Jan 16, 2017

you must set orgin in your config.xml

@razanrab

This comment has been minimized.

Copy link

razanrab commented Jan 20, 2017

when i run the project on phonegap app in my iphone a map with this text "Sorry we have no imagery here" appears
how can i show the map ?

@nclar015

This comment has been minimized.

Copy link

nclar015 commented Jan 23, 2017

I have the same issue as @razanrab No matter how I configure it the map shows "Sorry we have no imagery here"

@ajbm6

This comment has been minimized.

Copy link

ajbm6 commented Sep 10, 2018

error. it say only secure origins are allowed. pls help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment