I'm using gmaps4rails and I need to execute javascript inside a marker's info window. Every marker's underlying object has a sound file associated with it, and I want to be able to play that file inside the info window. The player I'm using is jwplayer and it is instantiated with javascript call with few params.
I've tried to use the gmaps4rails own method to insert the code into info window like below
def gmaps4rails_infowindow
"<div id='jwplayer_#{self.id}'>Here comes the player...</div>
<script type=\"text/javascript\">
//<![CDATA[
jwplayer(\"jwplayer_#{self.id}\").setup(#{options});
//]]>
</script>"
end
but that doesn't work. Actually anything with a < script> tag inside that method seems to break the gmap4rails map loading anyway I try it.
Is there a way to get javascript executed inside the info window by using gmaps4rails, or do I need to roll some other solution for that?
You won't be able to add any <script> in gmaps4rails (as well as raw google maps API I guess).
You should deal with this problem using click event on the marker + close event of infowindow.
Use the callbacks to add these functions.
Related
When using a g:uploadForm, is there anyway to detect that the file upload has been completed by javascript? I want to use this as an event to show a modal dialog that shows information about the uploaded file.
It is easy to detect by the controller because that is simply when the upload function finishes execution but how can I make my GSP detect this and therefore react.
Since you are posting to/targeting an iframe for your form submission it should be easy enough for your controller that accepts the upload to render some jquery to the iframe to notify the parent window that the upload is complete. In this example I will use a custom jquery event.
Containing GSP:
$(document).on("upload-complete", function(e) {
console.log("Upload completed.");
});
GSP template rendered by the controller within the iframe:
parent.$(document).trigger({
type: 'upload-complete'
});
The above jquery should accomplish what you are looking to do.
You can try using the Ajax Uploader plugin.
This is what you would need
<uploader:uploader id="yourUploaderId"
url="${[controller:'yourController', action:'yourAction']}" />
There are callbacks associated:
<uploader:onSubmit>
<uploader:onProgress>
<uploader:onComplete>
<uploader:onCancel>
I'm upgrading an old Rails 2.1 app and am replacing the google_maps plugin with the Gmaps4Rails gem. The conversion has been pretty straight forward so far. The remaining task is to programmatically show and hide the markers infowindows on mouseOver of a list of addresses which I display beside the map.
My question is how do I get a handle to the marker to display the infowindow?
I found this question, but it seems to deal with the mouseOver of the marker. Essentially, I want to use a mouseOver event from an element outside of the map to show the infowindow of a marker.
Any help is appreciated.
This behavior seemed to be built into the google_maps plugin (as far as I can tell).
There is no builtin way to achieve this in gmaps4rails. But here are the relevant steps:
1) In your controller
Foo.your_scope.to_gmaps4rails do |obj, marker|
# Add any custom elements here
marker.json { :id => obj.id }
end
This will add the id of each element in the Gmaps.map.markers array.
2) In your view
Html:
add to each side element an attribute with the id of the related object
Javascript:
Write a js function which retrieves a marker from it's id (basically, loop Gmaps.map.markers and check each element's id)
write a js function which observes your side elements mouseOver. In it's callback, find the related marker thanks to the above function and finally trigger this: foundMarker.infowindow.open(Gmaps.map.map, foundMarker.serviceObject)
I'm writing google api 3 code, here: http://jsfiddle.net/zVaGN/2/
First i call the two Fusiontables to appear on the map, then i created a html element outside the map which should, when clicked, open a custom infowindow which i have previously created in Fusiontables. So i don't know how to make a function which will call the already created infowindows from the fusiontables when i click on a html element.
So i want this efect http://econym.org.uk/gmap/example_egeotestmon.htm
But mine should call the custom infowindows from fusiontables that already exist. How to do this???
Thanks anyone!
UPDATE
Thanks for the reply Eric. I didn't know this, i tried with a function that would look like this:
function izbor() {
var infowindow = new google.maps.InfoWindow({
query: {" SELECT 'ExtendedData' FROM " + tableid};
});
infowindow.open(map);
}
But i don't know what to call from the table, what is the name of infowindows in the fusiontables.. I called for ExtendedData, because when i exported the fusiontable to kml file, that was the code for the infowindow, but this code for google api 3 that i wrote probably isn't good..
UPDATE #2
I have tried it here, but it doesnt work..
jsfiddle.net/zVaGN/4/
Thank You anyway for the help, if You come up with some other solution, please write!
I don't think this is possible in Fusion Tables. In Fusion Tables you don't really have control over the creation of the overlays displayed on the map, whether markers or polygons. Fusion Tables is creating tiles on the fly with the overlays already rendered and AFAIK you have no control over the click events on them, besides using infoWindowSuppress: false, which does allow you to display your own infoWindow with the values returned from the FT click event.
EDIT
This function will display the html returned from Fusion Tables. Seems like there should be a way to trigger a click event on the layer from within the page.
google.maps.event.addListener(layer, 'click', function(e){
alert(e.infoWindowHtml);
}
I'm trying to get a getJSON result to update an HTML element on page load, within a jquery mobile loaded website.
Now, I've read I should not rely on ready(), but bind to pageInit. So I tried, but it just won't work. I've tried many other events that could be logical to try within the API event documentation, without any success.
The closest I come to success is after the page is loaded, via ajax, if I refresh the page manually (with the browser's refresh button), getJSON does update the corresponding HTML element. And you guess, it's not what I want to achieve. Here is what the code looks like now, and where it is placed...
<div data-role="page">
<script>
$( '#pageContainer' ).live( 'pageinit',function(event){
//an alert() here does fire right before the page is shown in the browser
//here is the getJSON code.
});
</script>
Now, I need help to try to figure how to make it work. I only want an element X in the page to update with the text returned from a jSON when the page appears in the browser! Like a normal ready() function would have done !
(Maybe it is relevant to specify I'm running RC2 ?)
If you can't use JSONP here, have you tried setting a setTimeout()? You have to trigger a callback after the json object is loaded so timing is essential.
I'm using Gmap4Rails in the body of a form that is loaded via Ajax. There are custom fields in the form and some of them may be location pickers that I have working on a non-Ajax version of the form.
With the Ajax version of the form, I'm getting "Gmaps.my_map_id" undefined errors.
In the non-Ajax version of the form, I call Gmaps.loadMaps via JavaScript in the HTML page head for "window.onload" as is the normal practice with Gmaps4Rails.
However, this won't work in the context of Ajax, as the map(s) haven't been defined at window.onload time.
In my form, I also define a callback per Gmaps map object. This is what seems to be failing with the "undefined" error, even when I do a "Gmaps.loadMaps();" script directly before the first callback is defined in the code that is loaded by Ajax.
Basically it goes like this in code order:
in a loop, gmaps4rails partial is called to output each map custom field
after that loop finishes, Gmaps.loadMaps() is called once
in another loop, each Gmaps map object has the JS for its callback added
Any suggestions on how to get this working?
UPDATE: possibly only partly correct (i.e. I did have the problem that was outlined here, but calling Gmaps.loadMaps() still doesn't work).
2nd Update: I have had to alter the definition of the load_... to be on the Gmaps object and then alter Gmaps.loadMaps function accordingly. I've put in a pull request to the project at https://github.com/apneadiving/Google-Maps-for-Rails/pull/94.
The Gmaps.loadMaps() call wasn't the issue. So an alternative isn't necessary. The thing that was tripping me up is that in the partial enable_js was being called as false and the JavaScript that declares the new instance of the Gmaps4RailsGoogle and the function for loading it was not being called.
I have a custom version of the partial and in my case, even when enable_js (I interpret as "don't load javascript library files" for my app) is false, I still do the JavaScript that declares the new Gmaps4RailsGoogle instance and defines the load_... function.
That being said, the load_... function appears to be not working for me. It comes back with the following in my case:
TypeError: 'undefined' is not a function (evaluating 'window"load_" + key')
When I call the load_... function directly from the console (rather than the Gmaps.loadMaps call), I get a similar error:
"'undefined' is not a function (evaluating 'this.load_...()')"
Perhaps having to do with not having any markers declared? Any hints on that problem appreciated.
If I step through the steps in the load... function, the first bit that throws an error is .initialize(). Still investigating.