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);
}
})
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.
Inside a jquery $.getJSON call, I create several markers and popups, then bind the popups to the markers:
$.each(points, function(index, p) {
var marker = L.marker(L.latLng(p.lat, p.lon), { title: p.text });
var popup = L.popup().setContent(p.text);
marker.bindPopup(popup);
}
I want all popups on the markers to be open after the map has loaded (and stay open, if possible). The Leaflet 1.0 documentation states: " Use Map.openPopup ... or use Map.addLayer to open as many as you want." (see leaflet - popup).
If possible, I would prefer using a "built in" solution to one where I have to fiddle around (like in SO - keep popups open). One advantage is that that approach can be generically used, for example to open all tooltips as well. And it would probably help me understand layers better.
I have tried several approaches, with LayerGroups and FeatureGroups, to no avail. How would you open a group of popups at once?
You can use a layerGroup containing all your popups. That way you have all the functionalities of group control for your popups.
I reproduced a basic example on JSfidle (https://jsfiddle.net/vaillant/f4zpr6us/) but you can imagine removing only certain popups from the layerGroup instead of removing all the popups at once. Below is the crucial part of the code:
var popup_layer = new L.layerGroup();
$.each(testData, function(index, p) {
var marker = L.marker(L.latLng(p.lat, p.lon));
marker.addTo(map);
popup = new L.popup({offset: new L.Point(0, -30)});
popup.setLatLng(L.latLng(p.lat, p.lon));
popup.setContent(p.text);
popup.openPopup();
popup_layer.addLayer(popup);
});
popup_layer.addTo(map);
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.
The user has markers loaded depending on where they select their location. The markers are cleared when a new location is chosen. If I have an InfoWindow open when I clear the markers, it stays open even though the marker goes away. I want any open InfoWindow to close when the data is refreshed.
My implementation details:
I am using jquery-ui-map to enhance my Google Maps implementation with jQuery.
I attach a click event when creating the markers with the following code (FYI: I took out all the specific details and replaced them with generic ones).
$('#map-canvas').gmap('addMarker', {
'position' : new google.maps.LatLng(latitude, longitude),
'title' : myTitle,
'icon' : myImage,
'shadow' : myShadowImage
}).click(function() {
$('#map-canvas').gmap('openInfoWindow', {
'content' : displayContent(myObject)
}, this);
});
The option openInfoWindow does not return anything, so storing the InfoWindow object in an array to close it later does not look like a viable option.
Does anyone know how to achieve this using the jquery-ui-map library? I don't see a closeInfoWindow listed in the API documentation.
jquery-ui-map v.beta
var theInfoWindowObject = $('#map_canvas').gmap('get', 'iw');
theInfoWindowObject.close();
jquery-ui-map v rc 1
$('#map_canvas').gmap('closeInfoWindow');
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.