I see that there is a getVisible call, but that only checks if the marker is on the map NOT if the marker is in the current view.
I want to check if the marker is in the current view bounds?
I guess you want
map.getBounds().contains(marker.getPosition())
You need to tell map that your markers should be contained within view by adding following code
google.maps.event.addListener(map, 'bounds_changed', function() {
map.getBounds().contains(marker.getPosition())
});
Here bound_changed event is triggered.
Related
Is it possible to reorder ionic list according to the click on a google maps marker?
I have a homepage that has a google map on top with a list under this map.
I want the list to be reordered when a marker clicked. The item that is related with the marker click will come to the top of the list.
Any idea how to do it or any examples that might help me? Is this feasible with ionic2 and google maps functionalities ?
I solved this putting a function call that will sort the list, inside the marker listener. :D So your listener will look like this:
google.maps.event.addListener(marker, 'click', () => {
this.map.setCenter(marker.getPosition());
this.infoWindow.open(this.map, marker);
this.sortWithMarkerClick(marker_key);
});
I have a website at http://arquitectospelomundo.com which displays several markers, combined by the markerclusterer function, which display, when clicked, an infowindow with some info. When clicking directly on the map, the info window appears on the right spot; but when clicking on the sidebar (on one of the pictures), the info window goes out of bounds.
This was working correctly and suddenly changed; I am trying to figure it out but so far with no success. I would appreciate any help pointing me in the right direction.
Thank you.
As it seems the issue is related to the MarkerClusterer.
When the marker where the click has been triggered is inside a cluster the map-property of the marker is null and you get the wrong position.
Possible solution:
When the marker is within a cluster use a hidden marker(hidden via visible) as anchor for the infoWindow:
google.maps.event.addListener(marker, 'click', function() {
//create the dummy-marker on first click
if(!map.get('dummy')){
map.set('dummy',new google.maps.Marker({map:map,visible:false}))
}
var latLng = marker.getPosition();
//when the marker is within a cluster
if(!marker.getMap()){
//set position of the dummy
map.get('dummy').setPosition(latLng);
//use dummy as infowindow-anchor
marker= map.get('dummy');
}
map.panTo(latLng);
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
I had the same problem with Marker clusterer and outside clicks to the map, opening infowindows. The solution by #Dr.Molle with dummy markers is a nice direction, but the problem is that you can use the dummy to pan to, but the listener triggers a click on the marker which is not on the map. The correct infowindow opens, but the autopan feature has no way of knowing where to pan to, so it stays where it was after the last click. This is a problem with repeated clicks from outside the map. The first click goes okay, but the second or third one goes wrong, depening on if it was in a cluster or not.
The solution I found tests if the marker is in a cluster, if yes, attaches it to the map, and removes it after the click (not sure if that is neccessary, maybe to prevent the map from getting slow). I put it in the function that is called with each click from outside. But maybe you can also build it into the event listener. This works perfectly for me:
function openInfoWindow(id){
googlemap.setZoom(13);
var marker = markers[id];
var latLng = marker.getPosition();
if(!marker.getMap()){ //if the clicked marker is in a cluster, so it is not attached to a map
marker.setMap(googlemap); //attach it to the map
google.maps.event.trigger(marker, 'click'); // the standard trigger, opens infowindow
googlemap.panTo(latLng);
marker.setMap(null); //detach it from the map (not sure if necessary
} else {
google.maps.event.trigger(marker, 'click');
googlemap.panTo(latLng);
}
return false;
}
I am working on a Google Map project. I need to accomplish something interactive. On the map, there will be lots of markers indicating different places and one place will be set as center. Clicking on the marker will pop up the infoWindow. On the infoWindow there will be a link named “NEXT”. Hitting that link will take the viewer to another marker place. It seems to be straight forward, so my question is there any API method to accomplish such task? Any help/suggestion will be highly appreciated.
Use the domready event of the infowindow to bind your click events, as described here.
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(infoWindow, 'domready', function() {
// whatever you want to do once the DOM is ready
});
I have many map markers with the exact same lat/long cords so no matter how far in I zoom my map still shows the marker cluster and the number of results.
Is there a way to have some onclick or onhover event so that it shows an info box with all of the markers in that cluster in a list? Then clicking a link within that info box opens up that individual marker info box?
I've read solutions to change the lat, long by a small amount so that they aren't the same location. I think that is very messy and not that good anyways if there ends up being multiple markers 10+ anyways at the same locationg. I think it'd be much easier for a user to just click the cluster and bring up the info window with all of those markers in there with links.
Or if someone knows another plugin that does what I am seeking I could work with that too. I just haven't found much info on it.
There might be a plug in out there to do what you want, but it's also possible to do without one. I did something like that in one of my projects.
Add event listener to each marker; clicking opens marker list info window
The content of the marker list info window contains onclick attributes that will open the marker info window.
My code was tucked away into functions, but it was basically just this:
//1) while creating marker, create click listener that opens the marker list
google.maps.event.addListener(marker, 'click', function() {
markerWindow.close();
markerList.open(map, marker);
});
//2) store the content required by the marker's info windows
var markers = [
[marker1Reference, "The Stadium"],
[maerker2Reference, "The Supermarket"]
];
//3) the function that is called each time a marker is chosen from the marker list
function openMarkerInfo(markerIndex) {
markerList.close();
markerWindow.setContent(markers[markerIndex][1]);
markerWindow.open(map, markers[markerIndex][0]);
}
//4) info window for the marker list - the content includes JS onclick events that will open each marker info window
markerList = new google.maps.InfoWindow({
content: "Choose:<br><br><div href='' class='markerLink' onclick='openMarkerInfo(0)'>The Stadium</div><br><div href='' class='markerLink' onclick='openMarkerInfo(1)'>My House</div>"
});
//5) the marker window that will get set each time a marker is clicked in the list
markerWindow = new google.maps.InfoWindow();
Hope that helps!
I want to put a map in a web page where users will be able to put interactive marker (location pins) as many as they want. Now, whenever a marker is placed, I want to store that specified marker's lat, long value to be saved in a database that I have in my server (phpmyadmin).
Trying to get started with Google Map Data API. Have seen lots of examples but could not find any where interactive markers can be placed.
I'm going to show you how to do it with v3 of the APi
Create your map... I'll assume you've got this part down.
Add an event listener to the map. This event listener will call a function that will create the marker (in this case add_marker). You can use any event you want, this uses the click event.
google.maps.event.addListener(this.map, 'click', add_marker);
Create the function that adds the marker to the db then the map. This will require some AJAX. You use the event.latLng to get the lat/lng
function add_marker( event ) {
lat = event.latLng.lat;
lng = event.latLng.lng;
// ajax code here that posts the lat/lng to the server
// only call the remaining code to add the marker if it was successful
var marker = new google.maps.Marker({
position: event.latLng,
map: map // put the handle of your map here
});
}