Controlls missing on Google Maps API3 in Phonegap iOS App

问题

I am working on an app that is built using jQuery mobile and Phonegap. It has been working fine for over a year. Then a month or two ago, the controls (specifically map type, zoom, and street view) went missing without the app being updated, and only on iOS.

I have tried running the app through the phone's browser and it works fine. It is only after it has been compiled by phonegap (build) that the issue exists. I've attempted to manually force the UI settings to true, but only the map type control comes up. I have also tried modifying CSS to give the controls a crazy high z-index, and that made no difference either.

I have not been able to find any relevant information online. How can I get the controls to show up again?

回答1:

In my case I had a missing street view icon. Google Maps iframe didn't trigger onload event because Cordova rejected empty url of iframe.

ERROR Internal navigation rejected - <allow-navigation> not set for url='about:blank'

I set <allow-navigation href="*" /> in config.xml

回答2:

I've been in contact with Google, and it turns out a bug was introduced in version 3.32 that's causing this. They're working on it as far as I know, but came up with a workaround in the meantime.

First, you need to specify version 3.31 in the script tag:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&v=3.31"></script>

And then when creating the mapOptions, manually set the controls you want to true. In my case:

var mapOptions = {
    center: latlng,
    zoom: 16,
    mapTypeControl: true,
    streetViewControl: true,
    zoomControl: true
};

回答3:

https://developers.google.com/maps/documentation/javascript/versions

hi! Read this article. if you put version in link, all works fine. example https://maps.googleapis.com/maps/api/js?v=3.30

来源：https://stackoverflow.com/questions/50048091/controlls-missing-on-google-maps-api3-in-phonegap-ios-app

标签

ios

google-maps-api-3

phonegap-build