Google Maps (gmap3 plugin), fadeout overlay on click - javascript

I have a google map application built using the gmap3 plugin that draws dynamic overlays when a marker is clicked. I am trying to make a button inside the overlay to "dismiss" the overlay using this line from my script:
$('.dismiss-overlay').click(function() {
$(this).parent('div').fadeOut();
})
I have tested this and everything appears to function just fine when placed outside of the gmap overlay, but when inside the overlay clicking on the button causes nothing to happen. Below is the full script:
$("#map_canvas").gmap3({
map:{
options:{
streetViewControl: false,
mapTypeControl: false,
zoom: 0
}
},
marker:{
values: markers,
options:{
draggable: false,
icon: "files/map-marker.png"
},
events:{
click: function(marker, event, context) {
$(this).gmap3({
clear:"overlay",
overlay: {
latLng: marker.getPosition(),
options: {
content: '<div class="container overlay"><button class="btn btn-xs dismiss-overlay">x close</button>'+$("#"+context.data.id).html()+'</div>',
offset: {
y: -30,
x: 30
}
}
},
});
$(this).gmap3('get').panTo(marker.getPosition());
$(this).gmap3('get').panBy(150, 0);
}
}
},
autofit:{maxZoom: zoom},
});
});
if you need to see a working example: http://schaffner-publications.com/development/map/

Alright, I found the issue.
The thing is that you are creating your overlay dynamically and your event listener is registered during map.js file load. When user clicks 'More info' button on your sample page (http://schaffner-publications.com/development/map/), map is initialised and when user clicks on the marker its overlay is dynamically created and pushed to the page. Specially the close button div. Meaning browser doesn't know anything about the close button (or events on it) unless user clicks on a marker.
In short your event never gets fired because you registered events on .dismis-overlay divs that were available at the map.js load time (& there weren't any, as you create them dynamically).
So to resolve your issue try changing your map.js where you are setting overlay content to the following.
content: '<div class="container-fluid overlay"><button class="btn btn-xs dismiss-overlay" onclick="$(this).parent().toggle();">x close</button>'+$("#"+context.data.id).html()+'</div>',
I have added just below to your code:
onclick="$(this).parent().toggle();"
Not sure if there is specific reason for using gmap3 plugin. If I were you, I would use google map api without it, gives you more control. If you really need clustering, I would go for leaflet.
OLD ANSWER (See comments)
Instead of parent, just mention the id in the event:
$('.dismiss-overlay').click(function() {
$('#parkmap').modal('toggle');
})
On the other note, I tried fade-out and it just fades out the modal while the dark background still exists. Standard way of closing the modal will be to use toggle instead of fadeout.
Hope this helps. :)

Related

How to show modal window on marker click?

I am using leafletjs to build a web map and trying to figure out how to show a modal window when a marker is clicked (instead of the default popup method).
Here's my setup:
var myAirports = L.geoJson(myData, {
pointToLayer: function(latlng){
..snip..
},
onEachFeature: function(feature,layer){
$('#myModalOne').modal(options);
}
});
myAirports.addTo(map);
My HTML is like so:
<div id="myModalOne">....</div>
<div id="myModalTwo">....</div>
Lets say my data has a featurecollection with a key of 'name' (i.e., 'name': 'Bush Airport') for each feature. Would I just add a switch statement to my onEachFeature function?
Just need a little guidance,thanks.
Note: I am using Bootstrap for the modal windows
If I understand you correctly, you don't need to set the pointToLayer option which is useful if you want to display something else than a marker.
What you need is to catch the click event on the markers and display a modal window. There is no popup by default.
var myAirports = L.geoJson(myData, {
onEachFeature: function(feature,layer){
layer.on('click', function(e){
$('#myModal'+feature.properties.name).modal(options);
// or whatever that opens the right modal window
});
}
});
myAirports.addTo(map);

OpenLayers sencha 2 not redrawing entire map on active item change (Chrome on Android issue)

I have an OpenLayers 2.12/Sencha 2.4 app. On selecting a feature I wish to change to another view - a FormPanel. This works fine using Ext.View.setActiveItem(viewname).
However, there is an issue with Google Chrome on Android, when I change the view from the FormPanel back to the map view, and only after both the virtual keyboard and an Ext.Msg.alert() call have been invoked in the FormPanel.
I've analysed this with Chrome's debugger. When the I click on one of the form fields in the FormPanel, most of the OpenLayers tiles are removed from the DOM. When I set the active item back to the map view, no new tiles are added to the map div so the app ceases to be useful. The svg that is the vector layer also ceases to function usefully.
One version of the app is here: https://treemapp.se/fiddles/sencha/ol-sencha-4.html - all the code is in the html file.
Can anyone help?
Thanks
Mini
I added map.updateSize() to the 'painted' listener, which has mostly solved the problem:
Ext.application({
launch: function() {
container1 = new Ext.Container({
scroll: false,
monitorResize: true,
items: [{
xtype: 'component', //xtype: 'panel' - shows nothing
id: 'map',
width: '100%',
height: '100%',
listeners: {
painted: function(){
console.log( "painted" );
if( !map ) {
init( this.id );
} else {
map.updateSize();
}
}
}
}]
});
});
});
Looks like I might need to add a layer.redraw() or layer.refresh() loop for all the layers, as one or two tiles don't get redrawn after the call to map.updateSize() - they do however get drawn after zooming or moving.
Mini

Google Maps infowindow closeclick event (function parameter)

