We Keep Coding

GoogleMaps: disable dragging but enable wheel mouse zooming

I'm trying to obtain the following behaviour in Google Maps V3:
Map Dragging disabled, so the map center won't be missing while the user uses the mouse
Map Zooming enabled, so the map details can be adjusted upon customer needs using the wheelmouse
To obtain this I use the following settings:
map = new google.maps.Map(document.getElementById('map_canvas'), {
center : new google.maps.LatLng(41, 14),
zoom : 13,
mapTypeId : google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
draggable: false,
scrollwheel: true,
streetViewControl: true,
fullscreenControl: true,
scaleControl: true,
rotateControl: true,
overviewMapControl: true,
overviewMapControlOptions: {opened: true},
gestureHandling: 'greedy'
});
But doesn't work, while if I set draggable: true, then the scrollwheel feature will be enabled as well. In other words it looks like to have scrollwheel: true we must also set draggable:true otherwise the setting will be ignored. Any clue?

Google maps api v3 hide gray building overlays

I am making a map that can display several trains live driving around inside the station. However there is a grayed out building on top of the station that makes the tracks almost impossible to see. However when I look at google maps itself those buildings don't even appear. Is there a setting in the map options that I can implement to get rid of those buildings?
These are my existing map options:
var mapOptions = {
zoom: 17,
center: markerBounds.getCenter(),
disableDoubleClickZoom: true,
mapTypeControl: false,
disableDefaultUI: true,
scrollwheel: false,
draggable: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
My map:
Google maps:
Thanks in advance.

I found out how to fix the issue. Simply change
mapTypeId: google.maps.MapTypeId.ROADMAP
to
mapTypeId: google.maps.MapTypeId.TERRAIN

Can't see drawing polygon in Google maps v3 till move the map center

I have following Demo where I try to draw Polygon by using Google maps v3.
But when I try to draw Polygon its invisible till I change map center.
Do I need repaint it somehow?
Here is the code:
var map2;
function linesmap(){
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(51.425, -0.955),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// map2 = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var options = {
zoom: 14,
center: new google.maps.LatLng(51.425, -0.955),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
scrollwheel: true,
draggable: true,
rotateControl: false,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
zoomControl: true,
disableDoubleClickZoom: false
};
map2 = new google.maps.Map(document.getElementById("map_canvas"), options);
buildDrawManager();
}
var buildDrawManager = function(){
console.log('buildDrawManager');
// Creates a drawing manager attached to the map that allows the user to draw
// markers, lines, and shapes.
drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
polygonOptions: {
fillColor: '#1E90FF',
strokeWeight: 0,
fillOpacity: 0.3,
editable: true
},
map: map2
});
google.maps.event.addListener(drawingManager, 'polygoncomplete', function(polygon) { });
}
[EDIT]
It happens on Chrome version 32.0.1700.76

#fessy Your fix doesn't seem to be working for me. I was able to get it working by touching the zoom level. You don't event notice it happen.
document.getElementById("map_canvas").onclick = function(){
if(drawingManager.getDrawingMode() !== google.maps.drawing.OverlayType.HAND){
map2.setZoom(map2.getZoom() + 1);
map2.setZoom(map2.getZoom() - 1);
}
};
http://plnkr.co/edit/TP8TIjvdRHHOyg6NKQWc?p=preview

Thanks to #geocodezip that posted workaround to solve this issue.
Here is a fix:
Changed version
https://maps.googleapis.com/maps/api/js?sensor=false&v=3&libraries=geometry,visualization,drawing
to exp.:
https://maps.googleapis.com/maps/api/js?sensor=false&v=3.exp&libraries=geometry,visualization,drawing
and Plunker with fix

Google maps remove default man icon

i am using google maps with my project as you can see here ( Demo )
in left top you can see man icon and zoom
i want to remove man icon and set zoom left-top
what should i do? i am using this library js library and you can see other library in (view) source demo link [3]

This should remove the street view (the man) and the pan control:
var mapOptions = {
center: mapCenter,
zoom: 10,
panControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
Example of using Google Maps options:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

I hope you work
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
disableDefaultUI: true, //disables controls
zoomControl: true, //zoom control enables
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE, //enables the dimension
position: google.maps.ControlPosition.TOP_RIGHT //position enables
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}

to disable the man icon, you can set the streetViewControl into false in your map options.
streetViewControl: false

The above answers do not meet your question. Try this caused its work for me to disable the people icon.
mapTypeControl:false,
scaleControl:false,
streetViewControl:false,
overviewMapControl:false,
rotateControl:false,
if you want to remove all then use this :
mapTypeControl: false,
disableDefaultUI: true,
if you want to style the map color, try this :
var mapStyles = [ {"featureType":"road","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":20}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape.man_made","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"transit","elementType":"all","stylers":[{"saturation":-100},{"visibility":"on"},{"lightness":10}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.highway","elementType":"labels","stylers":[{"visibility":"simplified"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.arterial","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":50}]},{"featureType":"water","elementType":"all","stylers":[{"hue":"#3b5998"},{"saturation":30},{"lightness":49}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"hue":"#3b5998"}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"hue":"#3b5998"}]}, {featureType:'road.highway',elementType:'all',stylers:[{hue:'#3b5998'},{saturation:-92},{lightness:60},{visibility:'on'}]}, {featureType:'landscape.natural',elementType:'all',stylers:[{hue:'#3b5998'},{saturation:-71},{lightness:-18},{visibility:'on'}]}, {featureType:'poi',elementType:'all',stylers:[{hue:'#3b5998'},{saturation:-70},{lightness:20},{visibility:'on'}]} ];
change color attribute # as you like, then put this style in your map :
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 9, // optional based on your requirement
styles: mapStyles
If you want to style the icons, then put this :
marker = new google.maps.Marker({
icon: "/images/icon/marker123.png", // based on your dir file
position: point, // based on your srcipt selection
map: map
Hope this useful for others. :)

Can gmaps4rails return an image-like map?

I currently am using gmaps4ails and have an interactive map returned. Is there a way to get a more static like image instead?
I've tried modifying the following code but for some reason on the phone pinch and zoom doesn't work
if MODETECT.device.phone
#map_options =
disableDefaultUI: true #false has the street view capability
disableDoubleClickZoom: false
type: "ROADMAP" # HYBRID, ROADMAP, SATELLITE, TERRAIN
draggable: false # don't allow to drag map
scrollwheel: true
zoomControl: true
else
#map_options =
disableDefaultUI: true #false has the street view capability
disableDoubleClickZoom: false
type: "ROADMAP" # HYBRID, ROADMAP, SATELLITE, TERRAIN
draggable: true # don't allow to drag map
scrollwheel: false #can't use the scroll whell to zoom
zoomControl: true #widget that allows control zoom without pinch
...
createMap : ->
defaultOptions =
maxZoom: #map_options.maxZoom
minZoom: #map_options.minZoom
zoom: #map_options.zoom
center: #createLatLng(#map_options.center_latitude, #map_options.center_longitude)
mapTypeId: google.maps.MapTypeId[#map_options.type]
mapTypeControl: #map_options.mapTypeControl
disableDefaultUI: #map_options.disableDefaultUI
disableDoubleClickZoom: #map_options.disableDoubleClickZoom
draggable: #map_options.draggable
scrollwheel: #map_options.scrollwheel
zoomControl: #map_options.zoomControl
It seems to work in the sense for draggable, but scrollwheel and zoomControl on the phone isn't working.