I have a map on my site
There are lots of markers with infoWindows on this map.
For each infoWindow i use custom blade
in result, on page init DOM take to much time to load, if there are too many markers on map.
I have and idea to load this windows only on marker click.
Can somebody help me with that?
try the below code:
function makeInfoWindowEvent(map, infowindow, marker) {
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
Found a good solution for this situation. Maybe it will be useful for somebody.
On get all
var locations = [
#if(count($trainings) > 0)
#foreach($trainingsas $item)
#if($item->p_lat && $item->p_lng)
{
lat: {{$item->p_lat}},
lng: {{$item->p_lng}},
id: {{ $item->p_id }}
},
#endif
#endforeach
#endif
];
Than, on mapping all marker on map, add a listener for each marker
google.maps.event.addListener(marker, 'click', function (evt) {
var id = marker.get("id");
$.ajax({
url: "{{ route('getInfoWindow') }}",
data:{
id: id
},
success: function(data) {
console.log(data);
infoWin.setContent(data);
infoWin.open(map, marker);
}
});
That is all we need. On backend we get model with that it and render output with our view!
Related
i have the following data
then i want to display in full calendar
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek'
},
events: function(start, end, timezone, callback) {
$.ajax({
url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
type: 'GET',
dataType: 'JSON',
success: function(data) {
var events = [];
if (data != null) {
$.each(data, function(i, item) {
events.push({
start: item.date,
title: 'Present',
display: 'background'
})
})
}
console.log('events', events);
}
})
}
});
calendar.render();
});
the data doesn't appear in the calendar, but it does appear in console.log
There are two issues here:
events: function(start, end, timezone, callback) { is wrong for fullCalendar 5. That looks like the syntax from an earlier version. https://fullcalendar.io/docs/v5/events-function shows the function's signature in v5, which is
function( fetchInfo, successCallback, failureCallback ) {
You forgot to use the provided callback to return the events to fullCalendar. So your function is downloading the events and logging them, but they never make it to the calendar.
Therefore this:
events: function( fetchInfo, successCallback, failureCallback ) {
$.ajax({
url: '<?php echo site_url("absentMonthYearController/absentYearController/calendarShow/" . $nik) ?>',
type: 'GET',
dataType: 'JSON',
success: function(data) {
var events = [];
if (data != null) {
$.each(data, function(i, item) {
events.push({
start: item.date,
title: 'Present',
display: 'background'
})
})
}
console.log('events', events);
successCallback(events);
}
})
}
should fix it.
P.S. Really you should also be using the start and end dates provided inside the fetchInfo object to send to your server, and the server should be using them to restrict the events it returns to only those which occur (or overlap) within those dates. That way you don't return a large number of events which mostly never get viewed, instead you only return what's relevant to the date range bein displayed.
I am using fullcalendar v4 (https://fullcalendar.io/) and I am trying to delete events when the event is clicked.
When I click on an event, I have this code to delete the event:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pt',
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
editable: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
},
// CUSTOM CODE DATABASE
events: load.php,
eventClick:function(clickedInfo)
{
if(confirm("Are you sure you want to delete this event?"))
{
var id = clickedInfo.event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success: function() {
alert('Deleted!');
calendar.refetchEvents();
}
})
}
},
});
calendar.render();
});
The event is getting deleted in the database, so the function works fine, but the events don't refresh and the deleted event is still showing in the calendar. It only disappears when I fully refresh the page, which is not ideal.
Any idea why?
It doesn't look like the calendar object is ever being initialized.
I would try changing your event listener as described in the documentation:
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ]
});
calendar.render();
});
Ref. https://fullcalendar.io/docs/initialize-globals
I am assuming you are using script tags, but if you're using a build system (i.e. webpack), then you can try this: https://fullcalendar.io/docs/initialize-es6
For removing an event, I would just try this:
eventClick:function(clickedInfo)
{
if(confirm("Are you sure you want to delete this event?"))
{
var id = clickedInfo.event.id;
$.ajax({
url:"delete.php",
type:"POST",
data:{id:id},
success: function() {
alert('Deleted!');
//calendar.refetchEvents(); // remove this
clickedInfo.event.remove(); // try this instead
}
})
}
},
Ref. https://fullcalendar.io/docs/Event-remove
I'm using FullCalendar in my Symfony project and I want to load events from database and show them in calendar for user.
According to documentation I have create a AJAX request to server on my calendar.html.twig page and store response in localStorage. This is what I done:
$(document).ready(function () {
var events = [];
$.ajax({
url: '{{ path('property.get.reservations') }}',
method: 'post',
data: {
'propertyId': {{ propertyId }}
}, success: function (data) {
console.log('running script within calendar.html.twig')
$.each(data, function (key, value) {
var event = JSON.stringify(value);
events.push(event);
});
localStorage.setItem('events', events);
}
});
});
Next I'm trying to use this storaged data in my calnedarService.js in this way:
$('#calendar').fullCalendar({
selectable: false,
header: {
left: 'prev,next',
center: 'title',
right: ''
},
editable: true,
events: localStorage.getItem('events'),
/* another code */
I get an error in the console:
No route found for "GET /admin/property/edit/1/%7B%22id%22:1,%22start%22:%222016-12-04T00:00:00.000Z%22,%22end%22:%222016-12-07T00:00:00.000Z%22%7D" (from "my_host")
So, for the reasons which I don't know,fullCalendar try to generate route, using parameters, getting from AJAX.
Any help will appreciated
Worked for me, just put this for url :
'admin/property/edit/'
with the id var at the end of the url
I'm using gmap3 for google map on my site.
I locate a marker after click on a button. Everyclick will give me different location depend on what a user chooses.
It goes smooth, however, when the user click on the marker to open the info window, and close it, the ajax call doesn't work. It gives me this error on chrome console, "Uncaught TypeError: Cannot call method 'lat' of undefined" in main.js.
EDIT: it seems I forgot to put autofit{} from my code, and it seems this was the problem. Anyone know how to user autofit in this case?
Here is my code
// create a map
$('#map_canvas').gmap3({
map: {
options: {
center: [-2.899153, 117.722626],
zoom: 4,
mapTypeId: google.maps.MapTypeId.SATELLITE
}
}
});
$('.locate-btn').on('click', function() {
var place_id = $('.place').val();
var address = $('.address').val();
$.ajax({
url: 'ajax.php',
type: 'post',
dataType: 'json',
data: 'place_id=' + place_id + '&address=' + address,
beforeSend: function() {
$('.loading').append("<img src='/images/loading.gif' id='loader' />");
},
success: function(place) {
$('#map_canvas').gmap3({
marker: {
latLng: [place.lat, place.lng],
data: 'nearest hotels<a class="btn btn-danger" href="#">about</a>',
events: {
click: function(marker, event, context) {
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({
get: {
name: 'infowindow'
}
});
if (infowindow) {
infowindow.close();
infowindow.open(map, marker);
infowindow.setContent(context.data);
} else {
$(this).gmap3({
infowindow: {
anchor: marker,
options: {
content: context.data
}
}
});
}
}
}
},
autofit: {}
});
}
});
});
});
Would anyone tell what's wrong?
Thank you.
I am using the Google Maps API v3 to create a map for my application to show viewers on our Webcast. The idea is to add a new marker on the map when a new viewer jumps onto the stream. That is the map is not reloaded, only a new marker is added.
I am trying to accomplish this with an ajax call to a script that gets the current viewers. I have an output to the console to show the results, and the latitude and longitude coordinates are correct, so I don't know why it does not put the marker onto the map.
I am referencing the same class in the page with the map as I am with the ajax script call, so I can do a PHP foreach loop in the middle of the javascript on the page and it puts the marker onto the map! But, of course, I need to use ajax to get new serverside info (new viewers).
js with php foreach() (works)
note: this is how I tested it, it is in $.ajax success function, but has nothing to do with the ajax script
//add markers
function addMarker(stream_id) {
$.ajax({
dataType: 'json',
url: '../../stream/' + stream_id + '/mapmarkers',
success: function(result) {
<?php foreach($stream_viewer_info as $viewer) : ?>
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(<?= $viewer['location_info']['latitude'] . ', ' . $viewer['location_info']['longitude']; ?>),
map: map
}));
<?php endforeach; ?>
},
complete: function() {
setTimeout(function(){addMarker(<?=$stream_id; ?>)}, 1000);
}
});
}
js with js for() (does not work)
//add markers
function addMarker(stream_id) {
$.ajax({
dataType: 'json',
url: '../../stream/' + stream_id + '/mapmarkers',
success: function(result) {
for(var i = 0; i < result.length; i++) {
console.log('result ' + i + ': ' + result[i]['latitude'] + ', ' + result[i]['longitude']);
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(result[i]['latitude'] + ', ' + result[i]['longitude']),
map: map
}));
}
},
complete: function() {
setTimeout(function(){addMarker(<?=$stream_id; ?>)}, 1000);
}
});
}
Try this
markers.push(new google.maps.Marker({
position: new google.maps.LatLng(result[i]['latitude'], result[i]['longitude']),
map: map
}));
You need to separate the arguments by an actual comma, not a string