I need some help with JavaScript and Google Maps API.
I have a Google Maps map on my website which shows markers, which in turn show a custom InfoBox when clicked on.
When a marker is clicked, a new object is created for this InfoBox:
google.maps.event.addListener(marker, 'click', function() {
infoBox = new InfoBox({id: id, content: description, latlng: marker.getPosition(), map: map});
});
When a visitor clicks two markers consecutively, he is faced with two InfoBoxs. I run two lines of code that hide the InfoBoxs when a users clicks away in the map or when they click the cross in the upper right corner:
google.maps.event.addDomListener(closeImg, 'click', removeInfoBox(this));
google.maps.event.addDomListener(map, 'click', removeInfoBox(this));
What I would like to happen is that when a user clicks on a marker, all previous markers will get hidden (so after each click on a marker, there would only be one previous InfoBox to be hidden).
I'm struggling to get this done. If I create a DomListener on all markers with the 'click' event, I never get an InfoBox to pop up. If I put removeInfoBox(this); before creating a new object of InfoBox I also never get shown an InfoBox.
Where and how would be the proper way to prevent more than one InfoBox from showing up?
I found a post on how to remove markers and keep track of them which I could adept to my script.
First I declare the array for storing opened infoBox'es and the function to remove them (clearOverlays()):
// Declare global array for hiding infowindows
var infowindowsArray = [];
function clearOverlays(){
if(infowindowsArray){
for (i in infowindowsArray){
infowindowsArray[i].setMap(null);
}
}
}
Then when I create a listener for the marker's click event, it will add the new infoBox to that marker. First I use the clearOverlays() function to clear all other infoBox'es. Then I create the new infoBox and push it into the array:
google.maps.event.addListener(marker, 'click', function() {
clearOverlays();
infoBox = new InfoBox({id: id, content: description, latlng: marker.getPosition(), map: map});
infowindowsArray.push(infoBox);
});
This solved my problem with the custom created infoBox'es.
Related
I am using ACF's Google Map to load a map on my page. I pretty much copied everything exactly and slightly modifying the map js with more options on it for styling purposes. I had to change mainly this part in order for the map to load:
$('a[href="#directions"]').on('shown.bs.tab',function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
google.maps.event.trigger(map, 'resize');
});
});
Using their doc ready wasn't working, the map would appear as a grey box. The code change above produces a map, however, once I click onto another tab and then back onto the tab that holds the map, the longitude and latitude seems to disappear. It loads a map that is somewhere way off.
Here's the full js code.
EDIT
This is what I updated the code to:
$(document).ready(function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
});
});
$('a[href="#directions"]').on('shown.bs.tab',function(){
// popup is shown and map is not visible
google.maps.event.trigger(map, 'resize');
center_map( map );
});
After you have triggered the map resize call the center_map(map); function (which is in the code you linked) which will center the map to your markers.
I want to add a google map like http://puu.sh/6VgI0.png in which i have 10 locations and each location has 1.title, 2.address, 3.phone number and 4.category(clinic or hospital) and i want to filter the locations with categories like in above screenshot. any help would be appreciated.
Step-1: Add markers in the map after getting their respective location points with custom marker icons. Something like below
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'schools_maps.png'
});
Step-2: Next you should repeat same for other group of icons.
Step-3: Write a function for both based on the checkboxes selection (which group to be visible or not)
Step-4: In Marker you attach events while click to show popups with all your information.
google.maps.event.addListener(marker, 'click', function() {
// Show popup screen here based on marker parameter.
});
For complete example you can refer this documentation
https://developers.google.com/maps/documentation/javascript/events
Please check this screenshot to understand completely the problem:
My first question is:
How could I move the InfoWindow lower near the pin itself? I tried with css, javascript, etc and I cannot seem to find a "non hacky" way of doing it.
My second question is:
Is there any way to close an InfoWindow from my custom InfoWindow? I know I can do infoWindow.close() but I don't think I have the InfoWindow instance from a jquery event (it's a normal InfoWindow but with custom html in it).
Any help will be greatly welcome :)
Thanks and have a nice day!
From the API on pixelOffset:
The offset, in pixels, of the tip of the info window from the point on the map at whose geographical coordinates the info window is anchored
For the second question, you don't want to use jQuery events to open the infowindow, instead you can use the content property of the options to set your custom html, then do something like this:
var myInfoWindow = new google.maps.InfoWindow({ content: 'customHTML',
//some mode options
})
google.maps.event.addListener(marker, 'click', function (event) {
if (myInfoWindow) {
myInfoWindow.close()
myInfoWindow.setPosition(event.latLng);
myInfoWindow.open(map, marker);
}
})
The marker.setMap(null) call doesn't remove the marker from the map.
I have confirmed the map and marker vars point to the right place but the setMap(null) call simply leaves the marker visible on the map. The setVisible(false) also has no effect.
if(sch_ovr_google_markers.length > 0){//remove from map
for(var i=0;i < sch_ovr_google_markers.length;i++){
sch_ovr_google_markers[i].setMap(null);//no effect
}
}
The markers are created here:
var latlon = new google.maps.LatLng(o.lat, o.lon);
var marker = new google.maps.Marker(
{
map:sch_google_map,
position: latlon,
title: gpn[4],
icon: pinImage,
shadow: pinShadow,
animation: google.maps.Animation.DROP,
zIndex:10000,
index: c
});
sch_ovr_google_markers[lidx] = marker;
sch_ovr_google_iws[lidx] = new google.maps.InfoWindow({ content:h, position:latlon });
sch_ovr_google_cbs[lidx] = sch_ovr_google_marker_init(marker,lidx);
The whole map works great except for this one problem. The surrounding code tests good and too involved to list completely.
I am wondering if there is some hidden preconditions for it to work. I have tried deleting other references to it before setMap(null), but still no luck.
The documentation makes it sound like the method will simply remove it, but obviously, to met at least, there is something more required. Any ideas?
Hopefully the original poster still isn't needing this late answer, but I had similar symptoms and couldn't find any help in the Internets.
For me, there was a problem in populating the data which caused duplicate markers to appear. Therefore, calling setMap(null) didn't seem to do anything, though it still actually did work ok, but of course it only worked on the other marker, leaving the other still on the map which looked like the setMap(null) isn't working.
So, if you're sure that your marker's map is set to null (you can check from javascript console/debugger) but the marker is still visible, try setting draggable: true parameter for the marker and move it around to see if another marker is lurking behind it.
I am drawing markers that represent shops on a map.
There is a single global infoWindow which appears for each marker that is clicked, right after it closes for the previous clicked marker.
In some cases a few shops may have the same address so the markers appear on top of each other and one can only see the top marker.
To solve this I added pagination to the infoWindow.
The problem is that the top marker is the last one on the list, and so the infoWindow shows the latest shop's info and the pagination shows the "back" button, instead of showing the first shop first and the "next" button.
I tried reversing the order of the "for" loop like this for (i=limit; i>0; i--) but it doesn't work. The map gets stuck as if running some ajax request.
Here's the code:
function drawShopsMarkers(){
var marker;
markersArray = [];
var i;
var limit = globalShopsArr.length;
for (i=0; i<limit; i++){
marker = new google.maps.Marker({
position: new google.maps.LatLng(globalShopsArr[i].shopLat, globalShopsArr[i].shopLng),
map: map,
title: globalShopsArr[i].shopTitle
});
markersArray.push(marker);
marker.setMap(map);
google.maps.event.addListener(markersArray[i], 'click', makeListener(i));
}
function makeListener(index) {
return function() {
globalInfowindow.disableAutoPan=true;
globalInfowindow.open(map,markersArray[index]);
CreateInfoWindowString(index);
globalInfowindow.setOptions({
content: globalContentString
});
}
}
}
The CreateInfoWindowString() function simply populates the globalContentString including the pagination.
Can you say what's causing the problem?
Try
for (i=limit-1;i>=0;i--)
like suggested in the comment. You need to change the line when you attach the function to the marker, too. When you push the marker to the array it's accumulate but you attach function to a non-existent element. Use another variable and increment it in the loop: c++
This line google.maps.event.addListener(markersArray[i],.. ... ...
When you change the loop to decrement i and try markersArray[i] it must give an error because element i isn't in the array yet. So create a c variable and use it instead like I wrote and change the line to use c instead of i.