The google map api has a very weird behavior. The user can scroll out of the map at the top and bottom. On left and right there are endless copes of the map on the left and right.
[
This looks exactly the same on all maps of the documentation. Can this be disabled?
You can restrict how far a user can zoom out which may solve your problem:
// This is the minimum zoom level that we'll allow
var minZoomLevel = 1;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: minZoomLevel,
center: new google.maps.LatLng(38.50, -90.50),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Limit the zoom level
google.maps.event.addListener(map, 'zoom_changed', function () {
if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
});
Using this will stop the user from zooming so far they see multiple maps
http://jsfiddle.net/9d4jy4ye/1107/
Related
I have created marker clusters for marker
var marker = new google.maps.Marker({
position: new google.maps.LatLng(propertiesData[i][1], propertiesData[i][2]),
map: map
....
});
var myOptions = {
boxStyle: {
marginTop:-60+'px'
}
};
markerCluster = new MarkerClusterer(map, markers,markerClustererOptions);
Till this I am able to work and show cluster.
Now I want to apply a check on zoom changed event where I need to get all visible clusters at that zoom level.
google.maps.event.addListener(map, "zoom_changed", function() {
// NEED TO GET ALL VISIBLE CLUSTERS HERE
});
I think you can do that with the Max zoom level setting in the MarkerClusterer.
As it is shown in this demo, if you set the Max zoom level to 7, then when user zoom in to zoom level 8, MarkerClusterer would stop clustering the markers.
I'm trying to get the directionsPanel to show in a new window, but i can't seem to figure it out.
This is the function that sets the panel to a (hidden) div called 'directions-panel' in my HTML.
var directionsDisplay
var directionsService = new google.maps.DirectionsService();
function initialize() {
var positie = new google.maps.LatLng(51.25584,5.68196);
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 10,
center: positie,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
}
The code works fine but I want it to open in a new window. Sort off like a pop-up I guess. Anyone know how to do this?
The basic workflow would be:
//open a window
panel=window.open('about:blank','panel','width=200,height=300,scrollbars=yes');
//create a document inside te window
panel.document.open();
panel.document.write('<body/>');
panel.document.close();
//set the panel
directionsDisplay.setPanel(panel.document.body);
//bring window into front
panel.focus();
Problems:
depending on your application the popup-blocker of the browser may block this popup
in IE it doesn't work at all, because it isn't allowed to move nodes between documents(there are methods to achieve it, but they are not implemented by the API as it seems)
I would suggest to use something like a draggable Lightbox or a (jQuery) dialog to show the panel
Not sure if this is possible but I have set my map up with custom styles and marker and I want to ensure the map shows at this level but with London in view. To do so I centred the map at a different location to my marker. I would like the map to zoom to my location if possible instead of the centre.
var myLatlng = new google.maps.LatLng('51.4525368','0.2481994');
var mapOptions = {
center: new google.maps.LatLng('51.4600368','0.0781994'),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 11,
mapTypeControl: false,
scrollwheel:false
};
Also if anybody can tell me why my info window is displaying all funky I would appreciate too.
It has been tough to understand your question but if I got you right, you are trying to fit both center of London and your location on the map without setting a center on some position on the map. If that's correct, then you need google.maps.LatLngBounds() to get it done.
var bounds= new google.maps.LatLngBounds();
var London= new google.maps.LatLng(//London values);
var myLatLng = new google.maps.LatLng(//your values);
bounds.extend(London);
bounds.extend(myLatLng);
map.fitBounds(bounds);
Check if this serves your purpose.
Google Maps javascript API question - Map object recenters after applying KML layer. How do I prevent this?
I created a simple page with a map. When I apply a simple polygon KML, it recenters and zooms the map. Any ideas?
var myOptions = {
center: new google.maps.LatLng(27, -97),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml');
buildings.setMap(map);
//i tried this to recenter and zoom, but no dice.
var posn = new google.maps.LatLng(27, -97);
map.setCenter(posn);
map.setZoom(17);
Sounds like you need the preserveViewport option. From the documentation:
By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
Pass it a KMLLayerOptions object through the constructor:
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml',{preserveViewport:true});
I am putting together a clients contact us page and I need to have two Google maps on it.
The first map is a small version of the second. The second map opens up in a lightbox activated by a link beneath the first.
The issue is, the large map goes wrong when I attempt to open it. I typically get one tile in the top left hand corner and nothing more.
You can see for yourself at http://test2omniforce.co.uk/node/8. It's some kind of conflict between the two because if I remove the small map, the larger map works fine.
I am trying to determine why this happens, and how I can fix it.
OS: Here's my code for the large map (the small map code is exactly the same except instead of map_canvas, it uses map_canvas2).
var myLatlng = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'we are right here ...'
});
var myLatlng2 = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
Inspired by #rggardner's suggestion, I made the small map a static map. I had no idea those existed before.
That removes the conflict and the large map now plays nice.
#rggardner, thank you very much!