117 lines
2.6 KiB
JavaScript
117 lines
2.6 KiB
JavaScript
|
|
var gmapsIsLoaded = false;
|
|
|
|
Vn.Location = new Class
|
|
({
|
|
Extends: Vn.Form
|
|
|
|
,locations: null
|
|
|
|
,activate: function ()
|
|
{
|
|
this.gui.loaderPush ();
|
|
|
|
var sql = 'SELECT lat, lng, title, address, postcode, city, province, phone, language FROM location';
|
|
this.conn.execQuery (sql, this.onLocationsDone.bind (this));
|
|
|
|
if (!gmapsIsLoaded)
|
|
{
|
|
gmapsLoadedCallback = this.gmapsLoaded.bind (this);
|
|
Vn.includeJs ('https://maps.google.com/maps/api/js'+
|
|
'?sensor=false&callback=gmapsLoadedCallback', null, true);
|
|
}
|
|
else
|
|
this.gmapsLoaded ();
|
|
}
|
|
|
|
,onLocationsDone: function (resultSet)
|
|
{
|
|
this.locations = resultSet.fetchResult ();
|
|
this.allLoaded ();
|
|
}
|
|
|
|
,gmapsLoaded: function ()
|
|
{
|
|
this.gui.loaderPop ();
|
|
gmapsIsLoaded = true;
|
|
this.allLoaded ();
|
|
}
|
|
|
|
,allLoaded: function ()
|
|
{
|
|
if (!this.locations || !gmapsIsLoaded)
|
|
return;
|
|
|
|
var options = {
|
|
zoom: 4
|
|
,mapTypeId: google.maps.MapTypeId.ROADMAP
|
|
,center: new google.maps.LatLng (46.0, 4.0)
|
|
};
|
|
|
|
var div = this.$('form');
|
|
var gmap = new google.maps.Map (div, options);
|
|
|
|
if (this.locations)
|
|
while (this.locations.next ())
|
|
this.createMarker (this.locations, gmap);
|
|
}
|
|
|
|
,createMarker: function (location, gmap)
|
|
{
|
|
var div = document.createElement ('div');
|
|
div.className = 'marker';
|
|
|
|
var h = document.createElement ('h3');
|
|
h.appendChild (document.createTextNode (location.get ('title')));
|
|
div.appendChild (h);
|
|
|
|
var p = document.createElement ('p');
|
|
p.appendChild (document.createTextNode (location.get ('address')));
|
|
div.appendChild (p);
|
|
|
|
var p = document.createElement ('p');
|
|
p.appendChild (document.createTextNode (location.get ('postcode') +' '+ location.get ('city')));
|
|
div.appendChild (p);
|
|
|
|
var p = document.createElement ('p');
|
|
p.appendChild (document.createTextNode (location.get ('province')));
|
|
div.appendChild (p);
|
|
|
|
var p = document.createElement ('p');
|
|
p.appendChild (document.createTextNode (location.get ('phone')));
|
|
div.appendChild (p);
|
|
|
|
var lat = new google.maps.LatLng (
|
|
location.get ('lat'),
|
|
location.get ('lng')
|
|
);
|
|
|
|
var marker = new google.maps.Marker ({
|
|
position: lat
|
|
,tilte: location.title
|
|
,map: gmap
|
|
});
|
|
|
|
var infoWindow = new google.maps.InfoWindow ({
|
|
content: div
|
|
});
|
|
|
|
google.maps.event.addListener (marker, 'click',
|
|
this.openInfoWindow.bind (this, infoWindow, gmap, marker));
|
|
|
|
if (Vn.Locale.language
|
|
&& Vn.Locale.language == location.get ('language'))
|
|
this.openInfoWindow (infoWindow, gmap, marker);
|
|
}
|
|
|
|
,openInfoWindow: function (infoWindow, gmap, marker)
|
|
{
|
|
if (this.openedWindow)
|
|
this.openedWindow.close ();
|
|
|
|
infoWindow.open (gmap, marker);
|
|
this.openedWindow = infoWindow;
|
|
}
|
|
});
|
|
|