We have zoom buttons inside a map and I can't manage to fix'em -> When I resize the window, those buttons are not following the right way while the layer switcher button is doing well.
I already tried providing the right css but none of I tried seems to work, and I've done a lot of things with css.
In fact, when I reduce the window size, the buttons are moving the right way, but not enough and consequently they are finally hidden.
Try this
scrollwheel: false,
This option is used for disable zoom on mouse.
scaleControl: false,
This option is used for disable zoom by scale.
draggable: false,
This option is used for disabling drag.
mapTypeControl: false,
This option will hide map type.
Put them as following:
var myOptions = {
center: myLatlng,
zoom: 15,
mapTypeControl: false,
draggable: false,
scaleControl: false,
scrollwheel: false,
navigationControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
https://developers.google.com/maps/documentation/javascript/controls
Related
I can shift the Map/Satellite button but can not resize it. This runs ok but no affect on the buttons! Any help please?
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
buttonSize: google.maps.Point(80,40),
position: google.maps.ControlPosition.TOP_CENTER
},
There is no buttonSize option for MapTypeControlOptions
If you want to modify those buttons, you need to create your own custom controls that change the mapType and hide the API version.
I got a reactive google map with markers and I want to use it on my home page. But on my small laptop I see just the world, no duplicates, but on a bigger screen the map repeats 3 times.
How can I prevent this?
Update: Basically, how do I lock the zoom, so if I zoom then page in and out the map looks the same (relatively)
I'm using: https://atmospherejs.com/dburles/google-maps
My Current HTML:
<template name="map">
<div class="map-container">
{{> googleMap name="map" options=mapOptions}}
</div>
</template>
My Current JS:
mapOptions: function() {
if (GoogleMaps.loaded()) {
return {
center: new google.maps.LatLng(5, 0),
mapTypeControl: false,
scaleControl: false,
navigationControl: false,
scrollwheel: false,
disableDefaultUI: true,
draggable: false,
zoom: 2,
maxZoom: 2,
minZoom: 2,
scaleControl: false
};
}
}
Sounds like OP is too far zoomed out on large screens (mebbe 1200px+?), so map zoom level probably at say 2 or so.
sounds like what you want is to have zoom level change with screen size...;
ie. if phone: zoom = 2, on iMac: zoom = 5 or something... IMO i would try to detect size then pass an if statement to the zoom option....
just trying to hopefully clarify. i've been working around by zooming in on a click event, per marker, and adding a small 'button' to zoom back out...
Okay, I'm feeling fairly dense for not being able to figure the last part of this out, so hopefully somebody can show me the last piece of the puzzle. I have one example of a polygon that always needs to be visible and another example that uses map.fitBounds() with the same area defined so it IS always visible. The last step is displaying that polygon overlaid on the map.fitBounds() map.
var southWest = new google.maps.LatLng(41.49623534616764, -88.209228515625);
var northEast = new google.maps.LatLng(42.64810165693524, -86.4019775390625);
var bounds = new google.maps.LatLngBounds(southWest,northEast);
map.fitBounds(bounds);
Essentially, the code above needs to either replace or supplement the center functionality, which is what I don't get:
var mapOptions = {
zoom: 8,
zoomControl: true,
scaleControl: true,
scrollwheel: false,
disableDoubleClickZoom: false,
mapTypeControl: true,
navigationControl: true,
streetViewControl: true,
center: new google.maps.LatLng(41.845644,-87.766685),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var serviceAreaSealMaster;
I recreated it on codepen: http://codepen.io/Realto619/pen/EbmJi
Thanks in advance!
As I mentioned in my comment, geocodezip's confirmation that I was on the right track and a fresh set of eyes solved the problem and I posted the solution in a forked codepen http://codepen.io/Realto619/pen/Dirfn
(Nevermind, the following is no longer an issue:)
PS: In case anyone looks at that and wonders why it doesn't appear to be resizing correctly in a few instances, I'm pretty sure that its the boundary that I defined not being as accurate as it needs to be. I'll be fixing that next, but I didn't want to confuse anyone that might see it before then...
I have a basic Google Map, with a drawingManager, like this:
var mapOptions = {
center: centroid,
zoom: 14,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.ROADMAP]
}
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYGON,
drawingControl: false,
polygonOptions: {
clickable: true,
draggable: true,
editable: true,
fillColor: '#ffff00',
fillOpacity: 0.8,
strokeWeight: 5
}
});
drawingManager.setMap(map);
Drawing polygons on the map works like a charm, except for one little thing. I have to explicitly close my polygon, either by clicking the first point, or by double clicking somewhere (or at least, I can't find another way). But I would like for my polygon to be closed at all times while drawing, a bit like this:
http://www.birdtheme.org/useful/v3tool.html
(select 'polygon' in the first select box next to the title).
Now I know this example doesn't use the drawingManager, but creates the polygon by hand, but I am wondering if something similar is possible using the drawingManager. I'm afraid there isn't, since I can't seem to find any reference to it in the manual, but that also kind of surprised about that, since I would think it is something that more people would like to have.
You could just make it yourself; you can easily register the click events.
google.maps.event.addListener(map, 'click', addLatLng);
poly = new google.maps.POLYGON(polyOptions);
poly.setMap(map);
function addLatLng(event) {
path = poly.getPath();
path.push(event.latLng);
}
Because you know the latlng of every point in you're polygon; you can just draw it.
You'll have to redraw it every time a new point is added.
I'm trying to make a page where people can draw a line over a fixed region so I want to stop the map from being panned,dragged, zoomed or moved in anyway. I've set everything I can find to false and it works fine in normal viewing mode, but when the user starts drawing using the Drawing Manager the scroll-to-zoom comes back as well as the click-to-drag. My first thought is that this is a bug/oversight in Google's code, but I'm hoping someone has a work around.
var myOptions = {
center: new google.maps.LatLng(-25,177.5),
zoom: 3,
mapTypeId: google.maps.MapTypeId.SATELLITE,
streetViewControl : false,
zoomControl: false,
disableDoubleClickZoom: true,
draggable: false,
keyboardShortcuts : false,
navigationControl : false,
scaleControl : false,
scrollwheel : false,
streetViewControl : false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
update: This is the Drawing Manager code
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: google.maps.drawing.OverlayType.POLYLINE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [google.maps.drawing.OverlayType.POLYLINE]
},
polylineOptions: {
strokeWeight: 2,
strokeColor: '#ee9900',
clickable: false,
zIndex: 1,
editable: true
}
});
drawingManager.setMap(map);
I suggest you add this to the Google Maps API issue tracker
http://code.google.com/p/gmaps-api-issues/
This indeed does look like an issue with API - basically a usecase that Google didnt consider.
BUT, I highly recommend you setup a page as a demo, and include the link in the issue report.
I'm taking you at your word that this is happening, but an issue carries x100 times the weight, if there is a very easy way for others to verify (ie see it with their own eyes).
(yes, people can try and take your code to replicate it, but 1. its a lot of work, and 2. there is a high chance of inadvertantly doing something differnt and thereby side-stepping the issue)