How do I fetch all the markers with Google Maps for Rails - gmaps4rails

I am using the Google Maps for Rails gem by appneadiving and would like to add listeners to already existing markers. I wanted to know how to fetch all the markers, I tried looking through the source code but could not figure it out yet.
I'm using version 2.1.2 with Rails 3.2.14. Although my original question was about grabbing all the markers it may not be necessary given what I need to do.
I probably should have went with a name other than session but in my app session refers to activity session. Each marker represents an activity taking place at that location and I just want information about that activity to be displayed if you hover over the marker. I also want a button to join the activity below the info so it would be a form. I already have a form for creating an activity/marker at any location that is clicked but don't know how I would add callbacks to events on the marker. It's a single page app and this the code for root.html.erb, the root page.
<script src="//maps.google.com/maps/api/js?v=3.13&sensor=false&libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js'></script>
<script type="application/json" id="bootstrapped_sessions_json">
{ "sessions": <%= Session.all.to_json.html_safe %> }
</script>
<div class="container" style='padding-top: 60px'>
<div class="row">
<div class="span8">
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
</div>
<div class="span4">
<div style="padding-left:10px;">
Closest users/sessions
</div>
</div>
</div>
</div>
<script type='text/template' id='create_session_template'>
<form action='<%= api_sessions_url %>' method='POST'>
<label for='activity_name'>Activity</label>
<input type='text' name='session[activity]' id='activity_name'>
<label for='end_time'>End Time</label>
<input type='time' name='session[end_time]'>
<input type='hidden' name='session[latitude]' value='<%%= lat %>'>
<input type='hidden' name='session[longitude]' value='<%%= lng %>'>
<input type='hidden' name='session[size]' value='1'>
<input type='hidden' name='authenticity_token' value='<%= form_authenticity_token %>'>
<input type='submit' value='Broadcast Interest'>
</form>
</script>
<script type="text/javascript">
var initialize = function() {
var data = JSON.parse($("#bootstrapped_sessions_json").html())
var markerCoordinates = data['sessions'].map(function (coord) {
return {lat: coord["latitude"], lng: coord["longitude"]}
});
var handler = Gmaps.build('Google');
handler.buildMap({ provider: { minZoom: 1 }, internal: {id: 'map'}}, function() {
var markers = handler.addMarkers(markerCoordinates);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.map.centerOn({ lat: 40.7356, lng: -73.9906 })
google.maps.event.addListener(handler.getMap(), 'click', function (e) {
console.log(e.latLng)
var lat = e.latLng.ob
var lng = e.latLng.pb
renderSessionForm({'lat': lat, 'lng': lng, 'map': handler.getMap()});
});
});
};
var renderSessionForm = function (options) {
var lat = options['lat'];
var lng = options['lng'];
var map = options['map'];
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: black; padding: 5px;";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {
background: "url('tipbox.gif') no-repeat"
,opacity: 1
,width: "280px"
}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
var templateCode = $('#create_session_template').html();
var templateFn = _.template(templateCode);
boxText.innerHTML = templateFn({'lat': lat, 'lng': lng})
ib.open(map);
}
window.onload = initialize();
</script>

Related

How to close Modal de Materialize CSS with Vue

