Upon clicking a button, an AJAX response is called to output JSON based on a search query. I would like to use the variable all_locations from the AJAX response, to output into the Google map markers. Not too sure how this can be done. I researched into using async as false but to no success.
Form
<form id="filter">
<span class="ek-search-address col-xs-8">
<label for="address">Location</label>
<input id="address" name="property_location" value="New York" placeholder="Input Address" type="text"/>
</span>
<span class="ek-search-radius live-search col-xs">
<select id="radius_km">
<option value=1>1km</option>
<option value=2>2km</option>
<option value=5>5km</option>
<option value=30>30km</option>
</select>
</span>
<button onClick="showCloseLocations()">Search</button>
<input type="hidden" name="action" value="ek_search">
</form>
<div id="map_canvas">
AJAX call
jQuery(function($){
$('#filter').submit(function(){
var filter = $('#filter');
var ajaxurl = '<?php echo admin_url("admin-ajax.php", null); ?>';
data = { action: "ek_search"};
var all_locations = $.ajax({
url: ajaxurl,
data:data,
async:false,
type: 'POST', // POST
dataType: 'json',
success: function(response) {
console.log(response);
}
});
return false;
});
});
map.js
jQuery(function($) {
var map = null;
var radius_circle;
var markers_on_map = [];
var geocoder;
var infowindow;
new google.maps.places.Autocomplete(
(document.getElementById('address')), {
types: ['geocode']
});
//initialize map on document ready
$(document).ready(function() {
var latlng = new google.maps.LatLng(50.927978, -5.408908);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
geocoder = new google.maps.Geocoder();
google.maps.event.addListener(map, 'click', function() {
if (infowindow) {
infowindow.setMap(null);
infowindow = null;
}
});
});
function showCloseLocations() {
var i;
var radius_km = $('#radius_km').val();
var address = $('#address').val();
//remove all radii and markers from map before displaying new ones
if (radius_circle) {
radius_circle.setMap(null);
radius_circle = null;
}
for (i = 0; i < markers_on_map.length; i++) {
if (markers_on_map[i]) {
markers_on_map[i].setMap(null);
markers_on_map[i] = null;
}
}
if (geocoder) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
var address_lat_lng = results[0].geometry.location;
radius_circle = new google.maps.Circle({
center: address_lat_lng,
radius: radius_km * 1000,
clickable: false,
map: map
});
if (radius_circle) map.fitBounds(radius_circle.getBounds());
for (var j = 0; j < all_locations.length; j++) {
(function(location) {
var marker_lat_lng = new google.maps.LatLng(location.lat, location.lng);
var distance_from_location = google.maps.geometry.spherical.computeDistanceBetween(address_lat_lng, marker_lat_lng); //distance in meters between your location and the marker
if (distance_from_location <= radius_km * 1000) {
var new_marker = new google.maps.Marker({
position: marker_lat_lng,
map: map,
title: location.name
});
google.maps.event.addListener(new_marker, 'click', function() {
if (infowindow) {
infowindow.setMap(null);
infowindow = null;
}
infowindow = new google.maps.InfoWindow({
content: '<div style="color:red">' + location.name + '</div>' + " is " + distance_from_location + " meters from my location",
size: new google.maps.Size(150, 50),
pixelOffset: new google.maps.Size(0, -30),
position: marker_lat_lng,
map: map
});
});
markers_on_map.push(new_marker);
}
})(all_locations[j]);
}
} else {
alert("No results found while geocoding!");
}
} else {
alert("Geocode was not successful: " + status);
}
});
}
}
});
Ajax is an asynchronous process, so you need to send all locations as an parameter inside success callback function
Try this:
Ajax:
jQuery(function($){
$('#filter').submit(function(e){
e.preventDefault();//preventing form to submit with page reload
var filter = $('#filter');
var ajaxurl = '<?php echo admin_url("admin-ajax.php", null); ?>';
data = { action: "ek_search"};
$.ajax({
url: ajaxurl,
data:data,
async:false,
type: 'POST', // POST
dataType: 'json',
success: function(response) {
console.log(response);
showCloseLocations(response.all_locations);
}
});
return false;
});
});
Update function showCloseLocations to accept all_locations as parameter
function showCloseLocations(all_locations) {
//show location function code here
}
Question: I would like to know how you are submitting your form with #filter? because there is no submit type button in your html, make sure to change type of search button to submit instead of button so that first form can submit with search input to get all locations
<button type="submit">Search</button>
Related
I am trying to populate multiple markers via ajax request on 5 sec interval. Every thing is working fine, but markers blinks on each interval call.
I am clearing all markers & regenerating again on each interval call. I just want to re-generate markers without blinking.
Also, it's possible that ajax request can return different result set on each interval call.
Following is the code:
var map;
var places;
var markers = [];
var iw_map;
var markers_map = new Array();
function initialize() {
geocoder = new google.maps.Geocoder();
var latlngCenter = new google.maps.LatLng(25.1999721, 66.8354386);
iw_map = new google.maps.InfoWindow();
var mapOptions = {
center: latlngCenter,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
fetchPlaces();
fitMapToBounds_map();
}
function fetchPlaces(cityId = null, hubId = null, riderId = null) {
clearMarkers();
$.ajax({
url: '{{ route('get-markers') }}',
method:'POST',
data: {'city_id': cityId, hub_id: hubId, rider_id: riderId},
dataType: 'json',
cache: false,
success: function(data) {
// console.log(markers);
var markerz = data.markers;
// clearMarkers();
$.each(markerz, function (i, dt) {
var marker_icon = {url: dt.icon};
var position = new google.maps.LatLng(dt.lat,dt.lng);
var marker = new google.maps.Marker({
map: map,
position: position,
icon: marker_icon
});
// newcoordinate = new google.maps.LatLng(dt.lat,dt.lng);
google.maps.event.addListener(marker, "click", function(event) {
$.ajax({
url: '{{ route('get-marker-info') }}',
method:'POST',
data: JSON.parse(dt.params),
success: function(data) {
iw_map.setContent(data.infoBox);
iw_map.open(map, marker);
}
});
});
markers.push(marker.getPosition());
markers_map.push(marker);
});
// fitMapToBounds_map();
}
});
}
function fitMapToBounds_map() {
var bounds = new google.maps.LatLngBounds();
if (markers.length>0) {
for (var i=0; i<markers.length; i++) {
console.log(markers[i]);
bounds.extend(markers[i]);
}
map.fitBounds(bounds);
}
}
function clearMarkers() {
for (var i = 0; i < markers_map.length; i++) {
markers_map[i].setMap(null);
}
markers_map = [];
}
function loadScript_map() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&v=3&libraries=places&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript_map;
setInterval(fetchPlaces, 5000);
This is untested code so it might need a few adjustments.
I renamed your variables with meaningful names and changed the logic to first add the new markers, then remove the old markers.
When you get your markers with AJAX, first empty the new_markers array, then plot the markers on the map, and add them to the new_markers array. Then clear the old markers from the map (markers array). The first time, this array will be empty so nothing will happen. Copy new_markers array to markers array. Repeat.
Here is the code:
var map;
var places;
var markers_positions = [];
var markers = [];
var new_markers = [];
var iw_map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlngCenter = new google.maps.LatLng(25.1999721, 66.8354386);
iw_map = new google.maps.InfoWindow();
var mapOptions = {
center: latlngCenter,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
fetchPlaces();
fitMapToBounds_map();
}
function fetchPlaces(cityId = null, hubId = null, riderId = null) {
new_markers = [];
$.ajax({
url: '{{ route('get-markers') }}',
method: 'POST',
data: {
city_id: cityId,
hub_id: hubId,
rider_id: riderId
},
dataType: 'json',
cache: false,
success: function(data) {
$.each(data.markers, function(i, dt) {
var marker_icon = {
url: dt.icon
};
var position = new google.maps.LatLng(dt.lat, dt.lng);
var marker = new google.maps.Marker({
map: map,
position: position,
icon: marker_icon
});
google.maps.event.addListener(marker, "click", function(event) {
$.ajax({
url: '{{ route('get-marker-info') }}',
method: 'POST',
data: JSON.parse(dt.params),
success: function(data) {
iw_map.setContent(data.infoBox);
iw_map.open(map, marker);
}
});
});
markers_positions.push(marker.getPosition());
new_markers.push(marker);
clearMarkers();
});
}
});
}
function fitMapToBounds_map() {
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers_positions.length; i++) {
console.log(markers_positions[i]);
bounds.extend(markers_positions[i]);
}
map.fitBounds(bounds);
}
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers = new_markers;
}
function loadScript_map() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false&v=3&libraries=places&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript_map;
setInterval(fetchPlaces, 5000);
Controller Action :
public ActionResult googlemap()
{
return View();
}
It will call the googlemap.cshtml View.
So Ajax Call and JavaScript code in googlemap.cshtml View :
#{
ViewBag.Title = "Google Map";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCM7G5ruvunb0K7qxm6jb1TssJUwROqs-g" type="text/javascript"></script>
<script type="text/javascript">
var myMarkers = [];
window.onload = function () {
$.ajax({
async: false,
type: "POST",
dataType: "json",
url: '#Url.Action("googlemapfindlatlon", "Home")',
data: '{}',
success: function (data) {
$.each(data, function (i, v) {
myMarkers.push(v);
});
var mapOptions = {
center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//alert(myMarkers[0].Latitude)
//alert(myMarkers[0].Langitude)
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < myMarkers.length; i++) {
var data = myMarkers[i]
var myLatlng = new google.maps.LatLng(data.Latitude, data.Langitude);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.Address);
infoWindow.open(map, marker);
});
})(marker, data);
}
//map.setCenter(latlngbounds.getCenter());
//map.fitBounds(latlngbounds);
}
});
//init google map
}
</script>
<div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px;
height: 250px; background-color: #FAFAFA; margin-top: 0px;">
</div>
Action in Controller :
public JsonResult googlemapfindlatlon()
{
Models.Vehicle_Tracking_SystemEntities entities = new Vehicle_Tracking_SystemEntities();
var latlon = entities.LatLangs.ToList();
//var latlon = entities.LatLangs.OrderByDescending(x => x.Id).Take(1).ToList();
return Json(latlon, JsonRequestBehavior.AllowGet);
}
So here I wants that my Ajax call is done repeatedly after each 3 seconds automatically to the JsonResult action in controller , and controller get the latest values and send back to the Ajax.
var myMarkers = [];
window.onload = function () {
DisplayMap();
}
function DisplayMap() {
$.ajax({
async: false,
type: "POST",
dataType: "json",
url: '#Url.Action("googlemapfindlatlon", "Home")',
data: '{}',
success: function (data) {
$.each(data, function (i, v) {
myMarkers.push(v);
});
var mapOptions = {
center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//alert(myMarkers[0].Latitude)
//alert(myMarkers[0].Langitude)
var infoWindow = new google.maps.InfoWindow();
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lat_lng = new Array();
var latlngbounds = new google.maps.LatLngBounds();
for (i = 0; i < myMarkers.length; i++) {
var data = myMarkers[i]
var myLatlng = new google.maps.LatLng(data.Latitude, data.Langitude);
lat_lng.push(myLatlng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
latlngbounds.extend(marker.position);
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.Address);
infoWindow.open(map, marker);
});
})(marker, data);
}
//map.setCenter(latlngbounds.getCenter());
//map.fitBounds(latlngbounds);
}
});
//init google map
}
setTimeout(function () {
DisplayMap();
}, 3000);// JavaScript source code
Try this:
var searchActiveTVInterval = null;
$(document).ready(function () {
clearInterval(searchActiveTVInterval);
searchActiveTVInterval = setInterval("SearchActiveTV()", 3000);
});
function SearchActiveTV() {
console.log(1);
//your AJAX Call
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
window.setInterval(function(){
/// call your ajax function here
}, 3000);
I have an input box where user enters a city name and the updateMap function executes. It geolocates and maps the city with a marker. This then calls another function called updateTemp to update the marker title with the current temperature. I use ajax to get the temperature. I am very new to Javascript and was hoping to get a reason why the below code doesn't work (for educational purposes) and some solution.
<input id="cityInput" class="controls" type="text" placeholder="Search Box">
<input name="buttonExecute" onclick="updateMap(document.getElementById('cityInput'))" type="button" value="Execute" />
<div id="map"></div>
<script>
function updateMap(obj) {
var geo = new google.maps.Geocoder();
geo.geocode({'address':obj.value},function(results,status){
if(status == google.maps.GeocoderStatus.OK){
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat,lng);
var mapOptions = { center: latlng, zoom: 6,vmapTypeId: google.maps.MapTypeId.ROADMAP};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement,mapOptions);
var latlngString = lat.toString() +','+lng.toString();
var URL = "https://api.forecast.io/forecast/APIKEY/"+latlngString;
var marker = new google.maps.Marker({position:latlng, map:map});
updateTemp(URL,marker)
}
});
}
function updateTemp(URL,marker){
$.ajax({
url: URL,
jsonp: "callback",
dataType: "jsonp",
success: function( response) {
var t = response['currently']['temperature'];
var msg = 'CURRENT TEMPERATURE: ' + t + 'F';
marker.setTitle(msg);
},
async:false
});
}
</script>
this works for me when I put my key in. Note the ajax change.
function updateMap(obj) {
var geo = new google.maps.Geocoder();
geo.geocode({'address':obj.value},function(results,status){
if(status == google.maps.GeocoderStatus.OK){
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat,lng);
var mapOptions = { center: latlng, zoom: 6,vmapTypeId: google.maps.MapTypeId.ROADMAP};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement,mapOptions);
var latlngString = lat.toString() +','+lng.toString();
var URL = "https://api.forecast.io/forecast/68a746738dddfee5ac67c77bcb97e59b/"+latlngString;
marker = new google.maps.Marker({position:latlng, map:map});
updateTemp(URL,marker)
}
});
}
function updateTemp(URL,marker){
$.ajax({
url: URL,
type: "GET",
dataType: "jsonp",
success: function(response) {
var t = response['currently']['temperature'];
var msg = 'CURRENT TEMPERATURE: ' + t + 'F';
marker.setTitle(msg);
}
});
}
Your marker variable is local to the geocoder callback function. Make it global (or local to the updateMap function).
proof of concept fiddle
(simulates the ajax call with a call to setTimeout, give it 10 seconds to update the title of the marker)
code snippet:
var marker;
function updateMap(obj) {
var geo = new google.maps.Geocoder();
geo.geocode({
'address': obj.value
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat();
var lng = results[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
center: latlng,
zoom: 6,
vmapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapElement = document.getElementById('map');
var map = new google.maps.Map(mapElement, mapOptions);
var latlngString = lat.toString() + ',' + lng.toString();
var URL = "https://api.forecast.io/forecast/APIKEY/" + latlngString;
marker = new google.maps.Marker({
position: latlng,
map: map
});
updateTemp(URL, marker)
}
});
}
function updateTemp(URL, marker) {
/* $.ajax({
url: URL,
jsonp: "callback",
dataType: "jsonp",
success: function(response) {
var t = response['currently']['temperature'];
var msg = 'CURRENT TEMPERATURE: ' + t + 'F';
marker.setTitle(msg);
},
async: false
}); */
setTimeout(function() {
marker.setTitle("90 degrees");
}, 10000);
}
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="cityInput" class="controls" type="text" placeholder="Search Box">
<input name="buttonExecute" onclick="updateMap(document.getElementById('cityInput'))" type="button" value="Execute" />
<div id="map"></div>
I have load the default google map with markers and have to remove the previous markers with the current one. I have used googolle mpa and initiazlie the function before the page load
Please check with my below code and adivse on me how to achieve this.
$(document).ready(function() {
var markers = [];
//var markers = [];
var track_click = 0; //track user click on "load more" button, righ now it is 0 click
var total_pages = 4;
var page;
$.ajax({
url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
type: "POST",
dataType: 'json',
beforeSend: function(){
$('#loader-icon').show();
},
complete: function(){
$('#loader-icon').hide();
},
success: function (result) {
//alert("hi");
$('#jobsfound').html(result.search_results);
var list = result.map_array;
var image = "<?php echo base_url(); ?>assets/images/pros_marker.png";
$.each(list, function(index, value) {
var newLatLng = new google.maps.LatLng(list[index].latitude, list[index].longitude);
console.log(list[index].latitude, list[index].longitude);
markers [index] = new google.maps.Marker({
map: map
});
markers[index].setPosition(newLatLng);
//markers.push(marker);
})
//initialize();
}
})
$.ajax({
url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
type: "POST",
data:'location_checkboxes='+ values + '&budget_value=' + budget_value +
'&job_dates=' + job_date + '&page='+track_click,
dataType: 'json',
beforeSend: function(){
$('#loader-icon').show();
},
complete: function(){
$('#loader-icon').hide();
},
success: function (result) {
$('#jobsfound').html(result.search_results);
//alert($("#test").text());
//initialize();
var list = result.map_array;
var image = "<?php echo base_url(); ?>assets/images/pros_marker.png";
$.each(list, function(index, value) {
var lat = parseFloat(value.latitude);
var lng = parseFloat(value.longitude);
var newLatLng = new google.maps.LatLng(list[index].latitude, list[index].longitude);
//markers[index] = new google.maps.Marker({
// position: newLatLng,
// icon:image,
// map: map,
// draggable: false
// });
markers [index] = new google.maps.Marker({
map: map
});
markers[index].setPosition(newLatLng);
//markers.push(marker);
})
}
})
google.maps.event.addDomListener(window, 'load', initialize);
set the markers as global array before initialize function (please refer http://www.w3schools.com/googleapi/google_maps_basic.asp)
var markers = [];
$(document).ready(function() {
//var markers = [];
//var markers = [];
var track_click = 0; //track user click on "load more" button, righ now it is 0 click
var total_pages = 4;
var page;
$.ajax({
url:"<?php echo base_url('search_jobs/fetch_jobs')?>",
type: "POST",
dataType: 'json',
beforeSend: function(){
$('#loader-icon').show();
},
complete: function(){
$('#loader-icon').hide();
},
success: function (result) {
//alert("hi");
$('#jobsfound').html(result.search_results);
var list = result.map_array;
var image = "<?php echo base_url(); ?>assets/images/pros_marker.png";
$.each(list, function(index, value) {
var contentString = '<div id="content">'+list[index].title+'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var newLatLng = new google.maps.LatLng(list[index].latitude, list[index].longitude);
console.log(list[index].latitude, list[index].longitude);
markers [index] = new google.maps.Marker({
icon:image,
map: map
});
markers[index].setPosition(newLatLng);
markers[index].addListener('mouseover', function() {
infowindow.open(map, marker);
});
//markers.push(marker);
})
//initialize();
}
})
});
I try to show on a google map markers that are near the current positon. If the map is dragged it will update the center coordinates and recalculate the markers around that center. The initial markers around the current users positon are showing correctly but when i drag the map they stay all the time the same. The update and the POST both is happening (my guess that the POST is not finished before the markers reload, so the old ones stay). The sourrounding markers are stored in a session variable.
Controller showNearbyUsers method:
/**
* Shows the users near the current one
*
* #return void
*/
public static function showNearbyUsers($centerlat,$centerlng)
{
try {
// Delete the session variable
if (Session::has('nearbies'))
{
Session::forget('nearbies');
}
// Define max, min for lat and lng
$centerlatlow = $centerlat-0.25;
$centerlathigh = $centerlat+0.25;
$centerlnglow = $centerlng-0.25;
$centerlnghigh = $centerlng+0.25;
$nearbies = DB::table('positions')->join('users', 'users.id', '=', 'positions.users_id')
->where('users_id', '!=', Auth::id())
->whereBetween('lat', array($centerlatlow, $centerlathigh))
->whereBetween('lng', array($centerlnglow, $centerlnghigh))
->select('positions.*', 'users.name', 'users.level')
->get();
if ($nearbies) {
return Session::put('nearbies', $nearbies);
}
} catch(\Exception $e) {
Session::flash('message', 'An error occured with your localization. Enable GPS and refresh.');
Session::flash('alert-class', 'alert-danger');
}
}
View Script
<script>
// Auto adjust map div
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 220; // Calculate the top offset
$('#map_canvas').css('height', (h - offsetTop));
}).resize();
// Setup token security
$.ajaxSetup({
headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
});
// Attributes
var map;
var geocoder;
var markers = Array(); // Contains x,y
var users = Array(); // Contains whole user info
var current = Array();
var infoWindows = Array();
var mapCenter;
// Test initialize users array
//users = [['Brugg',47.47963,8.18465],['Aarau',47.39340,8.04312],['Baden',47.47377,8.30647]];
// Initialize the map with logged in user
function initialize() {
geocoder = new google.maps.Geocoder();
getLocation();
}
// Set nearby user markers
function setMarkers(list) {
for(var i=0; i<list[0].length; i++){
var element = (list[0])[i];
var nearbyLatLng = new google.maps.LatLng(element['lat'], element['lng']);
console.log((list[0])[i]);
markers[i] = new google.maps.Marker({
position: nearbyLatLng,
map: map,
title: element['name'],
infoWindowIndex : i
});
infoWindows[i] = new google.maps.InfoWindow({
content : element['name']
});
google.maps.event.addListener(markers[i], 'click',
function(event)
{
infoWindows[this.infoWindowIndex].open(map, this);
}
);
}
}
// Delete nearby user markers
function deleteMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}
// Map dragging listener. Updates the nearby users markers
function mapDragListener() {
google.maps.event.addListener(map, 'dragend', function() {
deleteMarkers();
mapCenter = map.getCenter();
$.ajax({
type: "POST",
url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(),
async: false
});
#if(Session::has('nearbies'))
<?php $test = Session::get('nearbies'); ?>
users = [<?php echo json_encode($test); ?>];
console.log(users);
#endif
setMarkers(users);
});
}
// Map zoom listener. Updates the nearby users markers
function mapZoomListener() {
}
// Get current user location
function getLocation() {
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
} else {
alert("Geolocation is not supported by this browser.");
}
}
// If success in finding current position
function geoSuccess(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
// Send to geocoordinates.php and save to DB
$.post("updateme/"+lat+"/"+lng);
mainMapCalc(lat, lng);
}
// If no success in finding current position
function geoError() {
alert("Please enable Geo-Location and Refresh the Website.");
}
// Set the logged in users and build up the environment
function mainMapCalc(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
if(results[1]) {
//formatted address
var address = results[0].formatted_address;
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var myOptions = {
zoom: 18,
center: results[0].geometry.location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
mapCenter = map.getCenter();
$.ajax({
type: "POST",
url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(),
async: false
});
<?php $test = Session::get('nearbies'); ?>
users = [<?php echo json_encode($test); ?>];
setMarkers(users); // Set initial nearby markers
mapDragListener(); // Register Listener
//mapZoomListener(); // TODO: Register Listener
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
} else {
alert("Geocoder Error// No results found");
}
} else {
alert("Geocoder Error// Failed due to: " + status);
}
});
}
// Show Map
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Where is here the problem?
Thanks in advance
It looks like the problem is that you are sending out the ajax request, but you are not doing anything with the returned data. Try changing
$.ajax({
type: "POST",
url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(),
async: false
});
to
$.ajax({
type: "POST",
url: "updatenearbies/"+mapCenter.lat()+"/"+mapCenter.lng(),
success: function(data, textStatus, jqXHR) {
// request succeeded
// data - response from server
},
error: function (jqXHR, textStatus, errorThrown){
// the request failed
}
});
Also note that async: false is deprecated: https://api.jquery.com/jQuery.ajax/#options, so you should use callbacks as shown above.