Skip to content

Instantly share code, notes, and snippets.

/map-javascript.php

Created July 24, 2014 19:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/d94d4476875cf58413b2 to your computer and use it in GitHub Desktop.
Save anonymous/d94d4476875cf58413b2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
map-javascript.php
<script type="text/javascript">
var mapDiv,
map,
infobox;
/*******************************************
MARTIN 11.7.2013 MAP STYLING SUPPORT
********************************************/
function aitAddMapStyles(hueVal, lightnessVal, saturationVal, gammaVal) {
var stylersArray = [];
if (hueVal) {
stylersArray.push({
"hue": hueVal
});
}
if (lightnessVal) {
var mapLightness = parseInt(lightnessVal);
if (mapLightness < -100) {
mapLightness = -100;
} else if (mapLightness > 100) {
mapLightness = 100;
}
stylersArray.push({
"lightness": mapLightness
});
}
if (saturationVal) {
var mapSaturation = parseInt(saturationVal);
if (mapSaturation < -100) {
mapSaturation = -100;
} else if (mapSaturation > 100) {
mapSaturation = 100;
}
stylersArray.push({
"saturation": mapSaturation
});
}
if (gammaVal) {
var mapGamma = parseFloat(gammaVal);
if (mapGamma < 0.01) {
mapGamma = 0.01;
} else if (mapGamma > 9.99) {
mapGamma = 9.99;
}
stylersArray.push({
"gamma": mapGamma
});
}
return stylersArray;
}
/*******************************************
// END MAP STYLING SUPPORT
********************************************/
jQuery(document).ready(function($) {
mapDiv = $("#directory-main-bar");
mapDiv.height($(window).height() - 62);
$(window).resize(function(){
mapDiv.height($(window).height() - 62);
});
$win = $(window);
mapDiv.gmap3({
defaults:{
classes:{
Marker:RichMarker
}
},
map: {
options: {
{if (isset($items)) && (count($items) == 1) && (!isset($isGeolocation))}
{foreach parseMapOptions($themeOptions->directoryMap) as $key => $value}
{if $iterator->first}{$key}: {!$value}{else},{$key}: {!$value}{/if}
{/foreach}
,center: [{ifset $items[0]->optionsDir['gpsLatitude']}{!$items[0]->optionsDir['gpsLatitude']}{else}0{/ifset},{ifset $items[0]->optionsDir['gpsLongitude']}{!$items[0]->optionsDir['gpsLongitude']}{else}0{/ifset}]
,zoom: {!$themeOptions->directory->setZoomIfOne},
{/if}
"draggable": true
,"mapTypeControl": false
,"mapTypeId": google.maps.MapTypeId.ROADMAP
,"scrollwheel": true
,"panControl": false
,"rotateControl": false
,"scaleControl": false
,"streetViewControl": false
,"zoomControl": false
/*******************************************
MARTIN 11.7.2013 MAP STYLING SUPPORT
********************************************/
{if isset($themeOptions->directoryMap->changeMapStyle) &&
(!empty($themeOptions->directoryMap->mapStyleHue) || !empty($themeOptions->directoryMap->mapStyleSaturation) ||
!empty($themeOptions->directoryMap->mapStyleLightness) || !empty($themeOptions->directoryMap->mapStyleGamma))}
,styles: [{
"stylers": aitAddMapStyles({$themeOptions->directoryMap->mapStyleHue}, {$themeOptions->directoryMap->mapStyleLightness},
{$themeOptions->directoryMap->mapStyleSaturation}, {$themeOptions->directoryMap->mapStyleGamma})
}]
{/if}
/*******************************************
// END MAP STYLING SUPPORT
********************************************/
}
}
{if isset($isGeolocation) && (!isset($_GET['geo-lat'])) && (!isset($_GET['geo-lng']))}
,getgeoloc:{
callback : function(latLng){
if (latLng){
$(this).gmap3({
map:{
options:{
center: latLng,
zoom: 5
}
}
});
$('#dir-searchinput-geo-lat').val(latLng.lat());
$('#dir-searchinput-geo-lng').val(latLng.lng());
ajaxGetMarkers(false,latLng);
}
}
}
{else}
{if !empty($items)}
,marker: {
values: [
{foreach $items as $item}
{
latLng: [{ifset $item->optionsDir['gpsLatitude']}{!$item->optionsDir['gpsLatitude']}{else}0{/ifset},{ifset $item->optionsDir['gpsLongitude']}{!$item->optionsDir['gpsLongitude']}{else}0{/ifset}],
data: '<div class="marker-holder"><div class="marker-content{ifset $item->thumbnailDir} with-image"><a href="{!$item->link}"><img src="{thumbnailResize $item->thumbnailDir, w => 280, h => 160}" alt="">{else}">{/ifset}<div class="map-item-info"><div class="title">&#36;'+{ifset $item->optionsDir["price"]}{$item->optionsDir["price"]}+{/ifset}' <small>{!$item->rooms}bd/{!$item->baths}ba</small></div><div class="address">'+{ifset $item->optionsDir["address"]}{$item->optionsDir["address"]|nl2br}+{/ifset}',<br>'+{ifset $item->optionsDir["address2"]}{$item->optionsDir["address2"]|nl2br}+{/ifset}'</div><div class="timestamp">{!$item->time}</div></div></a><div class="arrow"></div><div class="close">x</div></div></div></div>'
}
{if !($iterator->last)},{/if}
{/foreach}
],
options:{
draggable: false,
content: "<div class='cluster-bg'><div class='cluster'><span>1</span></div></div>",
width: 44,
shadow: 0,
height: 44
},
cluster:{
radius: 100,
// This style will be used for clusters with more than 0 markers
0: {
content: "<div class='cluster-bg'><div class='cluster cluster-1'><span>CLUSTER_COUNT</span></div></div>",
width: 44,
height: 44
},
events: {
click: function(cluster) {
map.panTo(cluster.main.getPosition());
map.setZoom(map.getZoom() + 2);
},
mouseover: function(cluster) {
$(cluster.main.getDOMElement()).find('.cluster-bg').css('padding', '10px 10px');
$(cluster.main.getDOMElement()).find('.cluster-bg').css('margin', '-4px 0 0 -4px');
$(cluster.main.getDOMElement()).find('.cluster-bg').css('background-color', 'rgba(0,0,0,0.2)');
$(cluster.main.getDOMElement()).find('.cluster').css('background-color', '#343434');
},
mouseout: function(cluster) {
$(cluster.main.getDOMElement()).find('.cluster-bg').css('padding', '6px');
$(cluster.main.getDOMElement()).find('.cluster-bg').css('margin', '0');
$(cluster.main.getDOMElement()).find('.cluster-bg').css('background-color', 'rgba(0,0,0,0.15)');
$(cluster.main.getDOMElement()).find('.cluster').css('background-color', 'rgba(85, 151, 183, 1.0)');
}
}
},
events: {
click: function(marker, event, context){
map.panTo(marker.getPosition());
infobox.setContent(context.data);
infobox.open(map,marker);
// if map is small
var iWidth = 260;
var iHeight = 300;
if((mapDiv.width() / 2) < iWidth ){
var offsetX = iWidth - (mapDiv.width() / 2);
map.panBy(offsetX,0);
}
if((mapDiv.height() / 2) < iHeight ){
var offsetY = -(iHeight - (mapDiv.height() / 2));
map.panBy(0,offsetY);
}
}
}
}
{/if} {* end empty items *}
{/if} {* end ifset geolocation *}
}{if (isset($items)) && (count($items) > 1) && (!isset($isGeolocation))},"autofit"{/if});
map = mapDiv.gmap3("get");
infobox = new InfoBox({
pixelOffset: new google.maps.Size(-225, -65),
closeBoxURL: '',
enableEventPropagation: true
});
mapDiv.delegate('.infoBox .close','click',function () {
infobox.close();
});
if (Modernizr.touch){
{ifset $themeOptions->directoryMap->draggableForTouch}map.setOptions({ draggable : true });{else}map.setOptions({ draggable : false });{/ifset}
{ifset $themeOptions->directoryMap->draggableToggleButton}
var draggableClass = {ifset $themeOptions->directoryMap->draggableForTouch}'active'{else}'inactive'{/ifset};
var draggableTitle = {ifset $themeOptions->directoryMap->draggableForTouch}{__ 'Deactivate map'}{else}{__ 'Activate map'}{/ifset};
var draggableButton = $('<div class="draggable-toggle-button '+draggableClass+'">'+draggableTitle+'</div>').appendTo(mapDiv);
draggableButton.click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active').addClass('inactive').text({__ 'Activate map'});
map.setOptions({ draggable : false });
} else {
$(this).removeClass('inactive').addClass('active').text({__ 'Deactivate map'});
map.setOptions({ draggable : true });
}
});
{/ifset}
}
{if isset($isGeolocation) && (isset($_GET['geo-lat'])) && (isset($_GET['geo-lng'])) && (isset($_GET['geo-radius']))}
generateOnlyGeo({$_GET['geo-lat']},{$_GET['geo-lng']},{$_GET['geo-radius']});
{/if}
{include 'ajaxfunctions-javascript.php'}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment