From f04e6de2e729c8d638f6589f77abdfa4535b110e Mon Sep 17 00:00:00 2001 From: Richard Mathot Date: Tue, 3 Jun 2014 16:34:30 +0200 Subject: [FIX][IMP] Make partner maps work properly [FIX] website*: unfuck buggy controllers [IMP] website*: display GoogleMap in a human-usable interface [IMP] website_google_map: large module cleaning - There is now only one controller, data is sent once for all! - Map is now fully resizable in its hosting template - HTML/CSS cleaning - JavaScript is now human-readable ;-) --- .../static/src/css/google-map.css | 28 ++++ .../website_google_map/static/src/js/google_map.js | 143 ++++++++++----------- 2 files changed, 99 insertions(+), 72 deletions(-) create mode 100644 addons/website_google_map/static/src/css/google-map.css (limited to 'addons/website_google_map/static') diff --git a/addons/website_google_map/static/src/css/google-map.css b/addons/website_google_map/static/src/css/google-map.css new file mode 100644 index 00000000000..3d5ec1d8f2d --- /dev/null +++ b/addons/website_google_map/static/src/css/google-map.css @@ -0,0 +1,28 @@ +html { + height: 100%; +} + +body { + margin: 0; + padding: 0; + height: 100%; +} + +#odoo-google-map { + width: 100%; + height: 100%; +} + +.marker { + font-size: 13px !important; +} + +.marker a { + text-decoration: none; +} + +.marker pre { + margin-top: 0; + margin-bottom: 0; + font-family: sans-serif !important; +} diff --git a/addons/website_google_map/static/src/js/google_map.js b/addons/website_google_map/static/src/js/google_map.js index 19f4a5e6423..53e5342bbfc 100644 --- a/addons/website_google_map/static/src/js/google_map.js +++ b/addons/website_google_map/static/src/js/google_map.js @@ -1,84 +1,83 @@ -function initialize(pt) { - var center = new google.maps.LatLng(10.91, 5.38); - var Geocoder = new google.maps.Geocoder(); +function initialize_map() { + 'use strict'; - var map = new google.maps.Map(document.getElementById('map'), { - zoom: 1, - center: center, - mapTypeId: google.maps.MapTypeId.ROADMAP - }); + // MAP CONFIG AND LOADING + var map = new google.maps.Map(document.getElementById('odoo-google-map'), { + zoom: 1, + center: {lat: 0.0, lng: 0.0}, + mapTypeId: google.maps.MapTypeId.ROADMAP + }); - var infoWindow = new google.maps.InfoWindow(); + // ENABLE ADRESS GEOCODING + var Geocoder = new google.maps.Geocoder(); - google.maps.event.addListener(map, 'click', function() { - infoWindow.close(); - }); + // INFO BUBBLES + var infoWindow = new google.maps.InfoWindow(); + var partners = new google.maps.MarkerImage('/website_google_map/static/src/img/partners.png', new google.maps.Size(25, 25)); + var partner_url = document.body.getAttribute('data-partner-url') || ''; + var markers = []; - var partners = new google.maps.MarkerImage("/website_google_map/static/src/img/partners.png",new google.maps.Size(25, 25)); + google.maps.event.addListener(map, 'click', function() { + infoWindow.close(); + }); - var markers = []; + // Display the bubble once clicked + var onMarkerClick = function() { + var marker = this; + var p = marker.partner; + infoWindow.setContent( + '
'+ + (partner_url.length ? ''+p.name +'' : ''+p.name+'' )+ + (p.type ? ' ' + p.type + '' : '')+ + ' 
' + p.address + '
'+ + '
' + ); + infoWindow.open(map, marker); + }; - var onMarkerClick = function() { - var marker = this; - var p = marker.partner; - infoWindow.setContent( - '
'+ - (partner_url.length ? ''+p.name +'' : ''+p.name+'' )+ '
'+ - (p.type ? ' ' + p.type + '' : '')+ - ' 
' + p.address + '
'+ - '
' - ); - infoWindow.open(map, marker); - }; - - var set_marker = function(partner) { - if (!partner.latitude && !partner.longitude) { - - Geocoder.geocode( { 'address': partner.address}, function(results, status) { - if (status == google.maps.GeocoderStatus.OK) { - var location = results[0].geometry.location; - - $.post("/google_map/set_partner_position", { - 'partner_id': partner.id, - 'latitude': location.ob, - 'longitude': location.pb - }); - partner.latitude = location.ob; - partner.longitude = location.pb; - - map.setCenter(results[0].geometry.location); - var marker = new google.maps.Marker({ - partner: partner, - map: map, - icon: partners, - position: location - }); - google.maps.event.addListener(marker, 'click', onMarkerClick); - markers.push(marker); + // Create a bubble for a partner + var set_marker = function(partner) { + // If no lat & long, geocode adress + // TODO: a server cronjob that will store these coordinates in database instead of resolving them on-the-fly + if (!partner.latitude && !partner.longitude) { + Geocoder.geocode({'address': partner.address}, function(results, status) { + if (status === google.maps.GeocoderStatus.OK) { + var location = results[0].geometry.location; + partner.latitude = location.ob; + partner.longitude = location.pb; + var marker = new google.maps.Marker({ + partner: partner, + map: map, + icon: partners, + position: location + }); + google.maps.event.addListener(marker, 'click', onMarkerClick); + markers.push(marker); + } else { + console.debug('Geocode was not successful for the following reason: ' + status); + } + }); } else { - console.debug('Geocode was not successful for the following reason: ' + status); + var latLng = new google.maps.LatLng(partner.latitude, partner.longitude); + var marker = new google.maps.Marker({ + partner: partner, + icon: partners, + map: map, + position: latLng + }); + google.maps.event.addListener(marker, 'click', onMarkerClick); + markers.push(marker); } - }); + }; - } else { - - var latLng = new google.maps.LatLng(partner.latitude, partner.longitude); - var marker = new google.maps.Marker({ - partner: partner, - icon: partners, - position: latLng - }); - google.maps.event.addListener(marker, 'click', onMarkerClick); - markers.push(marker); + // Create the markers and cluster them on the map + if (odoo_partner_data){ /* odoo_partner_data special variable should have been defined in google_map.xml */ + for (var i = 0; i < odoo_partner_data.counter; i++) { + set_marker(odoo_partner_data.partners[i]); + } + var markerCluster = new MarkerClusterer(map, markers); } - - }; - - if (data) - for (var i = 0; i < data.counter; i++) { - set_marker(data.partners[i]); - } - var markerCluster = new MarkerClusterer(map, markers); } -google.maps.event.addDomListener(window, 'load', initialize); +// Initialize map once the DOM has been loaded +google.maps.event.addDomListener(window, 'load', initialize_map); -- cgit v1.2.3