I am trying to populate a Google map infowindow with content from a partial (via ajax) when the map marker is clicked.
apneadivings wiki post here has helped: https://github.com/apneadiving/Google-Maps-for-Rails/wiki/Adding-an-id-to-markers-and-access-them-later
I do have the id for the model instance I want to retrieve in the marker (from the source: "marker.json({ :id => user.id })"). But I cannot figure out how to use this to attach a listener to the markers click action, and then put the resulting HTML into the infowindow.
After you create your markers:
markers = handler.addMarkers(...);
_.each(markers, function(marker){
google.maps.event.addListener(marker.getServiceObject(), 'click', function(){
$.get(expectedUrl)
.done(function(data){
//only you know how `data` is structured
var infowindow = new google.maps.InfoWindow({content: 'content' });
infowindow.open( handler.getMap(), marker.getServiceObject());
})
})
});
Related
I have an MVC application with CHart.js.
Iam able to load the CHart.js on the View load event.
I want the Chart.js to be loaded on a html button click event.
On button click the controller is invoked and based on the search condition data is filtered.
I want this filtered content to be displayed on the chart.js.
How do i invoke the javascript function to load the chart on button click after the controller process is done on button click.
Flow should be
1. Enter the filter conditions
2. click button
3. controller fetches the data from the database based on filters
4. then the javascript function in the view is invoked to load the chart.js
Let me know how it has to be done.
For displaying data returned from your Controller in JavaScript you have two options:
The First:
using the razor syntax inside your View to refer to the model returned by the controller. This means that your JavaScript would also be written inside your View.
#model 'yourViewModel'
<div>
//your view html code
</div>
<script>
document.getElementById("button").click(function() {
var chartData= #Html.Raw(Json.Serialize(Model.'nameOfYourModel'));
var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: options
});
</script>
The Second:
Retrieve the data from your controller trough AJAX, for this I would recommend using the jQuery library. As it makes the syntax easier to write and understand.
var chartData;
$('.button').click(function() { //your button
$.ajax({ // Invoke controller action to retrieve data
url: "path to your controller and its action",
type: 'GET',
success: function(data){
chartData = data;
}
});
var ctx = $("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: chartData,
options: options
});
}
With this approach you call the controller action that returns your chart data in JSON format.
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 have problem on my webpage,
I am adding an element in the document when the user clicks on a specific button.
the element is
<div class="draggableResizable">
Some text
</div>
script.js
$('#button').click(function() {
$("#pageWrap").append(element)
})
$('.draggableResizable').draggable().resizable()
Any suggestions are welcome.
Thank you.
Just restructure so you initialize the widgets after adding the element:
$('#button').click(function() {
//create an element
var $element = $('<div class="draggableResizable" />').text('some text');
//append it to the DOM
$("#pageWrap").append($element);
//make it "draggable" and "resizable"
$element.draggable().resizable();
});
Here is a demo: http://jsfiddle.net/ZSgBP/1/
You need to use the .on() or .live() function if you want to add events to an object after adding it to the DOM. If you don't want to use either of these functions, you can simply add the div to the HTML, then hide it on page load and call .show() on it.
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.
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.