I integrated google maps in my rails project using ym4r_gm.
I want to customize the infowindow as in trulia.com (http://www.trulia.com/for_sale/New_York … _homes_lt/).
I went through the ym4r_gm code to include 'extinfowindow', but no use :(
I'm really struggling alot to customize the bubble/infowindow.
Can any one explain me, how can we customize the infowindow using ym4r_gm.
Please help me..
Thanks in advance.
You need to add the extinfowindow.js to your HEAD (after you call GMap.head, or you can add it to the plugin's map.rb), and you need to alter the ym4r-gm.js (local) file to call openextinfowindow on click.
function addInfoWindowToMarker(marker,info,options){
GEvent.addListener(marker, 'click', function(){
marker.openExtInfoWindow(
map,
"infoWindowID",
"info box text",
{beakOffset: 3}
);
});
return marker;
}
Thanks for your great help stewart. I already closed this issue by doing same thing what you have explained here. :) I overwrite addInfoWindowToMarker in local ym4r_gm.js file .
Related
I'm trying to pull dynamic data (form) to a google sheet.
I can't seem to find the right function.
I'm running this:
function name(){
return $('input[type="text"]').val();
}
I tried this:
function fullname(){
return $('#form-field-1-1').val();
}
No success for now.
I've attached the elements below.
Thank you [https://i.stack.imgur.com/Tt5Gk.png]
Your best choise is to use a Variable "DOM element" and capture it by ID. but if you prefer a custom JS this will do:
function(){
return document.getElementById('form-field-1-1').innerHTML;
}
Hope it helps.
I want to change the style of my Google Maps. I am using jQuery-UI-Map, but I can't figure out how.
Here's the code I am using right now:
$(document).ready(function(){
$("#changeMap").click(function(){
alert('About to change style...');
$('#map_canvas').gmap({styles: mapStyleRed});
});
});
The message box is being fired, but the map is not being updated to my "mapStyleRed".
It's always nice to find the answer a few minutes after posting a question...
$(document).ready(function(){
$("#changeMap").click(function(){
alert('About to change style...');
$('#map_canvas').gmap('get','map').setOptions({styles: mapStyleRed});
});
});
I would like to know how to update a row/col and or layout from an external js file on webix. Let's say I have a menu at the left of the screen (col[]) and want to update the right column based on a menu selection. If the menu is composed by
Customers
Orders
Products
And want to update the right column based on the selection calling customers.js, orders.js and products.js
Just like http://webix.com/demos/admin-app/#!/app/orders
That example is very advanced for me, I would like to learn some basic method.
Thanks
Oscar P
You can use webix.ui command or addView API to add a new UI to some specific place on the page.
webix.ajax("config.json", function(text){
$$("layout").addView( JSON.parse(text) );
})
or
webix.ajax("config.json", function(text){
webix.ui( JSON.parse(text), $$("cell_to_replace"));
})
Aquatic,
I also found out an example with .showBatch() API but the console shows "Uncaught TypeError: $$(...).addView is not a function" on both functions, are those part of PRO version? what is wrong?
My code is:
$$("workArea").addView("clientes");
or
$$("workArea").showBatch("batClientes");
on:{
onMenuItemClick:function(id) {
$$("workArea").addView(id);
}
}
I have Markers setup with gmaps4rails.
Now I want to implement a classic search function.
If I find one object, it should directly show the marker.infowindow
How do I open it directly?
I tried:
function focusSearch() {
handler.map.centerOn({ lat: <%=#searchy.latitude %>, lng: <%=#searchy.longitude %>});
handler.getMap().setZoom(16);
marker = <%=#searchy.id%>
marker.infowindow.open(map, marker.serviceObject);
}
But I guess I am going wrong there...
Anyone can help?
If you have an Idea how to directly use the #search:params, I am happy!
Thanks for helping out!
I've created a plunkr with working code here.
Basically steps are:
associate the marker to the original json data where ids are available
search the marker list for the id you expect
trigger the 'click' google map event on the marker which triggers pan + infowindow
I am pulling my hair out dealing with this problem.
These are the code that I used and caused the mentioned problem.
$(document).ready(function () {
$("#at-site-btn").bind("tap", function () {
$.mobile.changePage("view/dialog/at-site.php", { transition:"slidedown", role:"dialog" });
});
$('#at-site-page').live('pagecreate', function(){
var $checked_emp = $("input[type=checkbox]:checked");
var $this = $(this);
var $msg = $this.find("#at-site-msg");
$checked_emp.appendTo($msg);
$checked_emp.trigger('create');
$msg.trigger('create');
$(document).trigger('create');
$this.trigger('create');
$("html").trigger('create');
});
});
Explanation:
The above code is in a file named hod.php. The file contain a number of checkboxes. These checkboxes and be checked simultaneously and when I pressed the #at-site-btn button the at-site.php appear (as a dialog) and display every checked checkboxes.
This is where the problem occurred. When I pressed the back button in the dialog to go back to the previous page and tried to uncheck those checkboxes, the error pops out as mentioned in the title. There are no calls to 'refresh method' in my code so I don't see the way to fix this.
Can anyone please suggest a way to solve this problem?
Am I using it right? (I am very new to jQuery Mobile. If there are some concepts behind using JQM please explain it to me [I've tried read JQM Docs it seems so unclear to me]).
Best regards and thank you very much for your answers.
What version of jQueryMobile are you using? You might need to use pageinit instead of pagecreate. This portion of the jQueryMobile documentation talks about the choices.
For re-painting or creation, the solution that #Taifun pointed out, which looks like:
$("input[type='radio']").checkboxradio();
$("input[type='radio']").checkboxradio("refresh");
worked okay for me, but it didn't paint the controls 100% correctly. Radio buttons didn't get the edges painted with rounded corners.
Before I saw your code, I read here that you can call .trigger('create') on the container object and it worked for me. You are doing that but inside pagecreate instead of in pageinit.
I was actually using a flipswitch checkbox:
<div class="some-checkbox-area">
<input type="checkbox" data-role="flipswitch" name="flip-checkbox-lesson-complete"
data-on-text="Complete" data-off-text="Incomplete" data-wrapper-class="custom-size-flipswitch">
</div>
so had to do this:
$("div.ui-page-active div.some-checkbox-area div.ui-flipswitch input[type=checkbox]").attr("checked", true).flipswitch( "refresh" )
See my full answer here.