I am trying to close a Modal of Materialize CSS if the validation is correct but I can not find the form.
The simplest thing was to do a type validation:
v-if = "showModal" and it works but leaves the background of the Modal and although click does not disappear. The background is a class named 'modal-overlay'
This is my code:
<i class="material-icons modal-trigger tooltipped" style="margin-left: 2px;
color:#ffc107; cursor:pointer;" #click="getById(article), fillSelectCategories(),
titleModal='Edit', type='edit'" data-target="modal1">edit</i>
I imported M from the JS file of MaterilizeCSS
import M from "materialize-css/dist/js/materialize.min";
Method:
update(){
var elem = document.querySelectorAll('.modal');
var instance = M.Modal.getInstance(elem);
console.log(instance)
That returns 'undefined'
I tried this too on the update() method:
var elem = document.querySelectorAll('.modal');
elem.close();
M.Modal.close()
I initialize the modal from mounted and it works fine but I can not close it at the moment I require it.
mounted(){
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems, options);
}
But I know what else to try :(
It really is difficult to know why things aren't working for you without looking further into your code, but I've created this simple example to demonstrate how it could be done ..
new Vue({
el: "#app",
data: {
modalInstance: null,
closeAfterTimeElapsed: true,
seconds: 1
},
mounted() {
const modal = document.querySelector('.modal')
this.modalInstance = M.Modal.init(modal)
const select = document.querySelector('select');
M.FormSelect.init(select);
M.updateTextFields();
},
methods: {
handleClick() {
if (this.closeAfterTimeElapsed) {
setTimeout(() => { this.modalInstance.close() }, this.seconds * 1000)
}
}
}
})
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
<div id="app">
<!-- Modal Trigger -->
<button #click="handleClick" data-target="modal1" class="btn modal-trigger">Modal</button>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<br>
<br>
<div class="row">
<div class="input-field col s6">
<select v-model="closeAfterTimeElapsed">
<option :value="false">False</option>
<option :value="true">True</option>
</select>
<label>Close Modal After</label>
</div>
<div class="input-field col s6">
<input id="seconds" type="number" v-model="seconds">
<label for="seconds">Seconds</label>
</div>
</div>
</div>
See this JSFiddle

Hide bootstrap row column based on the data

I am running one jquery kendo grid row template where i am showing some content with images.Below is the code :
<table id="grid" style="width:100%">
<colgroup>
<col class="photo" />
<col class="details" />
<col />
</colgroup>
<thead style="display:none">
<tr>
<th>
Details
</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr>
<td style="width:30%">
div class="row">
<div id="dvImage" class="col-sm-4" style="width:118px">
#= imagelink #
</div>
<div class="col-sm-8" style="width:400px">
<span class="name" style="font-size:14px; color:green">#: Link #</span>
</div>
</div>
</td>
</tr>
</script>
<style>
.name {
display: block;
font-size: 1.3em;
}
.k-grid-header .k-header {
padding: 0px 20px;
}
.k-grid-content {
overflow-y: auto;
}
.k-grid tr td {
background: white !important;
border: 0 !important;
border-color: transparent;
}
.k pager-wrap {
border-width: 1px !important;
border-color: #ccc;
}
.k-block, .k-widget, .k-input, .k-textbox, .k-group, .k-content, .k-header, .k-filter-row > th, .k-editable-area, .k-separator, .k-colorpicker .k-i-arrow-s, .k-textbox > input, .k-autocomplete, .k-dropdown-wrap, .k-toolbar, .k-group-footer td, .k-grid-footer, .k-footer-template td, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-grid-header, .k-grid-header-wrap, .k-grid-header-locked, .k-grid-footer-locked, .k-grid-content-locked, .k-grid td, .k-grid td.k-state-selected, .k-grid-footer-wrap, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-refresh, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-panelbar > .k-item > .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-panel, .k-panelbar .k-content, .k-treemap-tile, .k-calendar th, .k-slider-track, .k-splitbar, .k-dropzone-active, .k-tiles, .k-toolbar, .k-tooltip, .k-button-group .k-tool, .k-upload-files {
border-color: transparent;
}
.col-md-2 {
width:118px
}
.col-md-3 {
width:25%
}
</style>
In the above code i have Image and description which i am showing but for some of the rows i don't have image but still it's containing the space. So here i need that if image is null for particular row then it should hide that image column. I tried like this but did not get any luck.
Below is the code:
$("#grid").kendoGrid({
autoBind: false,
dataSource: {
transport: {
read: {
url: "/Home/GetSearchData",
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: { searchTerm: $('[id*=hdnHomeSearch]').val() }
},
parameterMap: function (data, operation) {
return kendo.stringify(data);
}
},
pageSize: 10,
schema: {
parse: function (data) {
debugger;
var items = [];
var chkCorrectVal = 0;
var context = $('#dvImage');
for (var i = 0; i < data.data.length; i++) {
if (data.data[i].CorrectValue != null && data.data[i].SearchValue != null) {
$("#spnSR")[i].innerHTML = "<b>" + "Get results for this text: " + "</b>" + data.data[i].CorrectValue;
$("#spnSV")[i].innerHTML = "<b>" + "Searched for this text: " + "</b>" + data.data[i].SearchValue;
chkCorrectVal = 1;
}
else {
if (chkCorrectVal == 0) {
$("#spnSR").hide();
$("#spnSV").hide();
}
}
if (!data.data[i].imagelink) {
var getContext = $(context[i]);
data.data[i].imagelink = "";
$(context[i]).addClass('hidden');
}
}
var product = {
data: data.data,
total: data.total
};
items.push(product);
return (items[0].data);
},
}
},
dataBound: function () {
DisplayNoResultFound($("#grid"));
},
serverPaging: true,
pageable: {
refresh: true,
pageSizes: true
},
rowTemplate: kendo.template($("#rowTemplate").html()),
});
});
One more example i am pasting here where i am trying to get the same results and that is working fine for me.
Below is the code:
<input type="submit" id="soltitle" value="#1"/>
<div class="row">
<div class="col-md-2" id="hell1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"></h4>
</div>
<div id="timeline1" class="panel-collapse collapse">
<div class="panel-body">
<a href="#" class="thumbnail">
<img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11" />
</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"></h4>
</div>
<div id="timeline1" class="panel-collapse collapse">
<div class="panel-body">
<a href="#" class="thumbnail">
<img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11" />
</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#soltitle').click(function () {
$('#hell1')
// Find parent with the class that starts with "col-md"
// Change class to "col-md-3"
.closest('[class^="col-md"]')
.toggleClass('col-md-2 col-md-2 hidden')
// Find siblings of parent with similar class criteria
// - if all siblings are the same, you can use ".siblings()"
// Change class to "col-md-2"
//.siblings('[class^="col-md"]')
// .removeClass('col-md-3')
// .addClass('col-md-2');
});
});
</script>
in this example i am hiding first column in button click event and that is working fine.
The problem is that you toggle the class for all rows where the image does not exist. Each time you toggle those and toggle again, the second toggle negates the first one. If the rows where the if is evaluated to true is pair, then the last toggle was a negation.
It is not clear whether you need to hide the whole column if you find one such row, or you need to hide the column only for the affected row specifically. Also, your if is incorrect.
If you want to hide the whole column if at least such a row exists, then this might be the solution:
var shouldShow = true;
for (var i = 0; shouldShow && (i < data.data.length); i++) {
if (!data.data[i].imagelink) {
$(".imageClass").addClass('hidden');
shouldShow = false;
}
}
If you want to do it only for the affected row, then something like this might help you:
var context = $(".imageClass");
for (var i = 0; i < data.data.length; i++) {
if (!data.data[i].imagelink) {
$(context[i]).addClass('hidden');
}
}
The code assumes you have a single column having imageClass.
EDIT
It turned out that the .hidden class was not defined. There are two possible solutions, you can choose either of them.
Solution1: replace .addClass("hidden") with .hide()
Solution2: Add the following rule to the CSS code: .hidden {display: none;}

