Languages

Menu
Sites
Language
How to launch maps on another screen?

Hi there! I can't display Google maps on another screen. Google maps working perfectly as main screen. But if I want to launch file with maps, I get black screen. This is my maps file:

<!DOCTYPE html>
<html>
<head>
     <meta name="viewport" content="width=device-width, user-scalable=no"/>
	<title>Maps</title>
	<script src="http://maps.googleapis.com/maps/api/js"></script>
	<script>function initialize() {
  var mapProp = {
    // Start position
    center:new google.maps.LatLng(55.755826,37.6173),
    zoom:15,
    disableDefaultUI: true,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(55.755826,37.6173)});
   
}

google.maps.event.addDomListener(window, 'load', initialize);</script>
</head>
<body>
    <div class="ui-page">
 
 <div id="googleMap" style="width:360px;height:360px;"></div>
       
       
    </div>
	<script type="text/javascript" src="../../lib/tau/wearable/js/tau.min.js"></script>
</body>
</html>

And my config:

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/App_Name" version="1.0.0" viewmodes="fullscreen">
    <access origin="../googleapis.com" subdomains="true"></access>
    <access origin="../gstatic.com" subdomains="true"></access>
    <access origin="../google.com" subdomains="true"></access>
    <access origin="google.com" subdomains="true"></access>
    <access origin="maps.google.com" subdomains="true"></access>
    <access origin="googlemaps.com" subdomains="true"></access>
    <access origin="http://maps.googleapis.com/maps/api/js" subdomains="true"></access>
    <access origin="http://maps.googleapis.com" subdomains="true"></access>
    <access origin="../http://maps.googleapis.com/maps/api/js" subdomains="true"></access>
    <access origin="../http://maps.googleapis.com" subdomains="true"></access>
    <access origin="../../maps.googleapis.com/maps/api/js" subdomains="true"></access>
    <access origin="../../maps.googleapis.com" subdomains="true"></access>
    <access origin="http://googleapis.com" subdomains="true"></access>
    <access origin="http://googleapis.com" subdomains="true"></access>
   
    <tizen:application id="gwyMQKe9B8.App_Name" package="gwyMQKe9B8" required_version="2.3.1"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.normal"/>
    <feature name="http://tizen.org/feature/network.internet"/>
    <feature name="http://tizen.org/feature/web.service"/>
    <feature name="http://tizen.org/feature/websetting"/>
    <feature name="http://tizen.org/feature/location.batch"/>
    <feature name="http://tizen.org/feature/location.gps"/>
    <icon src="logo.jpg"/>
    <name>App_Name</name>
    <tizen:privilege name="http://tizen.org/privilege/location"/>
    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
    <tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:profile name="wearable"/>
    <tizen:setting hwkey-event="enable"/>
</widget>

Hope you will help me. Thank you in advance!

List

Responses

3 Replies
Armaan-Ul- Islam

Hello,

I am able to load the map in wearable screen using your code. How are you launching file with maps , what procedure are you using to launch ? Please share.

Umi Sonoda

Hi.

Yes, this code working perfectly on main screen, but not at another screen. For example, If I want to make a list on home screen and then launch file with maps via this list, maps don't work, only black screen. 

Can you help me with this, please?

And thank you for your reply!

Armaan-Ul- Islam

I have tried to load the map in another page and I also faced the similar problem. I suggest you may try the workaround for now :

  1. At first load the map in the main screen with a very little width & height (dot) . Keep a button in the main page along with the map. Do this such as the user can see the button only not the map (non noticable size).
  2.  In the onClick event of the button hide the button and set the map to your desired size.

It’ll give a feeling of seeing the map in another screen after clicking on the button. You can try using similar code below:

html

<a  id="showButton" style="font: 50px;"> next page</a>
<div id="googleMap" class="mapClass" style="width:1px;height:1px;"></div>

css

.hidden{ 
    display: none; 
}

js

$(document).ready(function(){
    $("#showButton").click(function(){
		$("#googleMap").width(360).height(360);
		$('#showButton').addClass('hidden');
	});
});

Hope it helps.