470 lines
12 KiB
Plaintext
470 lines
12 KiB
Plaintext
|
|
|
|
|
|
|
|
:javascript
|
|
var map;
|
|
var marker;
|
|
var sizer;
|
|
var radiusWidget;
|
|
|
|
|
|
|
|
:javascript
|
|
function init_radius_form(){
|
|
|
|
if($("#with_radius_check").is(':checked')){
|
|
|
|
$(".select_radius").removeClass("active");
|
|
$("#with-radius-label").addClass("active");
|
|
$("#map-canvas").show();
|
|
|
|
google.maps.event.trigger(map,'resize');
|
|
marker.setPosition(center );
|
|
map.panTo(center);
|
|
$(".annonces_sidebar").removeClass("map_blur");
|
|
update_radius();
|
|
map.fitBounds(radiusWidget.get('bounds'));
|
|
//alert(radiusWidget.get('bounds'));
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
else{
|
|
//$(".select_radius").removeClass("active");
|
|
|
|
$("#no-radius-label").addClass("active");
|
|
$("#map-canvas").show();
|
|
map.fitBounds(radiusWidget.get('bounds'));
|
|
$(".annonces_sidebar").addClass("map_blur");
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
function update_bounds(){
|
|
map.fitBounds(radiusWidget.get('bounds'));
|
|
|
|
}
|
|
|
|
function update_radius(){
|
|
distance = $("#radius_value_field").val();
|
|
$("#place_dist_field").val(distance);
|
|
radiusWidget.set('distance', distance);
|
|
radiusWidget.center_changed();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:javascript
|
|
var placeSearch, autocomplete;
|
|
|
|
|
|
|
|
|
|
function initAutocomplete(country) {
|
|
autocomplete = new google.maps.places.Autocomplete(
|
|
(document.getElementById('place')),
|
|
{
|
|
types: ['(regions)'],
|
|
componentRestrictions: {}
|
|
}
|
|
);
|
|
autocomplete.addListener('place_changed', fillInAddress);
|
|
$("#country_selectors .btn").removeClass("btn-primary");
|
|
|
|
}
|
|
|
|
|
|
function change_country(country) {
|
|
initAutocomplete(country);
|
|
reset_geocode();
|
|
|
|
}
|
|
|
|
|
|
function calcDistance(p1, p2){
|
|
return (google.maps.geometry.spherical.computeDistanceBetween(p1, p2));
|
|
}
|
|
|
|
function set_address(address){
|
|
|
|
var geocoder = new google.maps.Geocoder();
|
|
|
|
geocoder.geocode({'address': address}, function(results, status) {
|
|
|
|
fillInAddress(results[0]);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
function fillInAddress(place) {
|
|
if (typeof place == 'undefined'){
|
|
var place = autocomplete.getPlace();
|
|
|
|
}
|
|
else{
|
|
|
|
|
|
}
|
|
//alert(place)
|
|
var result = {}
|
|
result["type"] = place.types[0]
|
|
|
|
result["lat"] = place.geometry.location.lat()
|
|
result["lng"] = place.geometry.location.lng()
|
|
|
|
console.log(result);
|
|
console.log(place.address_components);
|
|
var components = place.address_components;
|
|
for (var i = 0, component; component = components[i]; i++) {
|
|
result[component.types[0]] = component['long_name'];
|
|
result[component.types[0]+"_short"] = component['short_name'];
|
|
}
|
|
|
|
center = new google.maps.LatLng(place.geometry.location.lat(), place.geometry.location.lng());
|
|
|
|
|
|
south_west = place.geometry.viewport.getSouthWest();
|
|
north_east = place.geometry.viewport.getNorthEast();
|
|
|
|
north_west = new google.maps.LatLng(north_east.lat(), south_west.lng());
|
|
south_east = new google.maps.LatLng(south_west.lat(), north_east.lng());
|
|
|
|
if (typeof radiusWidget != 'undefined'){
|
|
distance = Math.round(calcDistance(place.geometry.viewport.getCenter(), place.geometry.viewport.getSouthWest()));
|
|
$("#with_radius_check").prop("checked", true);
|
|
|
|
marker.setPosition(center );
|
|
radiusWidget.set('distance', (distance/1000));
|
|
|
|
radiusWidget.center_changed();
|
|
|
|
google.maps.event.trigger(sizer, 'drag');
|
|
|
|
$("#search_map").show();
|
|
//google.maps.event.trigger(map,'resize');
|
|
|
|
map.panTo(center);
|
|
map.fitBounds(radiusWidget.get('bounds'));
|
|
if (typeof radiusWidget != 'undefined' & typeof home == 'undefined'){
|
|
$('#search_form form').submit();
|
|
}
|
|
|
|
}
|
|
|
|
|
|
//console.log(result);
|
|
//$("#lat").append(place.geometry.location.lat()+"<br>")
|
|
//$("#g_longitude").val(place.geometry.location.lng())
|
|
|
|
//$.ajax({ url: '/public/cities/search.js',data: {place : $(this).val()}});
|
|
//$.ajax({url : '/public/cities/search.js', data : {place_type : result["type"], lat : place.geometry.location.lat(), lng : place.geometry.location.lng()}});
|
|
|
|
|
|
}
|
|
|
|
function reset_geocode(){
|
|
|
|
$("#g_text_visu").html("");
|
|
$("#geocode input").val('');
|
|
|
|
|
|
}
|
|
|
|
:javascript
|
|
$(document).ready(function() {
|
|
$("#place").keydown(function() {
|
|
if(event.keyCode == 13) {
|
|
event.preventDefault();
|
|
return false;
|
|
}
|
|
});
|
|
|
|
$("#place").change(function() {
|
|
if ($("#place").val() == ""){
|
|
$("#search_form form").submit();
|
|
}
|
|
reset_geocode();
|
|
event.stopPropagation();
|
|
});
|
|
|
|
});
|
|
|
|
:javascript
|
|
initAutocomplete("fr");
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:javascript
|
|
|
|
function DistanceWidget(map) {
|
|
|
|
this.set('map', map);
|
|
this.set('position', map.getCenter());
|
|
|
|
marker = new google.maps.Marker({
|
|
draggable: true,
|
|
title: 'Centre de la recherche'
|
|
});
|
|
|
|
// 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);
|
|
|
|
// Create a new radius widget
|
|
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({
|
|
|
|
strokeColor: "#FF0000",
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 1,
|
|
fillColor: "#FF0000",
|
|
fillOpacity: 0.1
|
|
|
|
});
|
|
|
|
// Set the distance property value, default to 10km.
|
|
this.set('distance', 10);
|
|
|
|
// 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() {
|
|
|
|
|
|
|
|
sizer = new google.maps.Marker({
|
|
draggable: true,
|
|
title: 'Rayon',
|
|
icon: {
|
|
path: google.maps.SymbolPath.CIRCLE,
|
|
scale: 7,
|
|
strokeColor: "#FF0000",
|
|
strokeOpacity: 0.8,
|
|
strokeWeight: 2,
|
|
fillColor: "#FFFFFF",
|
|
fillOpacity: 1
|
|
}
|
|
});
|
|
|
|
sizer.bindTo('map', this);
|
|
sizer.bindTo('position', this, 'sizer_position');
|
|
|
|
var me = this;
|
|
google.maps.event.addListener(sizer, 'drag', 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 min = 0.5;
|
|
var max = 1500000;
|
|
var pos = me.get('sizer_position');
|
|
var center = me.get('center');
|
|
var distance = google.maps.geometry.spherical.computeDistanceBetween(center, pos) / 1000;
|
|
if (distance < min) {
|
|
me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, min * 1000, google.maps.geometry.spherical.computeHeading(center, pos)));
|
|
} else if (distance > max) {
|
|
me.set('sizer_position', google.maps.geometry.spherical.computeOffset(center, max * 1000, google.maps.geometry.spherical.computeHeading(center, pos)));
|
|
}
|
|
// Set the circle distance (radius)
|
|
$("#radius_value_field").val(Math.round(distance));
|
|
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);
|
|
}
|
|
};
|
|
|
|
|
|
/**
|
|
* 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 = google.maps.geometry.spherical.computeDistanceBetween(center, pos)/1000;
|
|
|
|
// Set the distance property for any objects that are bound to it
|
|
this.set('distance', distance);
|
|
};
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
|
|
|
|
|
|
//radiusWidget.setDistance();
|
|
//google.maps.event.trigger(sizer, 'drag');
|
|
|
|
}
|
|
|
|
function displayInfo(widget) {
|
|
//var info = document.getElementById('info');
|
|
//info.innerHTML = 'Position: ' + widget.get('position') + ', distance: ' +
|
|
// widget.get('distance');
|
|
//alert(widget.get('distance'));
|
|
|
|
//alert(widget.get('position'));
|
|
if(typeof widget.get('position') !== "undefined"){
|
|
|
|
$("#place_lat_field").val(widget.get('position').lat());
|
|
$("#place_lng_field").val(widget.get('position').lng());
|
|
$("#place_dist_field").val(Math.round(widget.get('distance')));
|
|
|
|
}
|
|
//$("#radius_value_field").val(Math.round(widget.get('distance')));
|
|
|
|
}
|
|
|
|
google.maps.event.addDomListener(window, 'load', init);
|
|
|
|
-if params[:place] and params[:place] != "" and params[:place_lat] and params[:place_lng]
|
|
%script
|
|
="var defaut_center = {lat: #{params[:place_lat]}, lng: #{params[:place_lng]}} "
|
|
="var defaut_distance = #{params[:place_dist]}; "
|
|
-else
|
|
:javascript
|
|
var defaut_center = {lat: -30, lng: 150} ;
|
|
var defaut_distance = 12;
|
|
|
|
:javascript
|
|
var isDraggable = !('ontouchstart' in document.documentElement);
|
|
var mapDiv = document.getElementById('map-canvas');
|
|
map = new google.maps.Map(mapDiv, {
|
|
center: defaut_center,
|
|
draggable: isDraggable,
|
|
zoom: 7,
|
|
scrollwheel: false,
|
|
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
navigationControl: true,
|
|
mapTypeControl: false,
|
|
streetViewControl: false
|
|
});
|
|
|
|
|
|
:javascript
|
|
var distanceWidget = new DistanceWidget(map);
|
|
|
|
|
|
google.maps.event.addListener(sizer, 'dragend', function() {
|
|
update_bounds();
|
|
$("#search_form form").submit();
|
|
});
|
|
|
|
google.maps.event.addListener(marker, 'dragend', function() {
|
|
update_bounds();
|
|
$("#search_form form").submit();
|
|
});
|
|
|
|
google.maps.event.addListener(distanceWidget, 'distance_changed', function() {
|
|
|
|
displayInfo(distanceWidget);
|
|
});
|
|
|
|
google.maps.event.addListener(distanceWidget, 'position_changed', function() {
|
|
displayInfo(distanceWidget);
|
|
});
|
|
|
|
radiusWidget.set('distance', default_distance);
|
|
|
|
|
|
radiusWidget.center_changed();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
:javascript
|
|
init_radius_form();
|