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.

Show comment
Hide comment
@abhishekbedi

abhishekbedi Jan 1, 2015

simple nice and easy well written !

abhishekbedi commented Jan 1, 2015

simple nice and easy well written !

@appskitchen

This comment has been minimized.

Show comment
Hide comment
@appskitchen

appskitchen commented Jan 28, 2015

Perfect

@tejasghutukade

This comment has been minimized.

Show comment
Hide comment
@tejasghutukade

tejasghutukade May 15, 2016

the map load and then dissappears. what to do?

tejasghutukade commented May 15, 2016

the map load and then dissappears. what to do?

@evandrolamaral

This comment has been minimized.

Show comment
Hide comment
@evandrolamaral

evandrolamaral May 22, 2016

Works!! thanks!!

evandrolamaral commented May 22, 2016

Works!! thanks!!

@madhvi93

This comment has been minimized.

Show comment
Hide comment
@madhvi93

madhvi93 Aug 25, 2016

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

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.

Show comment
Hide comment
@oscarsanma

oscarsanma Sep 26, 2016

madhvi93, tejasghutukade check YOUR_API_KEY

oscarsanma commented Sep 26, 2016

madhvi93, tejasghutukade check YOUR_API_KEY

@plxmas

This comment has been minimized.

Show comment
Hide comment
@plxmas

plxmas Nov 22, 2016

I receive this message

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

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.

Show comment
Hide comment
@cppprog

cppprog Jan 16, 2017

you must set orgin in your config.xml

cppprog commented Jan 16, 2017

you must set orgin in your config.xml

@razanrab

This comment has been minimized.

Show comment
Hide comment
@razanrab

razanrab 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 ?

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.

Show comment
Hide comment
@nclar015

nclar015 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"

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.

Show comment
Hide comment
@ajbm6

ajbm6 Sep 10, 2018

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

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