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)
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
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 let OpenLayers display a KML file that was retrieved from a server.
For some reason this does not work.
Similar questions have been asked, but I could not find a working example.
What I did was improve one of the examples in the OpenLayers distribution: kml-track.js
I improved it with what I found. This is what it looks like. I feel like I'm missing something obvious.
Any pointers are welcome
var map ;
function init() {
var mercator = new OpenLayers.Projection("EPSG:900913");
var geographic = new OpenLayers.Projection("EPSG:4326");
//note that I have host equal to location// //Math.Random will stop caching//
var mykmlurl = 'http://myserver/kml-track.kml';
map = new OpenLayers.Map({
div: "map",
projection: mercator,
layers: [
new OpenLayers.Layer.OSM(),
//Defiine your KML layer//
new OpenLayers.Layer.Vector("This Is My KML Layer", {
//Set your projection and strategies//
projection: geographic,
strategies: [new OpenLayers.Strategy.Fixed()],
//set the protocol with a url//
protocol: new OpenLayers.Protocol.HTTP({
//set the url to your variable//
url: mykmlurl,
//format this layer as KML//
format: new OpenLayers.Format.KML({
//maxDepth is how deep it will follow network links//
maxDepth: 1,
//extract styles from the KML Layer//
extractStyles: true,
//extract attributes from the KML Layer//
extractAttributes: true
})
}),
styleMap: new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
graphicName: "circle",
pointRadius: 2,
fillOpacity: 0.5,
fillColor: "#ffcc66",
strokeColor: "#666633",
strokeWidth: 1
})
})
})
],
center: new OpenLayers.LonLat(-93.2735, 44.8349).transform(geographic, mercator),
zoom: 8
});
//function called// //timer// //layer to refresh//
window.setInterval(UpdateKmlLayer, 5000, MyKmlLayer);
}
function UpdateKmlLayer(layer) {
//setting loaded to false unloads the layer//
layer.loaded = false;
//setting visibility to true forces a reload of the layer//
layer.setVisibility(true);
//the refresh will force it to get the new KML data//
layer.refresh({ force: true, params: { 'key': Math.random()} });
}
This is an example of how to display a KML layer in OpenLayers which might help you:
http://openlayers.org/dev/examples/kml-layer.html
Are you getting any errors when opening your page - or does it run ok but nothing appear? If you're not getting any errors then it might indicate an issue with how your projections are set up (i.e. your features might not appear where you expect them to)