How do we show Google Maps in Tizen Wearable Devices

Question

I am trying to show Google Maps on my Gear S3 Frontier, Tizen 4.0. I'm getting the following output:

I want the all these buttons (e.g. Satellite, Zoom-in and Zoom-out etc.) to be fit on the screen.

Here's my code so far:

 function initMap() {
    var currPosition = {
        lat: 33.6169854124275,
        lng: 73.0656100279796
    };
    var mapProperties = {
        // Start position
        center: currPosition,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var myMap = new google.maps.Map(document.getElementById("mapCanvas"), mapProperties);
    var marker = new google.maps.Marker({
        position: currPosition,
        map: myMap
    });        
}

Web Search showed my many ways to draw circles and polygons etc. but I couldn't find any way to fit the map to a circular screen

Answer 1

You can remove them with disableDefaultUI:true in the MapOptions

var mapProperties = {
    // Start position
    center: currPosition,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI:true
};

var myMap = new google.maps.Map(document.getElementById("mapCanvas"), mapProperties);

code snippet:

function initMap() {
  var currPosition = {
    lat: 33.6169854124275,
    lng: 73.0656100279796
  };
  var mapProperties = {
    // Start position
    center: currPosition,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true
  };

  var myMap = new google.maps.Map(document.getElementById("mapCanvas"), mapProperties);
  var marker = new google.maps.Marker({
    position: currPosition,
    map: myMap
  });
}

html,
body,
#mapCanvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="mapCanvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>