Removing Google Map elements and gestures from the screen

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

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.

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.

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?

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.

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.