语言

Menu
Sites
Language
Google Maps page doesn't work

Hello everybody, I am testing the Google places api (search places exactly) through this tutorial: https://developers.google.com/maps/documentation/javascript/examples/place-search I've created a new Tizen web Project (using jquery), and I have copy/paste the html+js code from the tutorial into my tizen project, but I've got nothing as result (just a blank page), although I've added the policy into the config.xml file. And I've copy/paste the same code into a seperate web page, and it works fine! So what's wrong with the Tizen project? P.S: I use the Tizen 2.2 and I've tested the project with the RD-PQ device

编辑者为: John Ixion 开 27 4月, 2015
查看选择的答案
列表

响应

12 回复
Vikram

Hello,

There is an sample based on SDK 2.1. so it will useful to you.

     https://developer.tizen.org/documentation/articles/google-maps-on-tizen

Hope this help you.

John Ixion

we even have an open source app: https://wiki.automotivelinux.org/google_maps

karray gargouri

Hi,

 

I have this code:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <title>Place search pagination</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
    <script>
var map, placesList;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

  map = new google.maps.Map(document.getElementById('map-canvas'), {
    center: pyrmont,
    zoom: 17
  });

  var request = {
    location: pyrmont,
    radius: 500,
    types: ['subway_station']
  };

  placesList = document.getElementById('places');

  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status, pagination) {
  if (status != google.maps.places.PlacesServiceStatus.OK) {
    return;
  } else {
    createMarkers(results);

    if (pagination.hasNextPage) {
      var moreButton = document.getElementById('more');

      moreButton.disabled = false;

      google.maps.event.addDomListenerOnce(moreButton, 'click',
          function() {
        moreButton.disabled = true;
        pagination.nextPage();
      });
    }
  }
}

function createMarkers(places) {
  var bounds = new google.maps.LatLngBounds();

  for (var i = 0, place; place = places[i]; i++) {
    var image = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    var marker = new google.maps.Marker({
      map: map,
      icon: image,
      title: place.name,
      position: place.geometry.location
    });

    placesList.innerHTML += '<li>' + place.name + '</li>';

    bounds.extend(place.geometry.location);
  }
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    <style>
      #results {
        font-family: Arial, Helvetica, sans-serif;
        position: absolute;
        right: 5px;
        top: 50%;
        margin-top: -195px;
        height: 380px;
        width: 200px;
        padding: 5px;
        z-index: 5;
        border: 1px solid #999;
        background: #fff;
      }
      h2 {
        font-size: 22px;
        margin: 0 0 5px 0;
      }
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        height: 321px;
        width: 200px;
        overflow-y: scroll;
      }
      li {
        background-color: #f1f1f1;
        padding: 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      li:nth-child(odd) {
        background-color: #fcfcfc;
      }
      #more {
        width: 100%;
        margin: 5px 0 0 0;
      }
    </style>
  </head>
  <body>
    <div id="map-canvas"></div>
   
  </body>
</html>

This code works perfectly on a single page project, but when I put it in a page named "page2.html", and I wanto to naviagte from "index.html" to "page2.html", it shows me a blank page!

What's wrong?

PS: my project is a jquery Tizen web project! (+ Tizen version 2.3)

AVSukhov

Hello,

Try to launch you app in "Debug as" mode. May be you can see some error in console.

Abdullaah

Was your problem resolved? I'm facing the same problem...

Copy paste (JS+html) from Google API example (...google.com/maps/documentation/javascript/examples/map-simple).

Runs on the Web simulator and normal Browsers.. but alas.. shows only blank white screen on Device (Tizen 2.3).

Scratching my head... :-S

Seoghyun Kang

Hello,

 

I watched the similar experience.

 

When I created the map application, it was working well on the browers and web simulator.

But It did not work well on the target.  There was no error message in the console.

In my case, when app create the google map after user click the some button, it shows only blank white screen.

 

At that time, I solved the problem temporarily.

When application was launched, I create the map at the outside of the screen. So the map was invisible.

Then.. When user click the some button, I moved the map to the center of the screen and used the "setCenter" methods in the google API.

 

In conclusion, when I create the google map later, it did not appear. So I created the google map in advance.

Strangely it works well. :(  I know this is not normal operation.

 

But please refer it.

 

Best regards,

SH Kang
 

 

 

 

Marco Buettner

did you set privilege for internet and setup the access policy on the config.xml

Seoghyun Kang

Sure.

I think this is not the issue about the config.xml.

It maybe the some bug.

 

Abdullaah

Hello Marco,

I've set the access policy same as sample source in Tizen developer site (...tizen.org/documentation/articles/google-maps-on-tizen).

<access subdomains="true" origin="...//googleapis.com"/>

<access subdomains="true" origin="...//gstatic.com"/>

<access subdomains="true" origin="...//google.com"/>

I'm not sure about "privilege for internet" ... can you please share. Thanks.

 

 

 

 

Seoghyun Kang

Please add the following the code at the config.xml.

 

<access origin="*" subdomains="true"></access>

<tizen:privilege name="http://tizen.org/privilege/internet"/>

  

But I think this is not the issue about the config.xml.

Mark as answer
Abdullaah

Great.. seems it worked :-D

Added for internet access:

<tizen:privilege name="http://tizen.org/privilege/internet"/>

and then had to add this to use Geolocation:

<tizen:privilege name="http://tizen.org/privilege/location"/>

 

Strange.. the sample source at (developer.tizen.org/documentation/articles/google-maps-on-tizen)

doesn't have any of these.. and doesn't mention anywhere..

Stranger.. the sample still works on the device perfectly! which confused me in the first place :-S.

Thanks everyone.

AVSukhov

Hello,

Internet privilege added from SDK 2.3 rev1

and this privilege allow app access the Internet.

If you change required_version from 2.3 to 2.2 in config.xml, your code will be works without this privilege. =) 

so that the sample code from the example works.