Roo.bootstrap.LocationPicker = function(config){
Roo.bootstrap.LocationPicker.superclass.constructor.call(this, config);
this.addEvents({
initial : true,
positionchanged : true,
resize : true,
show : true,
hide : true,
mapClick : true,
mapRightClick : true,
markerClick : true,
markerRightClick : true,
OverlayViewDraw : true,
OverlayViewOnAdd : true,
OverlayViewOnRemove : true,
OverlayViewShow : true,
OverlayViewHide : true,
loadexception : true
});
};
Roo.extend(Roo.bootstrap.LocationPicker, Roo.bootstrap.Component, {
gMapContext: false,
latitude: 0,
longitude: 0,
zoom: 15,
mapTypeId: false,
mapTypeControl: false,
disableDoubleClickZoom: false,
scrollwheel: true,
streetViewControl: false,
radius: 0,
locationName: '',
draggable: true,
enableAutocomplete: false,
enableReverseGeocode: true,
markerTitle: '',
getAutoCreate: function()
{
var cfg = {
tag: 'div',
cls: 'roo-location-picker'
};
return cfg
},
initEvents: function(ct, position)
{
if(!this.el.getWidth() || this.isApplied()){
return;
}
this.el.setVisibilityMode(Roo.Element.DISPLAY);
this.initial();
},
initial: function()
{
if(typeof(google) == 'undefined' || typeof(google.maps) == 'undefined'){
this.fireEvent('loadexception', this);
return;
}
if(!this.mapTypeId){
this.mapTypeId = google.maps.MapTypeId.ROADMAP;
}
this.gMapContext = this.GMapContext();
this.initOverlayView();
this.OverlayView = new Roo.bootstrap.LocationPicker.OverlayView(this.gMapContext.map);
var _this = this;
google.maps.event.addListener(this.gMapContext.marker, "dragend", function(event) {
_this.setPosition(_this.gMapContext.marker.position);
});
google.maps.event.addListener(this.gMapContext.map, 'click', function(event){
_this.fireEvent('mapClick', this, event);
});
google.maps.event.addListener(this.gMapContext.map, 'rightclick', function(event){
_this.fireEvent('mapRightClick', this, event);
});
google.maps.event.addListener(this.gMapContext.marker, 'click', function(event){
_this.fireEvent('markerClick', this, event);
});
google.maps.event.addListener(this.gMapContext.marker, 'rightclick', function(event){
_this.fireEvent('markerRightClick', this, event);
});
this.setPosition(this.gMapContext.location);
this.fireEvent('initial', this, this.gMapContext.location);
},
initOverlayView: function()
{
var _this = this;
Roo.bootstrap.LocationPicker.OverlayView.prototype = Roo.apply(new google.maps.OverlayView(), {
draw: function()
{
_this.fireEvent('OverlayViewDraw', _this);
},
onAdd: function()
{
_this.fireEvent('OverlayViewOnAdd', _this);
},
onRemove: function()
{
_this.fireEvent('OverlayViewOnRemove', _this);
},
show: function(cpx)
{
_this.fireEvent('OverlayViewShow', _this, cpx);
},
hide: function()
{
_this.fireEvent('OverlayViewHide', _this);
}
});
},
fromLatLngToContainerPixel: function(event)
{
return this.OverlayView.getProjection().fromLatLngToContainerPixel(event.latLng);
},
isApplied: function()
{
return this.getGmapContext() == false ? false : true;
},
getGmapContext: function()
{
return (typeof(this.gMapContext) == 'undefined') ? false : this.gMapContext;
},
GMapContext: function()
{
var position = new google.maps.LatLng(this.latitude, this.longitude);
var _map = new google.maps.Map(this.el.dom, {
center: position,
zoom: this.zoom,
mapTypeId: this.mapTypeId,
mapTypeControl: this.mapTypeControl,
disableDoubleClickZoom: this.disableDoubleClickZoom,
scrollwheel: this.scrollwheel,
streetViewControl: this.streetViewControl,
locationName: this.locationName,
draggable: this.draggable,
enableAutocomplete: this.enableAutocomplete,
enableReverseGeocode: this.enableReverseGeocode
});
var _marker = new google.maps.Marker({
position: position,
map: _map,
title: this.markerTitle,
draggable: this.draggable
});
return {
map: _map,
marker: _marker,
circle: null,
location: position,
radius: this.radius,
locationName: this.locationName,
addressComponents: {
formatted_address: null,
addressLine1: null,
addressLine2: null,
streetName: null,
streetNumber: null,
city: null,
district: null,
state: null,
stateOrProvince: null
},
settings: this,
domContainer: this.el.dom,
geodecoder: new google.maps.Geocoder()
};
},
drawCircle: function(center, radius, options)
{
if (this.gMapContext.circle != null) {
this.gMapContext.circle.setMap(null);
}
if (radius > 0) {
radius *= 1;
options = Roo.apply({}, options, {
strokeColor: "#0000FF",
strokeOpacity: .35,
strokeWeight: 2,
fillColor: "#0000FF",
fillOpacity: .2
});
options.map = this.gMapContext.map;
options.radius = radius;
options.center = center;
this.gMapContext.circle = new google.maps.Circle(options);
return this.gMapContext.circle;
}
return null;
},
setPosition: function(location)
{
this.gMapContext.location = location;
this.gMapContext.marker.setPosition(location);
this.gMapContext.map.panTo(location);
this.drawCircle(location, this.gMapContext.radius, {});
var _this = this;
if (this.gMapContext.settings.enableReverseGeocode) {
this.gMapContext.geodecoder.geocode({
latLng: this.gMapContext.location
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK && results.length > 0) {
_this.gMapContext.locationName = results[0].formatted_address;
_this.gMapContext.addressComponents = _this.address_component_from_google_geocode(results[0].address_components);
_this.fireEvent('positionchanged', this, location);
}
});
return;
}
this.fireEvent('positionchanged', this, location);
},
resize: function()
{
google.maps.event.trigger(this.gMapContext.map, "resize");
this.gMapContext.map.setCenter(this.gMapContext.marker.position);
this.fireEvent('resize', this);
},
setPositionByLatLng: function(latitude, longitude)
{
this.setPosition(new google.maps.LatLng(latitude, longitude));
},
getCurrentPosition: function()
{
return {
latitude: this.gMapContext.location.lat(),
longitude: this.gMapContext.location.lng()
};
},
getAddressName: function()
{
return this.gMapContext.locationName;
},
getAddressComponents: function()
{
return this.gMapContext.addressComponents;
},
address_component_from_google_geocode: function(address_components)
{
var result = {};
for (var i = 0; i < address_components.length; i++) {
var component = address_components[i];
if (component.types.indexOf("postal_code") >= 0) {
result.postalCode = component.short_name;
} else if (component.types.indexOf("street_number") >= 0) {
result.streetNumber = component.short_name;
} else if (component.types.indexOf("route") >= 0) {
result.streetName = component.short_name;
} else if (component.types.indexOf("neighborhood") >= 0) {
result.city = component.short_name;
} else if (component.types.indexOf("locality") >= 0) {
result.city = component.short_name;
} else if (component.types.indexOf("sublocality") >= 0) {
result.district = component.short_name;
} else if (component.types.indexOf("administrative_area_level_1") >= 0) {
result.stateOrProvince = component.short_name;
} else if (component.types.indexOf("country") >= 0) {
result.country = component.short_name;
}
}
result.addressLine1 = [ result.streetNumber, result.streetName ].join(" ").trim();
result.addressLine2 = "";
return result;
},
setZoomLevel: function(zoom)
{
this.gMapContext.map.setZoom(zoom);
},
show: function()
{
if(!this.el){
return;
}
this.el.show();
this.resize();
this.fireEvent('show', this);
},
hide: function()
{
if(!this.el){
return;
}
this.el.hide();
this.fireEvent('hide', this);
}
});
Roo.apply(Roo.bootstrap.LocationPicker, {
OverlayView : function(map, options)
{
options = options || {};
this.setMap(map);
}
});