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.
Related
I am attempting to show a google maps marker via satellite view and street view at the same time. However, the marker placed on street view seems to change location (be slightly offset) depending on where along the street you are looking at it. In the examples below, you can see in one angle the marker is successfully on the grass and the satellite view matches the street view. However, if I navigate down the road one step, the marker is now on the driveway, despite the satellite view indicating otherwise. The same marker is used for all examples.
Any thoughts?
Example: https://jsfiddle.net/6Lpgoex2/
const startPosition = new google.maps.LatLng(33.82444502161826, -84.32112795727612);
// Aerial view map with marker
var locationMap = new google.maps.Map(document.getElementById('location'), {
center: startPosition,
zoom: 21,
mapTypeId: 'satellite'
});
locationMap.setTilt(0)
var locationMarker = new google.maps.Marker({
position: startPosition,
map: locationMap
});
// Street view map with marker
var viewMap = new google.maps.Map(document.getElementById('view'), {
center: startPosition,
zoom: 14
});
var viewMarker = new google.maps.Marker({
position: startPosition,
map: viewMap,
});
// Update streetview to look at the marker
var panorama = viewMap.getStreetView();
const panoramaService = new google.maps.StreetViewService();
panorama.setVisible(true);
panoramaService.getPanoramaByLocation(startPosition, 100, function(streetViewPanoramaData, streetViewStatus) {
if (streetViewStatus == "OK") {
let heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, startPosition);
const position = streetViewPanoramaData.location.latLng;
panorama.setPosition(position)
panorama.setPov({
heading: heading,
pitch: 0
});
panorama.setZoom(1); // Fix bug to make marker visible https://issuetracker.google.com/issues/35830290
panorama.setVisible(true);
}
});
Note: An issue has been opened.
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/
Google Maps doesn't provide a way to break apart multiple markers that are at the same location. This can occur with a people or businesses at a multiple residency location such as an apartment building or professional services building. Depending at zoom level it can also occur at shopping malls, etc.
The way around that is to "spiderfy" them: when clicking on the first it breaks them out with a line to the location. This is done in Google Earth and George MacKerron wrote a package to do that for Google Maps. (https://github.com/jawj/OverlappingMarkerSpiderfier)
It can be integrated with markerclusterer, although it doesn't support marker clusterer's batch creation of markers.
My issue is that the application I'm working on wants to have specific icons for different types of activities. Spiderfier puts one of the markers on top. A person looking at the map has no way of knowing that there can be 10 or more other markers underneath the top marker.
Ideally, there would be a way to put a top marker that displays when there are multiple markers similar to the different icon in markercluster. It isn't a direct 1-to-1 since spiderfier also works when they are close but not exactly at the same location (default is 20 pixels) and markercluster has no provision for accessing multiple markers at the exact same location.
The ideal behavior would be have a special icon for spiders that broke into the spiderfied individual icons when clicked. Similar to markerclusterer, but without the zoom change and handling the same location. The special icon ideally would indicate how many other markers are at the spot, again like markerclusterer. The special icon could be hidden or become part of the spiderfied group.
Without some accommodation users would have no way of knowing multiple activities are at the location. They may even assume that the activity they want is not at that location because another activities marker is shown.
This is a plunker that has the problem: http://plnkr.co/edit/vimZNq?p=info
var markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < 100; ++i) {
var latLng = new google.maps.LatLng(Math.floor(Math.random() * 10) / 10 + 39,
Math.floor(Math.random() * 10) / 10 - 100);
var marker = new google.maps.Marker({
position: latLng,
title: "marker " + i + " pos: " + latLng,
maxZoom: 8,
map: map
});
marker.desc = marker.getTitle();
bounds.extend(latLng);
markers.push(marker);
oms.addMarker(marker);
}
map.fitBounds(bounds);
var markerCluster = new MarkerClusterer(map, markers);
Thanks for your help,
David
Here's how I got it to work. Where map is a Gmap instance and oms is an Overlapping Marker Spiderfier instance. We're also using Marker Clusterer on the initial zoom which buys us a break.
map.addListener('zoom_changed', function() {
map.addListenerOnce('idle', function() {
// change spiderable markers to plus sign markers
// we are lucky here in that initial map is completely clustered
// for there is no init listener in oms :(
// so we swap on the first zoom/idle
// and subsequently any other zoom/idle
var spidered = oms.markersNearAnyOtherMarker();
for (var i = 0; i < spidered.length; i ++) {
// this was set when we created the markers
url = spidered[i].icon.url;
// code to manipulate your spidered icon url
};
});
});
oms.addListener('unspiderfy', function(markers) {
var spidered = markers;
for (var i = 0; i < spidered.length; i ++) {
url = spidered[i].icon.url;
// change it back
};
});
oms.addListener('click', function(marker) {
// put the clicked-on marker on top
// when oms un-spiders
marker.zIndex=999;
// set infowindow, panning etc.
});
I managed to match the following Versions:
MarkerClusterer 2.0.13
OverlappingMarkerSpiderfier 3.27
On every creation of a new Marker, i store the initialIconUrl in the Marker Object
var marker = new google.maps.Marker({
position: //some position
});
marker.setIcon(iconUrl);
marker.initialIconUrl = iconUrl;
When declaring the OverlappingMarkerSpiderfier, set the nearbyDistance to 0.001 (or some other very small value).
this.oms = new OverlappingMarkerSpiderfier(this.map, {
markersWontMove: true,
markersWontHide: true,
nearbyDistance: 0.001 //This will only spiderfy the Markers if they have the exact same position
});
Then, we need a listener on the maps 'idle' Event, to format the Markers manually.
I needed this because my SPIDERFIABLE Marker wouldn't show correctly on the first step, when transferring from the Clustered Marker to the seperate Markers.
var me = this;
google.maps.event.addListener(this.map, 'idle', function () {
me.oms.formatMarkers();
});
Listen to the oms 'format' Event and set the iconURL for Markers that are SPIDERFIABLE.
If the Marker is not spiderfiable, reset the Icon to the initial Url.
var spiderfiableIconUrl = //Whatever you need
this.oms.addListener('format', function (marker, status) {
var iconURL = status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE
? spiderfiableIconUrl :
marker.initialIconUrl;
marker.setIcon(iconURL);
});
Hope this helps.
Some methods seems to be interesting like markersNearAnyOtherMarker but I cannot get it work.
An interesting way could be to use spiderfy and unspiderfy events and change marker when it's fired
overlappingMarkers = new OverlappingMarkerSpiderfier(map, overlapOptions);
overlappingMarkers.addListener('spiderfy', function (markers) {
markers.forEach(function (marker) {
marker.setLabel('*');
marker.setIcon(myNormalIcon);
})
})
overlappingMarkers.addListener('unspiderfy', function (markers) {
markers.forEach(function (marker) {
marker.setLabel(''+markers.length);
marker.setIcon(myOverlapIcon);
})
})
Unfortunatly, the unspiderfy event isn't fired until we open then close the overlap marker. If I find a conclusion to this solution I will update this post.
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.
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!