I'm trying to adjust this script https://google-developers.appspot.com/maps/articles/mvcfun to implement a spatial search using a google fusion table.
First step, the default search, works fine, but when I try to exend the radius search according to the marker position, the problem arise and the dragged marker never get "landed".
My goal is to update the query according to the new center and the new bound.
Thanks to everybody
<script type="text/javascript">
//geolocalizzo
var pos;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(initialize);
}else{
alert('La geo-localizzazione NON è possibile');
}
function initialize(position) {
var tableid ='XXXXXXXXXXXXX'
pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: pos,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var distanceWidget = new DistanceWidget(map);
//recupero info su posizione etc etc
google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
displayInfo(distanceWidget);
extendsearch(distanceWidget);
});
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
displayInfo(distanceWidget);
extendsearch(distanceWidget);
});
var layer = new google.maps.FusionTablesLayer({
//setto gli infowindows
query: {
select: 'latitudine',
from: tableid,
where: 'ST_INTERSECTS(latitudine, CIRCLE(LATLNG('+ pos.lat()+', '+pos.lng()+' ),2000))'
},
//setto gli stili
styles: [{
where: 'id=3',
markerOptions: {
iconName: "blu_blank"
}
},
{
where: 'id=1',
markerOptions: {
iconName: "red_blank"
}
}],
});
layer.setMap(map);
google.maps.event.addListener(layer, 'click', function(e) {
e.infoWindowHtml = '<div class="googft-info-window"'+
'style="font-family: sans-serif; width: 350px; height: 20em; overflow-y: auto;">'+
'<table><tr><td><img src="'+e.row['immagine'].value+'"'+
'style="width: 100px; vertical-align: top; margin-left: .5em" /></td><td><h2 style="color: brown">'+e.row['Titolo'].value+'</h2></td></tr>'+ '<tr><td><h3 style="color: blue">'+e.row['descrizione'].value +'<br></h3></td></tr>' +
//'<tr><td><b>il job è stato creato il :<br></b>'+e.row['dcreazione'].value+'<br></td> <td></td>' +
'<tr><td colspan="2"><b>Candidati entro il :</b> '+e.row['dscadenza'].value+'<br></td> </tr>'+
'<tr><td><h3 style="color: red">Fai la tua offerta</h3></td><td></td><td>'+
'<form action="'+e.row['joblink'].value+'">'+
'<input type="submit" value="Offri"></form></td></tr></table>'+
//'Offri </button> <a href=\''+e.row['joblink'].value+'\' target=\'_blank\'>clicca qui</a></td></tr></table>'+
'</div>';
});
}
/**
* A distance widget that will display a circle that can be resized and will
* provide the radius in km.
*
* @param {google.maps.Map} map The map to attach to.
*
* @constructor
*/
function DistanceWidget(map) {
this.set('map', map);
this.set('position', map.getCenter());
var marker = new google.maps.Marker({
draggable: true,
title: 'Move me!'
});
// Bind the marker map property to the DistanceWidget map property
marker.bindTo('map', this);
// Bind the marker position property to the DistanceWidget position
// property
marker.bindTo('position', this);
//mostro infor di partenza
var infowindow = new google.maps.InfoWindow();
infowindow.setContent('Tu sei qui, spostami per farte altre ricerche');
infowindow.open(map, marker);
// Create a new radius widget
var radiusWidget = new RadiusWidget();
// Bind the radiusWidget map to the DistanceWidget map
radiusWidget.bindTo('map', this);
// Bind the radiusWidget center to the DistanceWidget position
radiusWidget.bindTo('center', this, 'position');
// Bind to the radiusWidgets' distance property
this.bindTo('distance', radiusWidget);
// Bind to the radiusWidgets' bounds property
this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
/**
* A radius widget that add a circle to a map and centers on a marker.
*
* @constructor
*/
function RadiusWidget() {
var circle = new google.maps.Circle({
strokeWeight: 1,
clickable:false
});
// Set the distance property value, default to 50km.
this.set('distance', 2);
// Bind the RadiusWidget bounds property to the circle bounds property.
this.bindTo('bounds', circle);
// Bind the circle center to the RadiusWidget center property
circle.bindTo('center', this);
// Bind the circle map to the RadiusWidget map
circle.bindTo('map', this);
// Bind the circle radius property to the RadiusWidget radius property
circle.bindTo('radius', this);
// Add the sizer marker
this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
/**
* Update the radius when the distance has changed.
*/
RadiusWidget.prototype.distance_changed = function() {
this.set('radius', this.get('distance') * 1000);
};
/**
* Add the sizer marker to the map.
*
* @private
*/
RadiusWidget.prototype.addSizer_ = function() {
var sizer = new google.maps.Marker({
draggable: true,
title: 'Drag me!',
});
sizer.bindTo('map', this);
sizer.bindTo('position', this, 'sizer_position');
var me = this;
google.maps.event.addListener(sizer, 'drag', function() {
// Set the circle distance (radius)
me.setDistance();
});
};
/**
* Update the center of the circle and position the sizer back on the line.
*
* Position is bound to the DistanceWidget so this is expected to change when
* the position of the distance widget is changed.
*/
RadiusWidget.prototype.center_changed = function() {
var bounds = this.get('bounds');
// Bounds might not always be set so check that it exists first.
if (bounds) {
var lng = bounds.getNorthEast().lng();
// Put the sizer at center, right on the circle.
var position = new google.maps.LatLng(this.get('center').lat(), lng);
this.set('sizer_position', position);
}
};
/**
* Calculates the distance between two latlng locations in km.
* @see http://www.movable-type.co.uk/scripts/latlong.html
*
* @param {google.maps.LatLng} p1 The first lat lng point.
* @param {google.maps.LatLng} p2 The second lat lng point.
* @return {number} The distance between the two points in km.
* @private
*/
RadiusWidget.prototype.distanceBetweenPoints_ = function(p1, p2) {
if (!p1 || !p2) {
return 0;
}
var R = 6371; // Radius of the Earth in km
var dLat = (p2.lat() - p1.lat()) * Math.PI / 180;
var dLon = (p2.lng() - p1.lng()) * Math.PI / 180;
var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(p1.lat() * Math.PI / 180) * Math.cos(p2.lat() * Math.PI / 180) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return d;
};
/**
* Set the distance of the circle based on the position of the sizer.
*/
RadiusWidget.prototype.setDistance = function() {
// As the sizer is being dragged, its position changes. Because the
// RadiusWidget's sizer_position is bound to the sizer's position, it will
// change as well.
var pos = this.get('sizer_position');
var center = this.get('center');
var distance = this.distanceBetweenPoints_(center, pos);
// Set the distance property for any objects that are bound to it
this.set('distance', distance);
};
//display info
function displayInfo(widget) {
var info = document.getElementById('info');
info.innerHTML = 'Position: ' + widget.get('position') + ', distance: ' +
widget.get('distance');
}
function extendsearch(widget){
layer.setOptions({
query: {
select: 'latitudine',
from: tableid,
where: 'ST_INTERSECTS(latitudine, CIRCLE(LATLNG('+ widget.get('position')+' ),'+ widget.get('distance')+'))'
},
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
https://stackoverflow.com/questions/22748633
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian