I need to use google map service in my ror(ruby on rails)project.However i facing some problems. as we know. we need to include this header to application.html.erb
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script>
<%= link_to 'ajax', boys_ajax_path(:format=>:js), :remote=>true %><div id='ajax' style='width:300px;height:300px;border:1px solid gray'></div>
ajax.js.erb code
$("#ajax").html("<div style='width:100%;height:100%;border:1px solid gray' id='allmaps'></div>")
var map = new google.maps.Map(document.getElementById("allmaps"), {
zoom: 15,
center: new google.maps.LatLng(31.3, 120.6),
mapTypeId: google.maps.MapTypeId.ROADMAP,
panControl: false,
scaleControl: false,
mapTypeControl: false,
streetViewControl:false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
});
var marker = new google.maps.Marker({ map: map, position: map.getCenter() });
When i first click the ajax button. the google map load success. however when i click twice time. the google map does load. what'wrong with google map. Maybe we should submit google map key every time when we click the ajax button.
Is there any method to solve my problem. send google map key every time when ajax action happen..
There is one gem called gmaps4rails go for it. here
Related
I am trying to play embed videos in my webpage, in desktop browser there is no problem, but in mobile version I have these issues:
Video wont start automaticaly
There is Dailymotion logo in right bottom corner
I am using DM object provided by file https://api.dmcdn.net/all.js.
Code:
<script src="https://api.dmcdn.net/all.js"></script>
<script>
DM.init({
apiKey: 'correct api key',
status: true, // check login status
cookie: true // enable cookies to allow the server to access the session
});
</script>
<div id="player{$img->getId()}" class="dailymotion tile"></div>
<script>
$(function () {
var player{$img->getId()} = DM.player(document.getElementById("player{$img->getId()}"), {
{var DMurl = explode("/", $img->getImgUrl())}
video: {$DMurl[count($DMurl) - 1]},
width: "100%",
height: "100%",
params: {
autoplay: true,
mute: true,
endscreen-enable: false,
ui-logo: true,
controls: false
}
});
player{$img->getId()}.play();
});
</script>
My problem might be caused by syntax error in params (endscreen-enable and ui-logo, phpstorm is showing syntax error because of '-' char)
Video wont start automatically
=> this is normal on mobile devices, it will be the same for any video you add, from any provider. The reason is that most mobile devices prevent videos from being played automatically, hence the play must be triggered by a user interaction. This is detailed on Dailymotion developer website at : https://developer.dailymotion.com/player/faq#player-faq-autoplay-does-not-work-on-mobile
There is Dailymotion logo in right bottom corner
=> you pass ui-logo: true so this is normal !
var handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'geolocation'} }, function(){
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(displayOnMap);
});
function displayOnMap(position){
var marker = handler.addMarker({
lat: position.coords.latitude,
lng: position.coords.longitude
});
handler.map.centerOn(marker);
};
I can get my current location on the screen by this way. How can I get the specific location that all clients will see the same adress.
For displaying one specific location using Google map API, I think you can work directly with the HTML/CSS portion of your Rails app, insead of having to add a gem.
See this tutorial - https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map
and just follow the Rails MVC structure to put your code in the right files. This should also be relatively easier since you have already worked with Geocoder and Gmaps4rails.
I want to delete pagination, search box, etc from datatable, i tried lot to delete it but no result has came can anyone suggest me a solution for this
And i want to delete this pagination from list page alone so i placed following script in list.gsp but still its not working
<script>
$(document).ready(function() {
$('#gow').dataTable( {
"bPaginate": false,
"bFilter": false,
"bInfo": false
});
});
</script>
I have an ASP.NET MVC 3.0 partial view which is render inside a jquery ui dialog.
Inside this partial view I have some link which help me to display some more info.
#foreach (StatusType status in ViewBag.Status)
{
<li>#status.StatusMessage<a href='#' status='#status.StatusCode'><img src=#Url.Content("~/Content/Images/information.png") alt="See detail"/></a></li>
}
I've bound those link with the click event:
$('a[status]').live('click', function (e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
var status = $(this).attr('status');
alert('#Model.Code');
...});
What is happening is when I click the first time on the link it will display me the correct Code (let's say 12). When I will load the partial view again for another code (66) it will display me two alert message, the first one with 12 (the old value I've clicked before) and the second one with 66.
The more partial view I will load the more value I will have in my alert.
I don't understand why it is keeping me like an history of all the code I've clicked.
If somebody have any idea on this problem, it will be welcomed, it just driving me mad.
Thanks in advance.
UPDATED
The use of the on instead of the live works, but I still have an issue with the dialog.
I've change the code with the solution proposed:
$('#StatusDiv').on('click', 'a[status]', function (e) {
e.preventDefault();
var status = $(this).attr('status');
alert('#Model.Code');
$('#StatusDialog').dialog({
autoOpen: false,
width: 800,
resizable: true,
title: 'Status Info',
modal: true,
open: function (event, ui) {
alert('#Model.Code');
$(this).load('#Url.Action("ViewStatusInfo")', { clientId: clientId, Code: '#Model.Code', status: status
});
}
});
$('#StatusDialog').dialog('open');
});
The first alert display the correct code, but the second alert inside the open function display the old one. On the second click it will work correctly but I don't understand how it can pick the old value since the first display is correct...
Thanks again for your help.
First of all: do not use live in last versions of jquery.
$('#list').on('click', '.status', function(e){
e.preventDefault();
alert(this.href);
});
Here we bind event to #list and when we will insert new links, everything will work.
Demo: jsfiddle.net/wPSH2/
I have a page that loads a jQuery UI Dialog with an iFrame in it. This iFrame has a login form, however I want a link in this iFrame that says "click here if you are a member" that they can click that will redirect the PARENT to a different page (and thereby close the modal).
Right now any links in the modal (and so in the iFrame) just redirects the iFrame)
Here is the code that calls the modal with the iFrame in it:
$(document).ready(function() {
$("#modalIframeId").attr("src","http://site.com/wordpress/register-now/?the_email_address=<?php echo $the_email_address; ?>");
$("#divId").dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
draggable: false,
resizable: false,
dialogClass: 'no-close',
height: 570,
width: 500,
title: 'Sign Up',
close: function(event, ui) { window.location.href = window.location.pathname; }
});
});
This is all within a Wordpress framework and the page that is called above has the form in it (that works) and the is where a need to have a link to redirect the parent to another page.
Any thoughts?
Thanks! Chris
I guess sometimes the old=school "lo-tech" way is the one we often forget. Found this thread:
Stack Overflow
Which reminded me that target="_top" would do what I needed...and it did. Tested in FF and Android and works well in both (wider testing expected to work well too).
Thanks