i building app apache cordava(phonegap). question is, can run google map api in that? in advance
yes can run googlemaps api in phonegap/cordova application.first need api key (browser based , not android one). start out generating api_key , use .
then u need whitelist url , here simple index.html loads map marker. hope helps
<!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="content-security-policy" content="script-src 'self' https://maps.googleapis.com/ https://maps.gstatic.com/ https://mts0.googleapis.com/ 'unsafe-inline' 'unsafe-eval'"> <style> body, html, #map { margin: 0;width:100%;height:400px } #map { position: relative; width:400px; height: :50%; } #map:after { width: 22px; height: 40px; display: block; content: ' '; position: absolute; top: 50%; left: 50%; margin: -40px 0 0 -11px; background: url('https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi_hdpi.png'); background-size: 22px 40px; pointer-events: none; } </style> <script src="https://maps.googleapis.com/maps/api/js?key=your_api_key&callback=initialize" async defer></script> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> function initialize() { var mapoptions = { zoom: 4, center: new google.maps.latlng(-33, 151), maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map'), mapoptions); } </script> </head> <body> <div id="map"></div> </body> </html>
you can read more googlemaps api in here
https://developers.google.com/maps/documentation/javascript/examples/map-simple
you can read creating api key in here
https://developers.google.com/maps/documentation/javascript/get-api-key
Comments
Post a Comment