Am trying to display the locations in map which i have in my array i have listed the locations on the left side. if user click any of the locations on the list the map should display that particular location and info Window. The problem here is if i click on any other location the previous clicked info Window still appears on the map how can i hide it in the map?
My code
you are creating a new infoWindow instance every time you click one of those locations and not saving them for further use.
i have modified your code inside two functions
1. populateInfoWindow
(added condition here to check if there is an infoWindow created already,
if yes then use that else create new and save it under the same marker)
2. showListings
(if marker visibility is false then call close function of its infoWindow)
working CodePen
Related
I am using Google Maps to display markers on the map and other widgets to describe each marker on the map. I have successfully implemented when the user tab on a widget, the map area will change to make the matching marker to be the center of the map.
I also have the 'Search this area' button to search the map area.
The hard part is to control how to hide/display the 'Search this area' button.
So far, I have implemented it to display when the map area is changed. However, it causes the button to appear every time the map area changed by the user tab on a widget.
I would like to only detect the map area change by the user manually such as pinch zoom in / out, drag etc.
You can use the Listener widget to listen for onPointerMove on your map. Like this,
Listener(
onPointerMove: (move) {
// This will trigger when a user will drag the map
},
child: map);
Mind that onPointerMove is called many times during user drag and is not called when the user taps on map buttons like the map zoom buttons.
If you want only one call after the end of the user interaction and to also get events from the map buttons, you can use onPointerUp instead.
Problem 1: In my project, I have to add the route of a person. for that I have two drop-down from that I can choose the location then add that to my route map by clicking another button called 'ADD'. each time I click 'ADD' after selecting the trips the trip should append the existing route map as shown in the image.
I searched on google but I couldn't find any solution. all are talking about adding line route in google map
Problem 2: we can add Any number of trips, the design should respond accordingly to adjust within the defined dimension.
I am trying to add a bunch of markers to a map with show/hide buttons for each category of markers. Adding a marker from stored db data puts them on the map and makes them clickable, but they won't respond to setMap(null) unless that call is through google.event.addListener(marker, ...). Calling it from a standard js button onclick event, or via google.event.addDomListener(marker, ...) doesn't work.
Also maybe helpful to note is that when I call marker.setAnimation(BOUNCE) the marker starts bouncing but it looks like there is a duplicate marker under it. Similarly, if I drag the marker it's as if an unmovable duplicate is created right under it.
Thoughts? This is super frustrating!
Just like this taken from here ? Are you trying to avoid google maps api's google.maps.event.addDomListener? Why? You can use it to listen to your button's click event too. just as in:
var YourButton = document.getElementById('myButton');
function HideMarkers() {
// Hide us
}
google.maps.event.addDomListener(YourButton, 'click', HideMarkers);
customized for you from. For the second part, seeming like double markers I suppose we need some code..
This turned out to be purely user error. I am using firebase to store map data without a server backend and was adding duplicate markers. This explains the "inability to hide" and also the appearance of duplicate markers when dragging or animating.
The reason it was working from a click event on the marker was that both duplicate markers were receiving the click event and so both were being hidden.
setMap appears to be perfectly reliable when used in or out of google event handlers.
The Google map info window will not appear when I click on a marker using the iphone. The same code works on the desktop on Android.
I need the map hidden by default and then loaded in only when the user clicks the view map button as I want to keep the weight of the page down as this is for a mobile site.
The click event handler is being fired as I put an alert on it and it worked. I think it might be something to do with the order of the code when I attacked the click handlers, but thats a guess. Also, when I add draggable: true to the markers the bubble appears but I dont want the markers to be draggable.
I have set up a test page http://www.clawg.co.uk/nearby/testmap.html
A run through of this is:
I scan the DOM for data attributes values which I use to create an array of data that will be used for info windows.
I create a button on the fly that will make the map appear when clicked
When the button is clicked the map api is loaded in if its not already available
The map is then loaded
The markers are positioned on the map
The default marker icons are too small for iphone 4 making them unclickable, so I used a custom marker that was 42x42 in size.
I am using the Google Maps Control for ASP.Net. I am adding one point which is current point of bus & polyline of the points from current point to last 10 points on the page load with showing popup on current point by default.
I am using update panel for the the refresh button. There is also one input field which takes number of record to show on polyline from current point. Now I want to reset my googlemapObject on refresh button click event so that in every refresh click completely new set of points, polylines should add and shown on google map.
Is there is any method like dispose to dispose current object of goolemap.
How to resolve this problem?
Regards,
Girish
I'm assuming that you are using the Google Maps Control for ASP.NET found at:
http://en.googlemaps.subgurim.net/
If that is the case - there is an example found on their site that will walk you through how to erase icons that are added to the map.
The sample code can be found right here:
http://en.googlemaps.subgurim.net/ejemplos/ejemplo_99000_Custom-Javascript.aspx
By implementing a custom Javascript Event you will be able to change the data on your map with the refresh button - without needing to do a whole page refresh.