I just want to style the current page or selected page in a WebGrid, How do i do it?

How to highlight the current page number in MVC WebGrid
This is my webgrid control
#{
var grid = new WebGrid(canPage: true, rowsPerPage: #Model.PageSize, canSort: true, ajaxUpdateCallback: "getStars", ajaxUpdateContainerId: "suppListGrid");
grid.Bind(#Model.SearchResultSupplierViewModels, rowCount: #Model.TotalPageRows, autoSortAndPage: false);
grid.Pager(WebGridPagerModes.All);
#grid.GetHtml(tableStyle: "webGrid",
footerStyle:"pp-pagenumber",
htmlAttributes: new {id="suppListGrid"},
columns: grid.Columns(
grid.Column(format: (item) => #Html.Raw("<div class='row panelLawfirmresultbox'><div class='col-md-2 panelsupplierlogo'><img src='../Content/images/profile-logo.png' class='img-responsive' /></div><div class='col-md-7'><h4><a href='#'>"+item.SupplierName+"</a><sup class='pps-type'>Premium</sup></h4> <div class='panelPracticeAreaDetails'><div class='content'> <span class='blue'>Services Offered: </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.KeyPracticeAreaName+"'>"+item.KeyPracticeAreaNames+"</a></div></div><div class='panelLocationDetails'><div class='content'> <span class='blue'>Location(s): </span><a style='text-decoration: none;color: #000;' href='#' title='"+item.SupplierLocation+"'>"+item.SupplierLocations+"</a> </div><div class='more'>…</div></div><span class='blue'>Client Rating ("+item.ClientRating+"): </span><span class='clientStars'>"+item.ClientRating+"</span><br /><span class='blue'>Panel Partnership Rating ("+item.PanelRating+"): </span><span class='panelStars'>"+item.PanelRating+"</span></div> <div class='col-md-3'> <a href='lawfirm-profile.html' class='ppbutton-reachout'>Reach Out</a> <a href='#addtopanel' class='ppbutton-addpanel inline2'>Add to Panel</a> <a href='#' class='ppbutton-addwatch'>Add to Watchlist</a> </div></div>"))
))
}
using footerStyle:"pp-pagenumber" i was able to set styles for not selected page numbers, but how to set style for the currently selected page?
Finally i came in to this solution. I think this is the only easy fix to the problem.
<style>
span.clientStars span {
background-position: 0 0;
}
</style>
$(document).ready(function () {
//Area for providing page number style
$('tr.pp-pagenumber td').contents().filter(function () {
return this.nodeType === 3;
}).wrap('<a class="currentPage" style="color: #fff;background: #438a16;"></a>');
$(".currentPage").each(function () {
if ($(this).html().trim() == "")
$(this).remove();
});
//END
});

dojo dnd change the type of the dragged element

I am using Dojo 1.8.3
I want to develop a Customizable Form using dnd. I have a list of form elements in the left dojo/dnd/Source and the container in the right dojo/dnd/Target which is supposed to generate dijits when I drop on it.
<div class="normal" style="width: 99%; height: 99%;" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters: true, liveSplitters: true">
<div data-dojo-type="dijit/layout/ContentPane" class="normal" style="width: 30%; height: 80%;"
data-dojo-props="splitter: true, region: 'left'">
<div data-dojo-type="dojo/dnd/Source" data-dojo-id="form_tools" id="form_tools" data-dojo-props="copyOnly: true"
class="container" style="width:99%;">
<div class="dojoDndItem" dndtype="heading">Heading</div>
<div class="dojoDndItem" dndtype="textbox">Text Box</div>
...
</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" class="normal" id="form_container"
style="width: 68%; height: 80%;" data-dojo-props="splitter: true, region: 'center'">
<div data-dojo-type="dojo/dnd/Target" data-dojo-id="form_items" id="form_items" class="container" style="height: 80%;" accept="heading,textbox">
<script type="dojo/on" event="DndDrop"> form.transform_item(arguments[0], arguments[1], arguments[2], arguments[3]);//source, nodes, copy, target </script> </div>
</div>
</div>
In my js function transform_item, I am doing this:
this.transform_item = function(){
var dragged_items = arguments[3].selection;
form_items.forInSelectedItems(function(item, id, map){
var dnditem = dojo.byId(id);
switch(item.type[0]){
case "textbox":
var textbox = new dijit.form.TextBox({
name: "textbox",
value: "This is a TextBox"
}, "textbox_text");
// HERE IS WHERE I SHOULD INSERT THE CODE FOR GENERATING A TEXTBOX
require(['dojo/parser'], function(parser){
parser.parse('textbox_text');
});
break;
}
});
}
At this point I'm getting an error when I drop over the Target :
dojo/parser::parse() error
TypeError: root is null
var node = root.firstChild;
How can I make Dojo generate, for example a dijit.form.TextBox when I drag an "textbox" dndtype?
Solved: I have just inserted the textbox in the wrong parent, textbox_text does not exist.So No need of parse();

google maps api v3 multiple jumping location marks with info window

My goal is create a map with multiple locations with a map that jumps from marker to marker when a html tag was click elsewhere on the page
i made the jumps work but, i can't seem to get the mouseover info boxes to work...i have search but can't find this specific problem
www.humphrey-ray.com/qp/locations-new27a.html
working example..
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3.4key=AIzaSyCjceQVdlfYNqKfDcrAl50VIXrzBXMhDbo&sensor=false">
</script> <script type="text/javascript">
var map;
var marker2;
var marker3;
var marker4;
var marker5;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var latlng = new google.maps.LatLng(39.94718, -75.14323);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(39.94718, -75.14323),
map: map,
title: "my 2nd title"
});
new google.maps.event.addListener( marker2, 'mouseover', function() {
infowindow.setContent("my 2nd title");
infowindow.open(map,this);
});
marker3 = new google.maps.Marker({
position: new google.maps.LatLng(39.94924, -75.14268),
map: map,
title: "my 2nd title"
});
new google.maps.event.addListener( marker3, 'mouseover', function() {
infowindow.setContent("my 3nd title");
infowindow.open(map,this);
});
marker4 = new google.maps.Marker({
position: new google.maps.LatLng(39.96146, -75.14325),
map: map,
title: "my 2nd title"
});
new google.maps.event.addListener( marker4, 'mouseover', function() {
infowindow.setContent("my 4nd title");
infowindow.open(map,this);
});
marker5 = new google.maps.Marker({
position: new google.maps.LatLng(39.95098, -75.14558),
map: map,
title: "my 5nd title"
});
new google.maps.event.addListener( marker5, 'mouseover', function() {
infowindow.setContent("my 5nd title");
infowindow.open(map,this);
});
}
function goToLoc(id){
if(id== 2)
map.setCenter(marker2.getPosition());
if(id == 3)
map.setCenter(marker3.getPosition());
if(id == 4)
map.setCenter(marker4.getPosition());
if(id == 5)
map.setCenter(marker5.getPosition());
}
</script> <style type="text/css">
body,td,th { font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body onload="initialize()">
<div id="container">
<!-- /header -->
<!-- /nav -->
<div class="mapwrapper">
<div class="mapwrapper" id="map_canvas" style="width:720px; height:400px">
</div>
<div class="mapwrapper">
<div class="right-top-column">
<div class="right-top-column-inner">
<br>
<img src="img/comin_soon.jpg" width="180" height="186" />
</p>
</div>
</div>
<div class="right-top-column-noshaw">
<h1>
Click Location to show on map
</h1>
<ul class="side-list">
<li>
<a href="#" id="marker2" onclick="goToLoc(2)">
Old City</a>
</li>
<li>
<a href="#" id="marker3" onclick="goToLoc(3)">
South Street/Society Hill</a>
</li>
<li>
<a href="#" id="marker4" onclick="goToLoc(4)">
Northern Liberties</a>
</li>
<li>
<a href="#" id="marker5" onclick="goToLoc(5)">
Old City</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>