WebDev/Opal-Estate-Pro
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update map

Browse Source
This commit is contained in:
Hoang Huu 2019-10-02 15:15:24 +07:00
parent b3a3673ba7
commit f2e6a5e5d0
1 changed files with 127 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

214
assets/js/frontend/googlemaps.js
View File

@ -15,14 +15,14 @@
*/ */
var initializePropertyMap = function ( data , id ){ var initializePropertyMap = function ( data , id ){
var propertyMarkerInfo = data; var propertyMarkerInfo = data;
var enable = true ; var enable = true ;
var url = propertyMarkerInfo.icon; var url = propertyMarkerInfo.icon;
var size = new google.maps.Size( 42, 57 ); var size = new google.maps.Size( 42, 57 );
var allMarkers = [];
var allMarkers = [];
var setMapOnAll = function (markers, map) { var setMapOnAll = function (markers, map) {
for (var i = 0; i < markers.length; i++) { for (var i = 0; i < markers.length; i++) {
markers[i].setMap( map ); markers[i].setMap( map );
@ -35,7 +35,7 @@
size = new google.maps.Size( 83, 113 ); size = new google.maps.Size( 83, 113 );
} }
} }
var propertyLocation = new google.maps.LatLng( propertyMarkerInfo.latitude, propertyMarkerInfo.longitude ); var propertyLocation = new google.maps.LatLng( propertyMarkerInfo.latitude, propertyMarkerInfo.longitude );
var propertyMapOptions = { var propertyMapOptions = {
center: propertyLocation, center: propertyLocation,
@ -50,7 +50,7 @@
*/ */
var createMarker = function ( position, icon ) { var createMarker = function ( position, icon ) {
var image = { var image = {
url: icon, url: icon,
size: size, size: size,
@ -64,16 +64,16 @@
position: position, position: position,
icon: image icon: image
}); });
return _marker; return _marker;
} }
var infowindow = new google.maps.InfoWindow(); var infowindow = new google.maps.InfoWindow();
createMarker( propertyLocation, url ); createMarker( propertyLocation, url );
/** /**
* Places near with actived types * Places near with actived types
*/ */
if( enable ){ if( enable ){
var $navs = $("#"+id).parent().find( '.property-search-places' ); var $navs = $("#"+id).parent().find( '.property-search-places' );
@ -92,7 +92,7 @@
if( !allMarkers[type] || allMarkers[type].length <= 0 ){ if( !allMarkers[type] || allMarkers[type].length <= 0 ){
var markers = [] ; var markers = [] ;
var bounds = propertyMap.getBounds(); var bounds = propertyMap.getBounds();
var $this = $(this); var $this = $(this);
service.nearbySearch({ service.nearbySearch({
@ -163,19 +163,19 @@
} }
}else { }else {
for( var i=0 ; i < allMarkers[type].length; i++ ){ for( var i=0 ; i < allMarkers[type].length; i++ ){
allMarkers[type][i].setMap( null ); allMarkers[type][i].setMap( null );
} }
allMarkers[type] = []; allMarkers[type] = [];
} }
$(this).toggleClass('active'); $(this).toggleClass('active');
} ); } );
} }
} }
initializePropertyMap( data , id ); initializePropertyMap( data , id );
} }
var GoogleMapSearch = Opalestate.GooglemapSingle = function ( data ) { var GoogleMapSearch = Opalestate.GooglemapSingle = function ( data ) {
var initializePropertiesMap = function ( properties ) { var initializePropertiesMap = function ( properties ) {
// Properties Array // Properties Array
var mapOptions = { var mapOptions = {
@ -243,18 +243,58 @@
pricelabel = ' / ' + properties[i].pricelabel; pricelabel = ' / ' + properties[i].pricelabel;
} }
// console.log( properties[i] );
boxText.className = 'map-info-preview media'; boxText.className = 'map-info-preview media';
function opalestate_get_property_icon( $key ) {
var $icon = $key;
switch ( $key ) {
case 'builtyear':
$icon = 'fas fa-calendar';
break;
case 'parking':
$icon = 'fas fa-car';
break;
case 'bedrooms':
$icon = 'fas fa-bed';
break;
case 'bathrooms':
$icon = 'fas fa-bath';
break;
case 'plotsize':
$icon = 'fas fa-map';
break;
case 'areasize':
$icon = 'fas fa-arrows-alt';
break;
case 'orientation':
$icon = 'fas fa-compass';
break;
case 'livingrooms':
$icon = 'fas fa-tv';
break;
case 'kitchens':
$icon = 'fas fa-utensils';
break;
case 'amountrooms':
$icon = 'fas fa-building';
break;
default:
$icon = $key;
break;
}
return $icon;
}
var meta = '<ul class="list-inline property-meta-list">'; var meta = '<ul class="list-inline property-meta-list">';
if( properties[i].metas ){ if( properties[i].metas ){
for ( var x in properties[i].metas ){ for ( var x in properties[i].metas ){
var m = properties[i].metas[x]; var m = properties[i].metas[x];
meta += '<li><i class="icon-property-'+x+'"></i>' + m.value +'<span class="label-property">' + m.label + '</span></li>' meta += '<li><i class="icon-property-'+x+' ' + opalestate_get_property_icon(x) + '"></i>' + m.value +'<span' +
} ' class="label-property">' + m.label + '</span></li>'
}
} }
meta += '</ul>'; meta += '</ul>';
boxText.innerHTML = '<div class="media-top"><a class="thumb-link" href="' + properties[i].url + '">' + boxText.innerHTML = '<div class="media-top"><a class="thumb-link" href="' + properties[i].url + '">' +
'<img class="prop-thumb" src="' + properties[i].thumb + '" alt="' + properties[i].title + '"/>' + '<img class="prop-thumb" src="' + properties[i].thumb + '" alt="' + properties[i].title + '"/>' +
'</a>'+ properties[i].status +'</div>' + '</a>'+ properties[i].status +'</div>' +
@ -279,24 +319,24 @@
}; };
var ib = new InfoBox( myOptions ); var ib = new InfoBox( myOptions );
attachInfoBoxToMarker( map, markers[i], ib, i ); attachInfoBoxToMarker( map, markers[i], ib, i );
} }
var last = null ; var last = null ;
$('body').delegate( '[data-related="map"]', 'mouseenter', function(){ $('body').delegate( '[data-related="map"]', 'mouseenter', function(){
if( $(this).hasClass('map-active') ){ if( $(this).hasClass('map-active') ){
return true; return true;
} }
var i = $(this).data( 'id' ); var i = $(this).data( 'id' );
$( '[data-related="map"]' ).removeClass( 'map-active' ); $( '[data-related="map"]' ).removeClass( 'map-active' );
$(this).addClass( 'active' ); $(this).addClass( 'active' );
map.setZoom( 65536 );// alert( scale ); map.setZoom( 65536 );// alert( scale );
if( markers[i] ){ if( markers[i] ){
var marker = markers[i]; var marker = markers[i];
google.maps.event.trigger( markers[i], 'click' ); google.maps.event.trigger( markers[i], 'click' );
var scale = Math.pow( 2, map.getZoom() ); var scale = Math.pow( 2, map.getZoom() );
@ -311,8 +351,8 @@
} }
return false; return false;
}); });
map.fitBounds(bounds); map.fitBounds(bounds);
/* Marker Clusters */ /* Marker Clusters */
@ -329,22 +369,22 @@
var markerClusterer = new MarkerClusterer( map, markers, markerClustererOptions ); var markerClusterer = new MarkerClusterer( map, markers, markerClustererOptions );
function attachInfoBoxToMarker( map, marker, infoBox , i ){
function attachInfoBoxToMarker( map, marker, infoBox , i ){
google.maps.event.addListener( marker, 'click', function(){ google.maps.event.addListener( marker, 'click', function(){
if( $( '[data-related="map"]' ).filter('[data-id="'+i+'"]').length > 0 ){ if( $( '[data-related="map"]' ).filter('[data-id="'+i+'"]').length > 0 ){
var $m = $( '[data-related="map"]' ).filter('[data-id="'+i+'"]'); var $m = $( '[data-related="map"]' ).filter('[data-id="'+i+'"]');
$( '[data-related="map"]' ).removeClass( 'map-active' ); $( '[data-related="map"]' ).removeClass( 'map-active' );
$m.addClass('map-active'); $m.addClass('map-active');
} }
if( last != null ){ if( last != null ){
last.close(); last.close();
} }
var scale = Math.pow( 2, map.getZoom() ); var scale = Math.pow( 2, map.getZoom() );
var offsety = ( (100/scale) || 0 ); var offsety = ( (100/scale) || 0 );
var projection = map.getProjection(); var projection = map.getProjection();
@ -354,11 +394,11 @@
var aboveMarkerLatLng = projection.fromPointToLatLng( pointHalfScreenAbove ); var aboveMarkerLatLng = projection.fromPointToLatLng( pointHalfScreenAbove );
map.setCenter( aboveMarkerLatLng ); map.setCenter( aboveMarkerLatLng );
infoBox.open( map, marker ); infoBox.open( map, marker );
last = infoBox; last = infoBox;
}); });
} }
} }
initializePropertiesMap( data ); initializePropertiesMap( data );
} }
///// /////
@ -387,30 +427,30 @@
$( ".property-preview-map").each( function(){ $( ".property-preview-map").each( function(){
new GooglemapSingle( $(this).data() , $(this).attr('id') ); new GooglemapSingle( $(this).data() , $(this).attr('id') );
} ); } );
$( ".tab-google-street-view-btn") .click( function(){ $( ".tab-google-street-view-btn") .click( function(){
$( ".property-preview-street-map").hide(); $( ".property-preview-street-map").hide();
$( ".property-preview-street-map").each( function(){ $( ".property-preview-street-map").each( function(){
var d = $(this).data() ; var d = $(this).data() ;
var i = $(this).attr('id') ; var i = $(this).attr('id') ;
initialize_property_street_view( d , i ); initialize_property_street_view( d , i );
} ); } );
$( ".property-preview-street-map").show( 100 ); $( ".property-preview-street-map").show( 100 );
} ); } );
/// ///
// auto set height for split google map // auto set height for split google map
$( '.split-maps-container' ).each( function() { $( '.split-maps-container' ).each( function() {
$( "#opalestate-map-preview ").height( $(window).height() ); $( "#opalestate-map-preview ").height( $(window).height() );
} ); } );
}) })
$(document).ready(function () { $(document).ready(function () {
// search // search
// show google maps // show google maps
// update google maps // update google maps
var updatePreviewGoogleMap = function( url ) { var updatePreviewGoogleMap = function( url ) {
if( $('#opalestate-map-preview').length > 0 ) { if( $('#opalestate-map-preview').length > 0 ) {
@ -430,18 +470,18 @@
updatePreviewGoogleMap( currentLocation ); updatePreviewGoogleMap( currentLocation );
} }
// update results // update results
function updatePropertiesResults( data ){ function updatePropertiesResults( data ){
$( '.opalesate-properties-results').append( $('<div class="opalestate-loading"></div>') ); $( '.opalesate-properties-results').append( $('<div class="opalestate-loading"></div>') );
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: opalesateJS.ajaxurl, url: opalesateJS.ajaxurl,
data: data+"&action=opalestate_render_get_properties" , data: data+"&action=opalestate_render_get_properties" ,
success: function( response ) { success: function( response ) {
if( response ){ if( response ){
$( '.opalesate-properties-results' ).html( response ); $( '.opalesate-properties-results' ).html( response );
} }
$( '.opalesate-properties-results .opalestate-loading').remove(); $( '.opalesate-properties-results .opalestate-loading').remove();
$('.opalestate-sortable select').select2( { $('.opalestate-sortable select').select2( {
width: '100%', width: '100%',
minimumResultsForSearch: -1 minimumResultsForSearch: -1
@ -450,15 +490,15 @@
}); });
} }
function updatePropertiesByParseringHtml( newurl ){ function updatePropertiesByParseringHtml( newurl ){
$( '.opalesate-properties-results .opalesate-archive-bottom').append( $('<div class="opalestate-loading"></div>') ); $( '.opalesate-properties-results .opalesate-archive-bottom').append( $('<div class="opalestate-loading"></div>') );
$.ajax({ $.ajax({
type: "GET", type: "GET",
url: newurl, url: newurl,
dataType : 'html', dataType : 'html',
cache: false, cache: false,
success: function( data ) { success: function( data ) {
if( data ){ if( data ){
$( '.opalesate-properties-results' ).html( $(data).find('.opalesate-properties-results').html() ); $( '.opalesate-properties-results' ).html( $(data).find('.opalesate-properties-results').html() );
$('.opalestate-sortable select').select2( { $('.opalestate-sortable select').select2( {
width: '100%', width: '100%',
@ -467,52 +507,52 @@
} }
// $( '.opalesate-properties-results .opalestate-loading').remove(); // $( '.opalesate-properties-results .opalestate-loading').remove();
} }
}); });
} }
$('form.opalestate-search-form').submit( function ( ){ $('form.opalestate-search-form').submit( function ( ){
if( $('#opalestate-map-preview').length > 0 ) { if( $('#opalestate-map-preview').length > 0 ) {
if( $(".opalesate-properties-results") && $(".opalesate-properties-results").data('mode') == 'html' ) { if( $(".opalesate-properties-results") && $(".opalesate-properties-results").data('mode') == 'html' ) {
var $form = $(this); var $form = $(this);
if (history.pushState) { if (history.pushState) {
var ps = $form.serialize(); var ps = $form.serialize();
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?'+ ps; var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?'+ ps;
window.history.pushState({path:newurl},'',newurl); window.history.pushState({path:newurl},'',newurl);
updatePropertiesByParseringHtml( newurl ); updatePropertiesByParseringHtml( newurl );
} }
} else { } else {
updatePropertiesResults( $(this).serialize() ); updatePropertiesResults( $(this).serialize() );
} }
return false; return false;
} }
return true; return true;
} ); } );
$( '.ajax-search-form form.opalestate-search-form' ).each( function(){ $( '.ajax-search-form form.opalestate-search-form' ).each( function(){
var $form = $(this); var $form = $(this);
$( '.ajax-change select', this ).change( function(){ $( '.ajax-change select', this ).change( function(){
if (history.pushState) { if (history.pushState) {
var ps = $form.serialize(); var ps = $form.serialize();
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?'+ ps; var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?'+ ps;
window.history.pushState({path:newurl},'',newurl); window.history.pushState({path:newurl},'',newurl);
} }
$form.submit(); $form.submit();
return false; return false;
} ); } );
} ); } );
// // Sortable Change // // // // Sortable Change // //
$("body").delegate( '#opalestate-sortable-form select', 'change', function(){ $("body").delegate( '#opalestate-sortable-form select', 'change', function(){
var ps = ''; var ps = '';
if( $('form.opalestate-search-form').length > 0 ) { if( $('form.opalestate-search-form').length > 0 ) {
var $form =$('form.opalestate-search-form'); var $form =$('form.opalestate-search-form');
var ps = $form.serialize()+"&opalsortable="+$(this).val()+"&display="+$(".display-mode a.active").data('mode'); var ps = $form.serialize()+"&opalsortable="+$(this).val()+"&display="+$(".display-mode a.active").data('mode');
} }
if( $(".opalesate-properties-results") && ps ) { if( $(".opalesate-properties-results") && ps ) {
if (history.pushState) { if (history.pushState) {
@ -525,11 +565,11 @@
} }
} ); } );
// display mode // display mode
$( "body" ).delegate( ".display-mode a", 'click', function() { $( "body" ).delegate( ".display-mode a", 'click', function() {
if( $(".opalesate-properties-results").length > 0 ){ if( $(".opalesate-properties-results").length > 0 ){
var newurl = $(this).attr('href'); var newurl = $(this).attr('href');
window.history.pushState({path:newurl},'',newurl); window.history.pushState({path:newurl},'',newurl);
updatePropertiesByParseringHtml( newurl ); updatePropertiesByParseringHtml( newurl );
return false; return false;
} }
} ); } );
@ -537,46 +577,46 @@
if( $('#opalestate-map-preview').length > 0 ) { if( $('#opalestate-map-preview').length > 0 ) {
$( "body" ).delegate( "form.opalestate-search-form select", "change", function () { $( "body" ).delegate( "form.opalestate-search-form select", "change", function () {
var params = $( "form.opalestate-search-form" ).serialize(); var params = $( "form.opalestate-search-form" ).serialize();
var url = "action=opalestate_ajx_get_properties&"+params; var url = "action=opalestate_ajx_get_properties&"+params;
updatePreviewGoogleMap( url ); updatePreviewGoogleMap( url );
$('form.opalestate-search-form').submit(); $('form.opalestate-search-form').submit();
return true; return true;
} ); } );
$( "body" ).delegate( "form.opalestate-search-form input", "change", function () { $( "body" ).delegate( "form.opalestate-search-form input", "change", function () {
if( $(this).hasClass("ranger-geo_radius") ){ if( $(this).hasClass("ranger-geo_radius") ){
return false; return false;
} }
var params = $( "form.opalestate-search-form" ).serialize(); var params = $( "form.opalestate-search-form" ).serialize();
var url = "action=opalestate_ajx_get_properties&"+params; var url = "action=opalestate_ajx_get_properties&"+params;
updatePreviewGoogleMap( url ); updatePreviewGoogleMap( url );
$('form.opalestate-search-form').submit(); $('form.opalestate-search-form').submit();
} ); } );
} }
/////////// /////// /////////// ///////
} );
} );
})(jQuery); })(jQuery);
//// ////// //// //////
(function( $ ) { (function( $ ) {
'use strict'; 'use strict';
$(document).ready(function () { $(document).ready(function () {
$( '.opalestate-search-opal-map' ).each( function() { $( '.opalestate-search-opal-map' ).each( function() {
initializeMapAdressSearch( $(this) ); initializeMapAdressSearch( $(this) );
}); });
} ); } );
function initializeMapAdressSearch( mapInstance ) { function initializeMapAdressSearch( mapInstance ) {
var searchInput = mapInstance.find( '.opal-map-search' ); var searchInput = mapInstance.find( '.opal-map-search' );
// Search // Search
var autocomplete = new google.maps.places.Autocomplete( searchInput[0] ); var autocomplete = new google.maps.places.Autocomplete( searchInput[0] );
// autocomplete.bindTo( 'bounds', map ); // autocomplete.bindTo( 'bounds', map );
@ -584,9 +624,9 @@
var longitude = mapInstance.find( '.opal-map-longitude' ); var longitude = mapInstance.find( '.opal-map-longitude' );
google.maps.event.addListener( autocomplete, 'place_changed', function() { google.maps.event.addListener( autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace(); var place = autocomplete.getPlace();
if ( ! place.geometry ) { if ( ! place.geometry ) {
return; return;
@ -618,4 +658,4 @@
} }
})( jQuery ); })( jQuery );