/*
This file contains proprietary software owned by Motorola Mobility, Inc.
No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
*/
/**
@requires montage/core/core
@requires montage/ui/component
*/
var Montage = require("montage").Montage,
Component = require("montage/ui/component").Component;
/**
@class module:"montage/ui/google/map.reel".Map
@extends module:montage/ui/component.Component
*/
var Map = exports.Map = Montage.create(Component, /** @lends module:"montage/ui/toggle-switch.reel".ToggleSwitch# */ {
didCreate: {
value: function() {
var self = this;
this._latLng = this.defaultLatLng;
window.initialize = function initialize() {
self._mapLoaded = true;
self._geoCoder = new google.maps.Geocoder();
self.needsDraw = true;
};
}
},
_geoCoder: {value: null},
// HTMLElement to load the Map into
mapEl: {
serializable: true,
value: null
},
_mapLoaded: {
enumerable: false,
value: false
},
_map: {
enumerable: false,
value: false
},
// Sunnyvale, CA
defaultLatLng: {
value: {lat: 37.37, lng: -122.03}
},
_latLng: {
value: null
},
latLng: {
get: function() {
return this._latLng;
},
set: function(value) {
if(value) {
this._latLng = value;
// refresh the map
this.needsDraw = true;
}
}
},
// {lat, lon} Or a String representing the location (eg: Paris, France)
center: {
serializable: true,
get: function() {
return this._center;
},
set: function(value) {
if(value) {
var self = this, geocoder = this._geoCoder;
this._center = value;
if(this._mapLoaded) {
if(String.isString(value)) {
// geocode
self.LatLng = null;
geocoder.geocode( { 'address': value}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var loc = results[0].geometry.location;
self.latLng = {lat: loc.lat(), lng: loc.lng()};
self.category = self._category;
} else {
console.log('Geocode was not successful : ' + status);
}
});
} else if(value.lat && value.lng) {
this.latLng = value;
} else {
// default location
this.latLng = this.defaultLatLng;
}
}
}
}
},
category: {
serializable: true,
get: function() {
return this._category;
},
set: function(value) {
if(value) {
this._category = value;
if (this._mapLoaded && this.latLng) {
this._getPlaces(this._category);
this.needsDraw = true;
}
}
}
},
trafficLayer: {value: null},
_traffic: {value: null},
traffic: {
get: function() {
return this._traffic;
},
set: function(value) {
if(value !== this._traffic) {
this._traffic = value;
this.needsDraw = true;
}
}
},
zoomValue: {
value: 8
},
__places: {value: null},
_places: {
get: function() {
return this.__places;
},
set: function(value) {
if(value) {
this.__places = value;
this.needsDraw = true;
}
}
},
_getPlaces: {
value: function(type, keyword) {
var self = this;
var request = {
location: new window.google.maps.LatLng(this.latLng.lat, this.latLng.lng),
radius: 5000,
types: [type]
};
if(!this._infoWindow) {
this._infoWindow = new google.maps.InfoWindow();
}
var service = new google.maps.places.PlacesService(this._map);
service.search(request, function(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
self._places = results;
} else {
self._places = [];
}
self.needsDraw = true;
});
}
},
_infoWindow: {value: null},
_markers: {value: null},
_createMarker: {
value: function(place) {
var placeLoc = place.geometry.location, map = this._map;
var icon, image;
switch(this.category) {
case 'restaurant':
icon = '48-fork-and-knife.png';
break;
case 'hospital':
icon = '10-medical.png';
break;
case 'bar':
icon = '88-beer-mug.png';
break;
case 'grocery_or_supermarket':
icon = '80-shopping-cart.png';
break;
case 'museum':
icon = '41-picture-frame.png';
break;
case 'gas_station':
icon = '47-fuel.png';
break;
};
if(icon) {
image = new google.maps.MarkerImage('images/' + icon);
}
var options = {
map: map,
position: place.geometry.location
};
if(image) {
options.icon = image;
}
var marker = new google.maps.Marker(options);
if(!this._markers) {
this._markers = [];
}
this._markers.push(marker);
var infoWindow = this._infoWindow;
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(place.name + '
' + place.vicinity);
infoWindow.open(map, this);
});
}
},
_removeAllMarkers: {
value: function() {
if(this._markers && this._markers.length > 0) {
var i=0, len = this._markers.length;
for(i; i< len; i++) {
this._markers[i].setMap(null);
}
this._markers = [];
}
}
},
/**
Description TODO
@function
*/
draw: {
enumerable: false,
value: function () {
if(this._mapLoaded) {
var latLng = this.latLng || this.defaultLatLng;
if(!this._map) {
var map;
var myOptions = {
zoom: this.zoomValue,
center: new window.google.maps.LatLng(latLng.lat, latLng.lng),
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
this._map = new window.google.maps.Map(this.mapEl, myOptions);
this.center = this._center;
this.category = this._category;
}
var map = this._map;
map.setZoom(10);
var latLng = new window.google.maps.LatLng(latLng.lat, latLng.lng);
map.setCenter(latLng);
var marker = new google.maps.Marker({
map: map,
position: latLng
});
var places = this._places;
if(places && places.length > 0) {
map.setZoom(13);
this._removeAllMarkers();
for (var i = 0; i < places.length; i++) {
this._createMarker(places[i]);
}
}
if(this.traffic === true) {
this.trafficLayer = new google.maps.TrafficLayer();
this.trafficLayer.setMap(map);
} else {
if(this.trafficLayer) {
this.trafficLayer.setMap(null);
}
}
}
//window.google.maps.event.addDomListener(window, 'load', initialize);
}
},
serializeProperties: {
value: function(serializer) {
serializer.set("element", this.element);
serializer.set("category", this.category);
serializer.set("center", this.center);
}
}
});