Problem Example Geolocation error Permissions Android Not answered

I found a post that said adding:

<access origin="*.google.com"/>
<access origin="*.googleapis.com"/>
<access origin="*.gstatic.com"/>

would work.

I am getting the same issue.

I am getting the same issue using the Googlemaps sample.

Using the Chrome Remote Debugger, are any error messages being generated?

Didn’t know that was available…

Refused to load the image ‘’ because it violates the following Content Security Policy directive: “img-src ‘self’ data:”.

Refused to load the image ‘https://maps.googleapis.com/maps/api/js/StaticMapService.GetMapImage?1m2&1i8291084&2i5426847&2e1&3u16&4m2&1u360&2u400&5m6&1e0&5sen-GB&6sus&10b1&12b1&14i1301875&key=AIzaSyB1JcEQWG607BSqbdWQSJy_wtlEsIQg-XM&token=96306’ because it violates the following Content Security Policy directive: “img-src ‘self’ data:”.

You’ve run into Content Security Policy. This is an evolving area of the web, as browsers improve security on what content is allowed to be displayed. Here’s a blog post on it:

https://blog.nsbasic.com/2015/12/phonegap-no-content-security-policy-message/

CSP is VERY difficult to get right… too lenient and Apple will reject your app. Too restrictive and you hit all sorts of problems.

Stackoverflow is loaded with CSP settings for various google services including maps.


Virus-free. www.avast.com

I have an app with which geolocation runs fine with Android devices and on desktop (I do not develop for iOS any more), as a web app and with PhoneGap .apk. I did such a lot of experiments that I am afraid I could not explain step by step what had to be changed until this worked decently as a web app as well as a native app with PG. Will try to attach a zip of my AppStudio 7 project. Please have a look at config.xml especially because of csp. This app is not ready as I would like to have it. But maybe it is ready enough to show what works and what is different from maybe not working apps. If I do not succeed in attaching my zipped project and if someone is still interested, send email to bsommer@bsommer.de and I can attach the zip file to a direct email. Good luck

Bernd
FindeMich7.appstudio.zip (1.5 MB)

I added your setting into my app but I get the same problem.

This shouldn’t be a difficult one…

Anyone have the config setting to show a map ?

Cheers

Steve Warby

‘’’

https://www.google.com/search?source=hp&ei=P8YfXJ_8NNDGsQW72pH4CQ&q=content+security+policy+google+maps&oq=content+security+pilicy+google+maps

‘’’

Thanks,

I added:

```“content_security_policy”: “script-src ‘self’ https://maps.googleapis.com https://maps.gstatic.com; object-src ‘self’”````

Moving on. Where do I find the correct syntax for the google maps component.

I played around and found:

  GoogleMap1.mapOptions.latitude = 41.2524;
  GoogleMap1.mapOptions.longitude = -95.9980;
  GoogleMap1.mapOptions.zoom=20;
  var myLatLng = {lat: 41.2524, lng: -95.9980};
  GoogleMap1.setMarker(myLatLng);

the api here Geolocation  |  Maps JavaScript API  |  Google Developers states

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Marker Labels</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
      // In the following example, markers appear when the user clicks on the map.
      // Each marker is labeled with a single alphabetical character.
      var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
      var labelIndex = 0;

      function initialize() {
        var bangalore = { lat: 12.97, lng: 77.59 };
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 12,
          center: bangalore
        });

        // This event listener calls addMarker() when the map is clicked.
        google.maps.event.addListener(map, 'click', function(event) {
          addMarker(event.latLng, map);
        });

        // Add a marker at the center of the map.
        addMarker(bangalore, map);
      }

      // Adds a marker to the map.
      function addMarker(location, map) {
        // Add the marker at the clicked location, and add the next-available label
        // from the array of alphabetical characters.
        var marker = new google.maps.Marker({
          position: location,
          label: labels[labelIndex++ % labels.length],
          map: map
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

So using the map object how do I do the following

eg how do I set the title of the marker to ‘test’ and set the o’clock event to show something.

There is no syntax help for GoogleMap1

Cheers

Steve Warby

This looks like a new issue. Can you put it into a new thread?

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.