My web application uses the following popup-overlay plugin to show profile content in a popup on the screen:
http://vast-eng.github.io/jquery-popup-overlay/
My problem is related to a Google Map - marker infowindow that I use within the popup window.
When I try to close the infowindow, the popup disappears as well.
This is wrong! I don't immediately see why it is doing this.
If I don't find a solution, I could disable or hide the X, but I prefer not to do this.
The "where" section in the following link shows you the problem:
http://www.zwoop.be/dev/#list/bars/1
Edit
The event parameter returns "undefined" for the following event listener:
google.maps.event.addListener(self.marker.infowindow, "closeclick", function(e)
{
console.log(e);
});
Thanks
Edit2
Here is a quick fiddle that illustrates the problem:
http://jsfiddle.net/462HF/
The blur function in the popup overlay plugin is getting called when you click the 'X' in the infoWindow on the google map, that is why the entire popup is closing. Below is the code in the jquery.popupoverlay.js file:
if (options.blur) {
blurhandler = function (e) {
if (!$(e.target).parents().andSelf().is('#' + el.id)) {
methods.hide(el);
}
};
}
The 'X' is an image, and its parents()only go back to the InfoWindow div, but not the popup div. Therefore, it will call methods.hide(el) and close the popup.
There is probably a better way of determining if it was clicked, but changing it to the following works. It just checks the target's img source:
if (options.blur) {
blurhandler = function (e) {
if (!$(e.target).parents().andSelf().is('#' + el.id) ) {
if(!($(e.target).attr('src') === 'http://maps.gstatic.com/mapfiles/api-3/images/mapcnt3.png'))
methods.hide(el);
}
};
}

Using Bootstrap's popover plugin inside a Javascript string

I'm trying to make the popover plugin work inside a Javascript string. So when a user mouse-overs geolocation the popover will appear, and disappear when the mouse is taken away.
<script type="text/javascript">
$('#directions-panel').text("We can't give you directions to our office as you don't have", <a href="#" rel="popover" data-content="Some content..." data-original-title="Some title..." > geolocation </a> " enabled on your browser. Enable geolocation and try again. The map above will show you where our office is located.");
</script>
And invoked using something like this??
$("[rel=popover]")
.popover({
offset: 10
})
.mouseover(function(e) {
e.preventDefault()
})
I know it's a bit all over place, but I've searched around and can't find anything similar to what I want to do. I'm sure it can be done, anyone point me in the right direction?
EDIT:
I know have the following in contact page:
<div id="directions-panel">
<div id="directions-error-message" style="visibility:hidden">
We can't give you directions to our office as you don't have <a href="#" id="geoloc-popover" rel="popover" data-content="Some content..." data-original-title="Some title..." > geolocation </a> enabled on your browser. Enable geolocation and try again. The map above will show you where our office is located.
</div>
</div>
and DIV directions-error-message is made visible when the following JS function failure() fires:
function failure() {
alert("Your browser does not have geolocation enabled so we can't give you directions to our office. Enable geolocation and try again, or consult the map for our address.");
$("#directions-error-message").css({
visibility: 'visible'
});
var destMapOptions = {
zoom:15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(ourLocation.lat, ourLocation.lng)
}
map = new google.maps.Map(document.getElementById("map-canvas"), destMapOptions);
marker = new google.maps.Marker({
position: ourLatLng,
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
title: "Hello"
});
google.maps.event.addListener(marker, 'click', toggleBounce);
}
$(function() {
$('#directions-error-message').popover({
selector: '[rel="popover"]',
trigger: 'hover'
});
})
Is there a way to just make 'geolocation' in the directions-error-message DIV trigger the popover?
Why not try something like this instead:
<div style="visibility:hidden">
We can't give you directions to our office as you don't have", <a href="#" rel="popover" data-content="Some content..." data-original-title="Some title..." > geolocation </a> " enabled on your browser. Enable geolocation and try again. The map above will show you where our office is located.
</div>
Then change the visibility of the div with javascript. That way the jQuery setting the title will recognize the link but the user doesn't see it until you want them to.
Twitter Bootstrap's Popover plugin does have an option to enable its data-api to trigger toggling popovers. Enabling it will make all dynamically added elements with the proper markup work without further initialization calls in JavaScript.
The feature is disabled by default mostly because subscribing to all the mouseenter and mouseleave events on a page could pose performance issues (which is the default in TBS < 2.1). If you can keep the activated area relatively specific, you should be fine performance-wise.
To enable it just for the #directions-panel on hover, the syntax would be:
$('#directions-panel').popover({selector: '[rel="popover"]', trigger: 'hover'});
All subsequent updates to the panel which include popovers will then be active by default.

Google Maps API 3 loading icon

Is there a way to have a loading icon while the map is loading markers? I am using google maps API 3 with javascript and cant find much information on this.
This event is now called "status_changed" per the API docs: https://developers.google.com/maps/documentation/javascript/reference#KmlLayer
It can be used like this:
google.maps.event.addListener(kmlLayer, 'status_changed', function () {
if (kmlLayer.getStatus() == google.maps.KmlLayerStatus.OK) {
// Success
}
else {
// Failure
}
});
If you're loading markers using a KmlLayer object, then you can attach a listener to the event metadata_changed which gets fired after the KmlLayer has loaded all the information.
So you can have your custom loading icon display as soon as you initialize your map, then make the call for the markers using new google.maps.KmlLayer(...). In the listener for metadata_changed you can remove the custom loading icon, or hide it from displaying. So when the KmlLayer finishes loading, then it'll run the code to remove your loading icon.
You can attach listeners by going:
google.maps.event.addListener(kmlLayerObject, 'metadata_changed', function () {
...
}
You could also "hide" the map canvas with a loading div and show it after initialization.
Another thing to be aware of is when the map is hidden on init, it may behave strangely that can be fixed by "resizing" the map:
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2

Categories

Resources