I have a list of google maps markers as html links next to a google map. I have the function that is triggered when I click on the link. Marker ID is passed to this function.
My question is - when I have 100 markers, I want somehow IDENTIFY the clicked marker on the map. Some sort of ripple effect that would go away from the marker.
please advice what are my possible options so I could develop appropriate solution
Example: 100 markers already on the map. I also have 100 names on the left. Each name corresponds to each marker. When I click the name, I want the marker that belongs to that name somehow "blink" or identify itself in some other way among other markers.
before the markers was pin on the map
you need to set a global markers variable
var gb.markers = [];
while you create each marker need to push into global marker array
marker = new google.maps.Marker({
// other stuff
'id': marker.id
});
after you done with assign function to marker, push it into global var
gb.markers.push(marker);
make sure when you click on marker will get marker id
and loop the global markers or make marker array with id as index
A ripple effect would be quite complicated, possibly involving positioning of a 'GroundOverlay' object centered around the marker you wish to highlight.
If your goal is just to be able to highlight the marker, perhaps playing a simple animation using 'Marker.setAnimation(animationObject)'. You could perhaps using 'Animation.BOUNCE' to highlight the marker?
Related
I am trying to filter my markers in my Here maps. I managed to hide my Noisemarkers on filter, but the weight of my clusterMarkers are still the same as before.
I was wondering if there is a way in Here maps to get the new weight of clusters after hiding some markers.
My current code is the following for hiding markers:
var markerHidden = getCorrectMarker(df.dealersArray[dealerNumberHidden], arrayOfMarkers);
if (markerHidden) {
markerHidden.setVisibility(false);
}
Is there a way to update all clusters on the map with only visible markers or not?
Visibility of marker can be set to False only at the map level, however at cluster level, no method defined for limiting the visibility.
Please refer API reference documentation of clustering:
https://developer.here.com/documentation/maps/topics_api/h-clustering-intro.html
I have a map that has markers programmatically placed on it based on values in my database. When you click on a marker, it will go to a detail page for that location.
My problem is that when the map is sufficiently zoomed out, markers that are close enough to each other appear as a single marker, in effect hiding some of the markers. Is there a way to tell programmatically whether a marker is part of a group of markers or is hidden/covered up by other markers?
My intention is to do something like this for each dynamically generated marker:
marker.addListener('click', function() {
// if marker is not hiding any other markers
window.location.href = markerURL;
// else if it is hiding markers/is part of a group of markers
map.setZoom(15);
map.setCenter(marker.getPosition());
});
I have checked the Marker API documentation, but can't seem to find any useful methods. getClickable and getVisible always return true in my case, regardless of whether a marker is covered by another marker. Any suggestions? Thank you!
I ended up going with MarkerClusterer to solve my problem. I was hoping for a simpler solution, but this turned out to be pretty simple after all.
The only thing I needed to add to my existing marker-generating code was a list: var markers = [];, and then I called markers.push(marker); on all of my markers. The final step was to create a new MarkerClusterer object:
var markerCluster = new MarkerClusterer(map, markers, options);
And MarkerClusterer handles the rest more or less (the options parameter is optional, but I used it to set the path to my images and set the maximum zoom level). Now, in the situations where previously my markers were stacked on top of each other, making it impossible to see or click certain markers at certain zoom levels, I instead see a cluster with a number indicating the number of markers in that cluster. Clicking the cluster icon will further zoom in, revealing my markers.
All of this was done following the simple usage example on their github page, but they have pretty good documentation too. Most of my time getting this to work right was actually spent styling the cluster icons to match my site's color scheme...
I have many markers.
On the left I have list of marker-abstractions of actual markers on the google map.
I decided to use polylines
var flightPlanCoordinates = [
new google.maps.LatLng(near_cursor_lat, near_cursor_lon),
new google.maps.LatLng(marker_lat, marker_lon)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
the idea is that user points his mouse on the marker-abstraction box on the left, and then he shown the line which goes from marker-abstraction to actual marker on the map. I already have everything except of the STARTING POINT(red dots on the image)
How do I find starting lat/long which is located next to the mouse pointer, when the mouse is pointed at the box on the left
Some details:
When the mouse is pointed to the box that sais PERSON1, I want the coordinates of the first red dot. When the mouse is pointed to the box that sais PERSON2, I want the coordinates of the second red dot. And so on. There is a trick part- left boxes are located outside the google maps div; in addition, if there are many boxes with PERSONS, the left div will allow to scroll those persons up and down, so the vertical correlation between the persons box, and the red dot is dynamic.
In theory, I think, I need an event that is triggered when I point to one of the boxes. When even is fired, I need to measure the vertical distance in pixels from the top to the mouse pointer. Then, when I have the vertical distance, I need to perform some action that would measure same vertical distance on the google map, and would get me that point on the map in lat/lon coordinates.
This should be the answer to your question :
You should be using markers to represent (persons) and then add a listener onMouseOver like in the below post :
var overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map); // 'map' is new google.maps.Map(...)
Use overlay in the listener to get the projection and the pixel coordinates:
google.maps.event.addListener(marker, 'mouseover', function() {
var projection = overlay.getProjection();
var pixel = projection.fromLatLngToContainerPixel(marker.getPosition());
// use pixel.x, pixel.y ... (after some rounding)
});
copied from :
Get Position of Mouse Cursor on Mouseover of Google Maps V3 API Marker
#MehdiKaramosly answer is pretty spot on.
Only slightly furthering the above, to get what would be the lat lng of an element that is not part of the visible map (if the map was visible there) you can pass the events page X/Y to the line:
projection.fromLatLngToContainerPixel(marker.getPosition());
like so:
var pixelLatLng = overlay.getProjection().fromContainerPixelToLatLng(new google.maps.Point(e.pageX,e.pageY));
I have put a very basic example at: http://tinkerbin.com/p30yEXqH
If you click anywhere outside of the map (which equates to the same as clicking on a div that overlays it), you will see in the console log that the lat/lng for wherever you have clicked (even though it is not in the visible map space), is logged.
Cheers,
C.
Update with Working Example of this code
Second Update with JsFiddle Example of both ways click and open map window or mouseover map to highlight listing
As i understand the problem you are having is as following:
Persons are listed in the div separate from map
Persons have latitude and longitude associated to them on the map
Map displays location of person with markers on it using lat long (might be stored in db or something)
You want it so people can highlight a person on map as well as list with mouse over.
If you have lat/long available on map or from list you need to relate them together.
Solution is something like this but there are many ways to achieve this mapping
In your div where person is listed. Insert a data-mapid attribute to each person element when a person hovers over it you highlight it and get the data-mapid from there.
On your map when you render a marker you can additionally pass a parameter data-mapid or something else with same value and have a highlight function on map as well.
`jQuery("#gmap3ul li[data-gb='plist']").each(function(){
elemtopush = {
lat:jQuery(this).attr("data-lat"),
lng:jQuery(this).attr("data-long"),
data:{
"ht":jQuery(this).html(),
"id":jQuery(this).attr("data-mapid")
}
};
ulmarkerspgb.push(elemtopush);
});`
In above code i have html to show on map as well as id as data-mapid now this mapid can be person1 person2 and so on so you can relate back to div with lists. i am using ul and li to list them in the div.
On mouse over your markers events you can do something like this
mouseover: function(marker, event, data)
{
clearalllist();
var listelement = jQuery("td[data-mapid='"+data.id+"']");
jQuery(listelement).attr('style','background-color:#ccc');
var map = jQuery(this).gmap3('get'),
infowindow = jQuery(this).gmap3({action:'get', name:'infowindow'});
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(data.ht);
google.maps.event.addListener(infowindow, 'closeclick', function(event) {
jQuery(listelement).attr('style','');
});
google.maps.event.addListener(infowindow, 'close', function(event) {
jQuery(listelement).attr('style','');
});
} else {
jQuery(this).gmap3({action:'addinfowindow', anchor:marker, options:{content: data.ht}});
infowindow = jQuery(this).gmap3({action:'get', name:'infowindow'});
google.maps.event.addListener(infowindow, 'closeclick', function(event) {
jQuery(listelement).attr('style','');
});
google.maps.event.addListener(infowindow, 'close', function(event) {
jQuery(listelement).attr('style','');
});
}
}
There is a lot of redundant code i have copied pasted from 3 locations so you might just be able to get what you want out of it.
This can make both map linked to list and list linked to map. See my second update on top or click this JSFiddle example. When you click on list on top it opens the map window and when you mouse over the map icons it highlights the listing.
This also populates the map via list rather than hard coding lat longs in js.
I have a Google V3 map which uses steetView and some map markers.
The little yellow streetView pegman sits on the map on top of the markers.
Is there a way to change the z-indexes so that my markers will be above the pegman
(so that they can be easlly clicked on without having to zoom in)?
In case anything is not clear, here is a fiddle....
http://jsfiddle.net/spiderplant0/BRkCA/
After a bit of experimenting I came up with this...
$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
$($("#map_canvas img[src*=cb_scout]")[1]).parent("div").parent("div").css({'zIndex': -200});
This forces the pegman to sit beneath the markers but now the pegman is no longer dragable and each time the map is moved etc, the pegman jumps above the markers again.
To keep the pegman under your markers you can watch for the pov_changed event and reset the z-index after a short delay
$google.maps.event.addListener(panorama, 'pov_changed', function() {
var func=function(){
$("#map_canvas img[src*=cb_scout]").parent("div").css({'zIndex': -200});
}
setTimeout(func,1000);
}
});
You will also need to change the depth of the pegman after the maps moves, which can be accomplished with the following snippet
google.maps.event.addListener(map, 'idle', function() {
google.maps.event.trigger(panorama, 'pov_changed');
})
If you want to be able to drag the pegman, you must first place it above the markers by having a toggle button swap the pegman's depth and add an exception to the pov_changed event handler preventing the pagman from dropping depths when the toggle button is active.
Okay, this may be a bit hacky... (and I hope I understood what you were doing)
1) Disable street view control
2) Make another control with a lower zIndex than the marker you have.
3) Update street view control with the position of the fake street view marker.
http://jsfiddle.net/z7Lp8/
You can set the zIndex of the marker above google.maps.Marker.MAX_ZINDEX in order for the pegman to remain under the marker. MAX_ZINDEX is the maximum default z-index that the API will assign to a marker. Marker z-indexes only work when optimizations are turned off on all markers on the map.
Forked fiddle from question to illustrate: http://jsfiddle.net/brendaz/t4v8nhoq/
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(54.975, -2.020),
map: map,
zIndex: google.maps.Marker.MAX_ZINDEX + 1,
optimized: false
});
I have an OpenLayers map object, and I have added markers to a layer, and added it to the map.
But how do I make sure all the markers are in the display area?
Thanks,
Gil
In order to display all markers on the map
Firstly,make sure you have all markers in one layer.
Secondly,you need to zoom to bound where all markers in marker layer are extended.
To do that,simply
var bounds = markerLayer.getDataExtent();
map.zoomToExtent(bounds);
//has a second parameter that decides to find closest zoom level
//default is false
Please check OpenLayers Document for Marker Layer
Best Regards
Myra