I'm using gmaps4rails sidebar function to allow jumping to individual marker on the map.
My question is:
how can I trigger the click event on the first sidebar item so the 1st marker's info window will be display by default?
You should just add a callback:
Gmaps.map.callback = function() {
var firstMarker = Gmaps.map.markers[0];
var map = Gmaps.map.map;
firstMarker.infowindow.open(map, firstMarker.serviceObject);
}
Be sure to put this callback after the gmaps helper in your view.
Related
We are coding in Swift to create an application with UI buttons. These UI buttons will add or remove markers depending on its status. Because we want the buttons to be layered on top of google maps we have two view controllers. The top view controller contains a button. When the button is pressed, we want to remove the markers that have a "bad" status.
This is our code to remove the marker:
func showOnlyGood(){
mapView.clear() //this is the google map (GMSMapView.map)
for x in arrayOfGood { //Array of good markers
x.map = mapView //Set good markers to show
}
for y in arrayOfBad { //Array of bad markers
y.map = nil //removes markers from map
}
}
The google maps gets updated if the function call is in viewDidLoad(), but when we call the function in the top view controller with the buttons it does not update the map accordingly.
We think this is an issue with refreshing the google map view and have tried many different solutions, but the google map view only shows what is initially in viewDidLoad().
First, if you just want the buttons to be layered on top of the map, just add the buttons to the view after you've added the map to the view; do not create a second view controller. Your problem is most likely caused by this awkward setup. You also don't have an #objc prefix in your action method, which would definitely prevent the button from executing its action.
#objc func updateButtons() {
mapView.clear() // clear the map
for i in someArray {
let marker = GMSMarker()
// configure parameters
marker.map = mapView
}
}
That method will update your map's markers. There is [probably] never a need to refresh the map, even if you want to change styles.
Is it possible to have a loading spinner, called by $.mobile.loading, within a jQuery mobile dialog, and have it position relative to that dialog?
It's not possible directly, but you could do it in a hacky way :
On the pageinit of the dialog, clone the <div/> with .ui-loader class.
var loader = $(".ui-loader").clone();
Then add it into our dialog, like this :
$page.find('[data-role="content"]').html(loader); //$page is the dialog
Create a class called .ui-loader-altered and add position:relative to it. Add the class to the loader inside dialog. This will make loader stay within dialog.
$page.find(".ui-loader").addClass("ui-loader-altered");
Now that you've got the dialog, why dont you show it up?
$page.find(".ui-loader-altered").show();
Full code :
$(document).on("pageinit", "#second", function () {
$page = $(this);
$(this).on("click", "#show", function () {
//clone
var loader = $(".ui-loader").clone();
//add to dialog
$page.find('[data-role="content"]').html(loader);
//add class which makes dialog position relative to div
$page.find(".ui-loader").addClass("ui-loader-altered");
//show it up
$page.find(".ui-loader-altered").show();
})
});
Demo : http://jsfiddle.net/hungerpain/P2XJt/3/
I have the following code:
for (var i=0; i<len; i++){
var benID = results.rows.item(i).ID;
$('#'+element_id).append(
"<li><a>"+results.rows.item(i).nombres+" "+results.rows.item(i).apellidos+'</a>'+
'Eliminar</li>');
$("."+page+"_dis_ben_"+benID).click(function(){
console.log("Item to disable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').addClass('ui-btn-inner-red');
$(this).removeClass(page+"_dis_ben_"+benID).addClass(page+"_enable_ben_"+benID);
});
$("."+page+"_enable_ben_"+benID).click(function(){
//NOT WORKING
console.log("Item to enable: "+benID);
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').removeClass('ui-icon-delete');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').children('span.ui-icon').addClass('ui-icon-check');
$(this).children('span.ui-btn-inner').children('span.ui-btn-icon-notext').children('span.ui-btn-inner').removeClass('ui-btn-inner-red');
$(this).removeClass(page+"_enable_ben_"+benID).addClass(page+"_dis_ben_"+benID);
});
}
I have a list that is split in two, the right part being a button, to accept or reject. What I am attempting to do is that the check button, when clicked changes color and becomes a delete button, also performs an action. That I have been successful at it.
Now th problem is that I want to get it back to a check button, but as it is dynamically created I it doesn't trigger when I click the "delete" icon or the *_enable_ben_*. I assume it is because when I create the event the class/element doesn't exist yet.
Do you have any ideas?
Use .on
http://api.jquery.com/on/
var selector = "."+page+"_enable_ben_"+benID;
$("#yourList").on("click", selector, function(event){
//Insert handler code
});
Found the solution to the last question in the comment right here in stackoverflow:
jQuery Mobile click events on dynamic list items
is there a way to click marker created by OpenLayers.Marker() to be able to redirect to another link.
i have tried
var marker = new OpenLayers.Marker(position, icon.clone());
marker.events.register("click", map, function(e) {
location.href = "http:www.google.com"
});
by doing so, i am able to have a click event when i click the marker and redirects me to www.google.com. But what i am interested to know is, am i able to set the url directly to the marker when i create the marker in the first place?
You should be able to add any property to your marker like this:
marker.URL = "http://www.google.com/";
Then your event handler can be written once like this:
function linkHandler(e) {
location.href = this.URL;
}
marker.events.register("click", marker, linkHandler);
Note that the "map" parameter in the marker.events.register call was changed to "marker".
I'm using gmap4rails to draw a bunch of fairly complicated polygons that serve as district boundaries. I've got two things i would like help with:
Firstly, I want to associate an info window on click with these polygons. This is an example of my use-case: https://google-developers.appspot.com/maps/documentation/javascript/examples/polygon-arrays
I've tried registering a click event handler in the gmap's callback but it doesn't work and I don't think it's the right approach.
Gmaps.map.callback = function()
{
console.log("'sup");
var infowindow = new google.maps.InfoWindow
({
content: 'you clicked me!',
suppressMapPan:true
});
google.maps.event.addListener(Gmaps.map.polygons[0], 'click', function()
{
console.log("the click event fired");
infowindow.open(map, Gmaps.map.polygons[0]);
});
}
Secondly, I'd like to be able to change the fill-color of these polygons via jquery on some user-events (user clicks a checkbox for example). How would I go about that using the gem?
Replace your method with:
Gmaps.map.callback = function()
{
console.log("'sup");
Gmaps.map.polygons[0].infowindow = new google.maps.InfoWindow
({
content: 'you clicked me!'
});
google.maps.event.addListener(Gmaps.map.polygons[0].serviceObject, 'click', function(event)
{
console.log("the click event fired");
infowindow = Gmaps.map.polygons[0].infowindow;
infowindow.setPosition(event.latLng);
infowindow.open(Gmaps.map.map);
});
}
And change this gem's js line to put true instead of false. I did set to false since I didn't like the cursor change. Anyway it should be in configuration options. Please create an issue on github so that I remember to fix it.