In the old Google Maps, one used to be able to search something, hover over one of the results, and the corresponding marker on the map would be enlarged.
This isn't in the new Google Maps, because only one result is shown, but is this still possible? I want to be able to mouseover a particular div that contains an address and for a marker on a Google Maps that is located at that address to be enlarged.
Any help at all would be greatly appreciated. Thanks!
You will need to tie the event listeners of the div and the appropriate marker together. Its not a default function of the api but it is relatively simple.
See the answer here for a related solution. Effectively you need to trigger the mouse over event of the appropriate marker from the mouse over of your div. Hope this helps.
Related
Anyone know whether it is possible to add a label beside my markers on my react-leaflet map?
The link FrankerZ sent you to is pretty helpful, definitely check that out.
If you mean a little popup label that shows up when you hover over a marker (or Polyline, etc.) then as of Leaflet 1.0, you can use Tooltip. I've found that it works much more smoothly than making a Popup, and uses less code, especially if you're just opening the popup on hover. It might look like:
var Marker = L.marker...
Marker.bindTooltip('HI').openPopup();
And you can use the permanent boolean flag if you want to keep it open.
A less popup-y option is DivIcon, if you want a text label that stays at a certain position always. See this SO post. Basically you can add a div that is associated with a geographical position, then format the div to look as text-y or text box-y as you want.
I want to have google map displaying whole planet(zoomed out maximally). Then, I would like to put overlay over map with button. When user click on button the overlay is removed and google map is automatically animating to the location i want.
So, I am not asking for complete solution, I just want you to tell me if it's possible to do that using google map js api, and if you can give me some direction, that would be awesome. I have searched a lot but found nothing on this subject.
Thanks.
I've noticed, that if difference between current zoom level and new zoom level more that 2, google maps won't make smooth zooming.
You can take a look at same question: How to zoom in smoothly on a marker in Google Maps?
map.setCenter(new google.maps.LatLng(theLatitude, theLongitude));
map.setZoom(yourZoomLevel);
See also: change location to preset coordinates and zoom with click of a button
I am trying to create an interactive time table with a map using leaflet.js. My aim is to have users click the leaflet.js marker which will reveal a side panel and show the data that is stored in an external JSON file.
I am having trouble figuring out how I can get the side panel to open when I click the marker. I’ve had a look at the leaflet.js documentation and a few other places but have had no luck. They only show how to bind a popup to a marker.
Any help or advice would be greatly appreciated.
Check the docs here
http://leafletjs.com/reference.html#marker
Marker has a click event
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.
Hey, does anyone know of a way to embed a Google map on a webpage write all the points on the map to a table on the page, where if they're clicked they will be displayed on the map?
Thanks
I think you are looking for something like this google-maps-slider
The demo attaches an onMouseOver event but i am sure you can change that to onClick event.