Forum | Appery.io

Posted: **Tue Oct 01, 2013 1:12 pm**

Hello,

I want to remove Google Map elements and gestures such as incresing/decreasing zoom level button, changing street view to satellite and sliding the map etc. from my app screen

disableDefaultUI : true,
disableDoubleClickZoom : true,
draggable : false,
keyboardShortcuts : false,
mapTypeControl : false,
mapMaker : false,
overviewMapControl : false,
panControl : false,
rotateControl : false,
scaleControl : false,
scrollwheel : false,
streetViewControl : false,
zoomControl : false,

The options above are the options that I want to use in my application. I both tried to change the options from the original js and creating new map with these options but I couldn't succeeded.

Thanks in advance

Posted: **Tue Oct 01, 2013 3:14 pm**

Please check and refer to Google Maps API how to do this. Appery.io uses the standard Google Maps component.

Posted: **Wed Oct 02, 2013 9:57 am**

pre<code>
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

function initialize()
{
var mapProp = {
center: myCenter,
zoom:5,
showLocationMarker : false,
disableDefaultUI : true,
disableDoubleClickZoom : true,
draggable : false,
keyboardShortcuts : false,
mapTypeControl : false,
mapMaker : false,
overviewMapControl : false,
panControl : false,
rotateControl : false,
scaleControl : false,
scrollwheel : false,
streetViewControl : false,
zoomControl : false,
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>
</html>
/pre

for example this is orginal html code with options. It works normaly, however when i use this options in appery it doesn't work.

I also tried map.setOptions metod after instantiating map. it doesn't work either.

Posted: **Wed Oct 02, 2013 1:57 pm**

Hello! Sorry for delay. Could you clarify please where did you add this code and what exactly doesn't work?

Posted: **Wed Oct 02, 2013 2:15 pm**

I want to remove Google Map UI elements and gestures. I just need users' current place as an image. User must not zoom_in, zoom_out or drag map etc.

I try two diffrent things :

1) editing source html (mainPage.html in my project) with new google map options like :

pre<code>
$("[name = 'map']").wrap("<div/>");
$("[name = 'map']").parent().css("margin-left", $("[name = 'map']").css("margin-left"));
$("[name = 'map']").parent().css("margin-right", $("[name = 'map']").css("margin-right"));
$("[name = 'map']").css("margin-left", '0');
$("[name = 'map']").css("margin-right", '0');

Code: Select all

     var map_options = { 
         markerSourceName: "map_markers", 
         latitude: "", 
         longitude: "", 
         address: "", 
         zoom: 20, 
         showLocationMarker: false, 
         disableDefaultUI : true, 
      disableDoubleClickZoom : true, 
         draggable : false, 
         keyboardShortcuts : false, 
         mapTypeControl : false, 
         mapMaker : false, 
         overviewMapControl : false, 
         panControl : false, 
         rotateControl : false, 
         scaleControl : false, 
         scrollwheel : false, 
         streetViewControl : false, 
         zoomControl : false, 
  mapTypeId: google&#46;maps&#46;MapTypeId&#46;ROADMAP 
     } 

     Appery&#46;__registerComponent('map', new Appery&#46;TiggziMapComponent("map", map_options)); 
     $("[name='map_markers'] [apperytype='marker']")&#46;attr("reRender", "map"); 
     $("[name='map']")&#46;closest("[data-role='page']")&#46;bind({ 
         pageshow: function() { 
             if (Appery('map') != undefined) { 
                 Appery('map')&#46;refresh(); 
             } 
         } 
     });

/pre

2) adding buton and click event js like:

pre<code>

var map = Appery('map');
map.setOptions({ disableDefaultUI : true, disableDoubleClickZoom : true, draggable : false, keyboardShortcuts : false, mapTypeControl : false, mapMaker : false, overviewMapControl : false, panControl : false, rotateControl : false, scaleControl : false, scrollwheel : false, streetViewControl : false, zoomControl : false, });
map.refresh();

/pre

Both of these failed. Google map UI buttons can be removed. Gestures still working; zooming map.

Posted: **Wed Oct 02, 2013 5:16 pm**

HI, perhaps it's better to use Static Maps. Please take a look here https://developers.google.com/maps/do... and let us know result. If you still have any questions we'll try to help.

Forum | Appery.io

Removing Google Map elements and gestures from the screen

Removing Google Map elements and gestures from the screen

Removing Google Map elements and gestures from the screen

Removing Google Map elements and gestures from the screen

Removing Google Map elements and gestures from the screen

Removing Google Map elements and gestures from the screen

Removing Google Map elements and gestures from the screen