Menu
Sites
Language
How to use Google Maps on Gear S2?

Hi! I want to use Basic Google Map in my Gear S2 app, but it don't work. How can I fix this and launch Google Maps in app? Thank you! P.S. This code work perfectly in browser.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YES_I_DONT_FORGET_ABOUT_API&callback=initMap"
        async defer></script>
  </body>
</html>

 

List

Responses

7 Replies
Iqbal Hossain

Hi~

First of all, 
Have you added required feature and privilege for location api of tizen ? 

If not, add these in your config.xml, 

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

And follow these tutorial for more, 

https://developer.tizen.org/development/tutorials/web-application/w3chtml5supplementary-features/location/geolocation-api-specification

https://developer.tizen.org/development/guides/web-application/w3chtml5supplementary-features/location/geolocation-api-specification

Let me know if it help you or not. 

- Thanks

Umi Sonoda

Thank you for your reply!

I don't need geolaction, I want to display simple map.

So I also tried to add Internet connection in config.xml, but map still don't work.

Also I tried to use Here maps, but they still don't loading (this looks like my app don't want to connect to the internet).

What can I do? Thank you in advance!

My config.xml:

<?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/MapsExample" version="1.0.0" viewmodes="maximized">
    <tizen:application id="RYJgEaFEuw.MapsExample" package="RYJgEaFEuw" required_version="2.3"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
    <feature name="http://tizen.org/feature/network.internet"/>
    <feature name="http://tizen.org/feature/web.service"/>
    <feature name="http://tizen.org/feature/websetting"/>
    <icon src="icon.png"/>
    <name>MapsExample</name>
    <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:privilege name="http://tizen.org/privilege/websetting"/>
    <tizen:profile name="wearable"/>
</widget>

Here maps HTML:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <link rel="stylesheet" type="text/css"
    href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
  <script type="text/javascript" charset="UTF-8"
    src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
  <script type="text/javascript" charset="UTF-8"
    src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
  <script type="text/javascript" charset="UTF-8"
    src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
  <script type="text/javascript" charset="UTF-8"
    src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>

</head>
<body>
  <div id="map" style="width: 100%; height: 400px; background: grey" />
  <script  type="text/javascript" charset="UTF-8" >
    
/**
 * Moves the map to display over Berlin
 *
 * @param  {H.Map} map      A HERE Map instance within the application
 */
function moveMapToBerlin(map){
  map.setCenter({lat:52.5159, lng:13.3777});
  map.setZoom(14);
}





/**
 * Boilerplate map initialization code starts below:
 */

//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
  app_id: 'DemoAppId01082013GAL',
  app_code: 'AJKnXv84fjrb0KIHawS0Tg',
  useCIT: true,
  useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();

//Step 2: initialize a map  - not specificing a location will give a whole world view.
var map = new H.Map(document.getElementById('map'),
  defaultLayers.normal.map);

//Step 3: make the map interactive
// MapEvents enables the event system
// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));

// Create the default UI components
var ui = H.ui.UI.createDefault(map, defaultLayers);

// Now use the map as required...
moveMapToBerlin(map);
  </script>
</body>
</html>
John Ixion

Most maps are car-centric: for wearables, I would recommend OSM: https://switch2osm.org/

John Ixion

forgot to add the link to OSM: http://www.openstreetmap.org/

Umi Sonoda

Thank you for your help, but this maps also not working via emulator, but work very well when I open maps in browser (tested in Chrome, Opera and Edge). 

Still can't run maps on Gear S2. Oh, I also tryed to run this maps on Tizen Mobile Emulator... And yes, maps also work on mobile platform very vell.

Help me, please, waiting for your reply. Thank you in advance! 

Umi Sonoda

Thank you all for your help, It work!

It's very funny, because in config.xml you need to add this few lines:

<access subdomains="true" origin="http://maps.googleapis.com/maps/api/js"/>
<access subdomains="true" origin="http://maps.googleapis.com"/>
<access subdomains="true" origin="...//maps.googleapis.com/maps/api/js"/>
<access subdomains="true" origin="...//maps.googleapis.com"/>
<access subdomains="true" origin="http://googleapis.com"/>
<access subdomains="true" origin="http://googleapis.com"/>

 And it work! Of course, you also need to add internet permission:).

This is Google Maps for Gear S2 (I found this code in Code Snippets category):

<!DOCTYPE html>
<html>
<head>
<style>
* {
margin:0;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load of GoogleMaps API -->
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  var mapProp = {
    // Start position
    center:new google.maps.LatLng(52.217784,21.008128),
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:320px;height:510px;"></div>
</body>
</html>

Happy developing! Thank you very much again!:3

mark taylor

great post


trainingincoimbatore.in/web-designing-training-in-coimbatore.html
trainingincoimbatore.in/oracle-training-in-coimbatore.html
trainingincoimbatore.in/java-training-in-coimbatore.html
trainingincoimbatore.in/dot-net-training-in-coimbatore.html
trainingincoimbatore.in/hadoop-training-in-coimbatore.html
trainingincoimbatore.in/informatica-training-in-coimbatore.html
trainingincoimbatore.in/python-training-in-coimbatore.html
trainingincoimbatore.in/networking-training-in-coimbatore.html
trainingincoimbatore.in/unix-training-in-coimbatore.html
trainingincoimbatore.in/c-and-c-plus-plus-training-in-coimbatore.html
trainingincoimbatore.in/ios-training-in-coimbatore.html
trainingincoimbatore.in/andriod-training-in-coimbatore.html