I'm using Google Maps to set some markers. I have things setup so that when an item in a list is hovered on the marker will highlight.
This is done easy enough by keep a hash of the markers. So that when I hover over an item it just updates the icon in the marker.
this.markers[hoverItem.id].setIcon('/img/map/active-marker.png');
This works just fine. However I'm also using the marker-clusterer-plus plugin with Google Maps. The problem I'm having is to highlight the cluster icon if the marker is inside.
I can't find away to access the cluster object of the marker. Is there anyway to access or set it somehow?
Looking at the code...:
...you'd probably need to call MarkerClusterer.getClusters to get all the clusters.
Then loop through them, perhaps then calling Cluster.getMarkers and checking if your marker is in each cluster's array of markers.
Cluster.isMarkerInClusterBounds and Cluster.isMarkerAlreadyAdded_ might also be useful.
Related
How can we test the display of marker/ markers on Google map using Cypress.io?
I have no idea what method to use to find a marker displayed on Google map.
describe('Display of marker on Google map', function(){
it.only('Check the display of marker on Google map', function(){
cy.visit('https://www.google.co.nz/maps/#-36.9139788,174.8740846,15z?hl=en')
cy.get('#searchboxinput').type('gold coast')
//don't know how to select Gold Coast from the populated search items
//How to find a marker displayed on Google Map ?
})
})
If markers are created with optimized: false option, then you can check if they are in DOM by just using cy.get(). That way you could check how many markers are displayed but it could be problematic if you would like to check if a particular marker is drawn as you have no controll over marker class.
There is dirty workaround for this problem - check for DOM element by icon url which is totally fine for one marker but dirty when having multiple markers with the same icon. Then you would need to add different get param for every marker icon url (like myicon.png?num=1).
Have in mind that then, most probably your browser won't be able to download icon just once but multiple times. Another drawback is that optimized: false flag will make your map slow for big amount of markers.
If optimized: true was used, then markers are drawn on canvas (no markers in DOM) and you will need to do visual testing, which I recommend, using one of the cypress plugin https://docs.cypress.io/guides/tooling/visual-testing
I am creating a webapp and want my users to be able to click a marker on the map and grab the address from the small window it brings up. These are the markers that are already built into the map, not ones that I have added, like so:
http://i.stack.imgur.com/cPVOv.png
I keep finding things for markers that you have added. I do not know how to access these markers. Presumably I want to do this for the onclick event of markers and be able to grab the information somehow. But I have no idea how to do anything with these markers.
Thanks for the help.
I am able to display a Google Maps map on a web site and load hundreds of markers for the current map area and display them. The problem is how to behave when the map is zoomed in/out or is moved, so the map area changes.
There is a part of the map that is the same than before, and so are the markers in it. But there is a part of the map that is new and new markers should be added.
Right now I am doing the simplest solution, clearing all markers, retrieving markers for the current map area and add them. This produces a flickery effect on the markers (obviously) due to clear and add immediately after.
What is a efficient way to deal with this situation?
Is there a way to check if a marker has already been added to the map?
You can use a marker cluster or a clustering algorithm to group marker that are close together when you zoom out and ungroup them when you zoom in. It can significantly reduce the database query time and the map drawing. A good solution is a kd-tree.
To check if a marker has been added to the map, call the getMap method of the marker and if it returns a map object, it has been added.
To check if a marker is in the visible area of the map, you can call the getBounds method on the map which returns a LatLngBounds. Then call the contains method of the returned LatLngBounds passing the coordinates of the marker.
Hope this helps
I have a store locator that displays stores as markers on the map and lists them in a sidebar. There are ~600 stores and they are all loaded at once on the page load via AJAX. So I have access to all them in an array at all times. Now, the functionality I want is that when the user moves/zooms around in the viewport, I get the bounds of the current area being displayed and filter the results in the sidebar (the array of locations, each location has a lat and long) based on whether or not they would be in that area being displayed. Then I would draw the markers of the relevant locations. Basically, whatever locations would be viewable in the viewport would also be listed in the sidebar, staying in sync.
Could someone point me in the right direction to implement this? Does this even sound like an efficient way of handling this functionality?
You need to write a handler for bounds_changed event (more documentation here)
google.maps.event.addListener(map, 'bounds_changed', function(){
// your logic here - map.getBounds() will give you the updated bounds
});
As for efficiency, loading everything at once is probably not the most scalable approach. What if you have 6000 stores next year or you add additional data for every store? A better approach is to pass the bounds back to the server using an AJAX call and only return stores that fall into the area.
You can attach moves/zooms event to the map and basically do a bound check to hide/show markers within the viewing bound. You can achieve this using LatLngBounds(sw?:LatLng, ne?:LatLng) and check the markers LatLng against the map's current bounds using getBounds();. Furthermore within LatLngBounds there's a method to check to see if the LatLtn is within Bounds contains(latLng:LatLng). So you would loop through your markers' LatLng and check against it.
Google Map API LatLngBounds
and
Google Map API Map
As far as the sidebar goes, if you have markers saved then you can just remove or hide the associated locations on the sidebar.
I am developing a Google Maps application and I've run into this problem. I need to remove all markers which are out of bounds from the map.
Is there any simple way of doing this, besides keeping an array and looking at the latlng of each marker?
I cannot use MarkerManager because I have way too many points. I don't want to use clearOverlays() because it would close any open marker.
Any help would be appreciated.
If you don't want to look at each marker individually then cluster them into some sets initially and calculate the bounds of the set.
You can then show or hide the sets depending on what is currently showing on the map (you can find the boundary of the map using GMap2.getBounds() ).
How many points are we talking about?
Update
A. About 65K.
I can see why you can't create 65K GMarkers when the page loads. That will take over 5 seconds.
I'd cluster them into groups of 200 ish and when the edge of the group gets within a 1/4 map width outside of the displayed edge then find, create markers and display the adjacent group. It it goes outside of 1/2 a map width of the outside edge then hide the group.
Other alternatives are to use a third party library such as
Cluster Marker - http://googlemapsapi.martinpearman.co.uk/articles.php?cat_id=1
Clusterer - http://www.acme.com/javascript/#Clusterer