-
-
Save kacole2/6e881ddef600af06e9a0 to your computer and use it in GitHub Desktop.
Phonegap Cordova Geolocation with Google Maps Javascript API v3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| -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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); |
Perfect
the map load and then dissappears. what to do?
Works!! thanks!!
the map load and then dissappears. what to do?..Could you please help me out.?
madhvi93, tejasghutukade check YOUR_API_KEY
I receive this message
the code is 2.
message: Origin does not have permission to use Geolocation service
you must set orgin in your config.xml
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 ?
I have the same issue as @razanrab No matter how I configure it the map shows "Sorry we have no imagery here"
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
simple nice and easy well written !