CODEWITHSUNDEEP
iosgoogle-mapscordovageolocationgoogle-api
Lirael
Lirael

Reputation: 35

Google api key not work on my ios app


I've insert geolocalization in my ios app developed with phonegap.
When I open my map.html page the device should show my position on a google maps. Now, when I open the map.html I obtain a request to use my gps and then an error that says: "Google disabled the use of Google Maps API for this application. The provided key isn't a valid Google API key or it's not authorized for Google Maps API Javascript v3 on this site. If you are the owner of this app you can find additional informations here: https://developers.google.com/maps/documentation/javascript/tutorial#api_key"

So the problem is the api key, I've read the documentation and searched in the web but I can't solve it. I'm testing the app with xcode using my ipad as device, it isn't on apple store. If I use a browser key I don't know which link I need to use, if I try with ios key it doesn't work. I've tried to insert the bundle idenfier generated during the phonegap installation (com.example.pas-si) and the one signed in my apple certificate that I'm using to test the app on my ipad (it.quidfarm.approva).
I've activated the proper apis from the developer console, I can't have a problem of quota because the app is only on my device.
I think there is some base setting that I didn't set in the proper manner.

I've done my app with Phonegap and installed geolocalization using this guide http://www.devx.com/wireless/implement-google-maps-api-on-phonegap-using-the-device-api.html
This is my map.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=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 rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Pas.si</title>
</head>
<body>
    <div data-role="page" id="page" style="background-color:transparent;" >
        <!-- ....Menu and other Html stuffs -->

         <div id="content">
            <div id="geolocation" style="width: 600px; height: 300px;">
            </div>
            <script type="text/javascript" src="phonegap.js"></script>
            <script type="text/javascript" src="js/mappa.js"></script>
            <script src="http://maps.googleapis.com/maps/api/js?key=MY-API-KEY&sensor=false">
            </script>
            <script type="text/javascript">
                app.initialize();
            </script>
         </div> <!-- END #content -->

  <!-- .... other Html stuffs -->
</div> <!-- END #page -->
   <!-- Java to shows a menu - not for geolocalization -->
   <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $('#menu').click(function() {
         $('#listamenu').toggleClass('classmenub classmenua');
                });
    </script>
</body>
</html>

And this is my map.js

/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied.  See the License for the
* specific language governing permissions and limitations
* under the License.
*/
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 explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
    // Get our current location
    navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},

// Current location was found
// Show the map
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: 16,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map=new google.maps.Map(document.getElementById("geolocation"), mapOptions);
},

// Current location could not be determined
// Show error
onError: function(error) {
    alert('code: '   + error.code   + '\n' + 'message: ' + error.message + '\n');
},
 };

I'm working with phonegap 3.3, Xcode 5.0.2. On a Mac Book pro with OS 10.8.5

Thank you and sorry for my bad english, hope that you can understand the problem.

Upvotes: 1

Views: 2385

Answers (1)

Dawson Loudon
Dawson Loudon

Reputation: 6029

Since the GoogleMaps API v3 does not require an API key, you could remove it for now.

In the future you may need to add it back in if you reach the usage limit. And in that case you will want look further into how to add your application namespace to an API key instance.

Upvotes: 1

Related Questions