Clicking on markers on embedded Google map - javascript

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.

Related

How can we test the display of marker/ markers on Google map using Cypress.io?

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

Google Maps Api Marker Cluster Activate?

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.

How to make leaflet marker to appear after make a request such as search through search box which is an external div to my leaflet map

I did make marker layer that contain some geojson information. What I actually want to do is to make a request of the marker. Assume that I have lots of marker, then every marker contains address and several other marker information(data). Then I assign them with an ID(even I still don't know how to assign it). Then I grouped all of them in a layer called marker layer and I wish to request one of the marker and I want the marker to show the address, coordinated and other info on exact point. But, I do not know how to request individual marker from external search box of leaflet map. Could someone help on this? Should I just use val() or some other JS function?

Is there a way to associate a marker to text?

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.

Google Maps API V3 zoom in/out with a button outside the map itself

I'm working on a company website of an acquaintance of mine. The company has 7 offices spread all over the country. He has asked me to create a page listing these offices (with contact info, picture, etc.), and add a Google map to it with multiple markers that indicate the offices.
I've done so, but seeing as the zoom-level (a complete country) isn't really detailed, I was thinking about making the map zoom in to specific markers/offices when clicking on the office in the aforementioned list.
I however have no idea if there's a way to perform actions inside the map, from outside the map. Does anybody know?
The website is not live yet, but as an example, you can take a look at this link: http://www.inter-psy.nl/contact/contactgegevens
What I'd like to do is (for example) make the colored block/header perform a map zoom-in to a specific marker when clicking on it.
You must make the map-variable globally accessible, then you may perform any action on the map from anywhere in the page(e.g. map.setCenter() to center the map at a specific location or map.setZoom() to set the zoom-level)
To make the variable globally accessible remove the var-keyword when creating the map

Categories

Resources