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...
Related
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
in the current Version of Google Maps Api v3 (using latest 3.x) the option "enableCloseButton" for StreetView has no effect, the close button remains hidden as by default, while others like "fullscreenControl", "linksControl" etc. work as expected.
The corresponding documentation is here: https://developers.google.com/maps/documentation/javascript/examples/streetview-controls?hl=en
It can be tested with the JSFiddle provided on the same page.
Slightly changed code:
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('map'), {
position: {lat: 42.345573, lng: -71.098326},
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
linksControl: false,
panControl: false,
fullscreenControl: false,
enableCloseButton: true
});
}
https://jsfiddle.net/f0490gnp/
Setting "enableCloseButton" to "true" in the example has no effect, the "x" is not showing in the upper right corner.
Is this a known bug, is there any workaround for this, or am I missing something? Currently when dragging the 'pegman' onto the map it is not possible to switch back to map view.
Thanks for any hint.
(Update: fixed jsfiddle link)
The "close button" is the right arrow that appears to the left of the address (when enableCloseButton:true, but not when enableCloseButton:false. If clicked, the panorama turns grey in the fiddle.
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...
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)