JAVASCRIPT
//work in progress...
var config = {
areaID : 'gmap'
//if nothing, we use the default location array
//,locations : {}
},
//You can use map style configuration (like snazzymaps.com configuration themes)
mapConfig =
[{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]}];
(function()
{
$.getScript('https://maps.googleapis.com/maps/api/js?key=AIzaSyCr8UtPQyPQWTZLl42Xm_mKks4jUL9Cdw4&callback=mapManager');
})();
function mapManager()
{
//Setup the map with 'config'
iniMap( config );
}
function iniMap( options )
{
//Custom configuration
var defaults =
{
//Basic settings
locations : [ ['<p>Art Solution - Belgium</p>', 50.822015, 4.369690] ],
centerMap : [ 50.822015, 4.369690 ],
areaID : 'google-map',
zoom : 16,
//Styled Map
style : ( typeof mapConfig === "undefined") ? {} : mapConfig,
//Templates that can be applied on each Markers
useTemplate : false,
templates :
{
heading : '<a href="http://www.artsolution.net" title="www.artsolution.net">'
+ '<img class="logo-gallery gmap-marker" href="" alt="Art Solution (logo)" />'
+ '</a>',
footer : '<p style="text-align:center;">'
+ 'contact: EU: +32 2 627 00 00 | UK: +44 20 7193 4925'
+ '<p>'
},
markerOptions : {}, //use defaut values
mapOptions :
{
//map options
//doc: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
mapTypeId : google.maps.MapTypeId.TERRAIN,
scrollwheel : false,
/*
overviewMapControl : true,
OverviewMapControlOptions: {
opened : true
},
*/
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.LEFT_TOP
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_LEFT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
mapTypeControl: false,
mapTypeControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
}
}
};
var s = $.extend({}, defaults, options),
conf = $.extend({}, s.mapOptions, { zoom : s.zoom, center : {lat: s.centerMap[0] , lng: s.centerMap[1]} }),
confMarker = s.markerOptions,
map, markers = [];
//Initialse map
//src: http://goo.gl/3EB879
google.maps.event.addDomListener(window, 'load', init);
function init()
{
map = new google.maps.Map( document.getElementById( s.areaID ), conf ); //apply custom configuration
map.setOptions( {styles: s.style} ); //apply custom style (https://goo.gl/zn32ZQ)
var num_markers = s.locations.length;
//Center the marker on window resize (http://goo.gl/N4KG8i)
if( num_markers === 1 )
{
google.maps.event.addDomListener(window, 'resize', function()
{
map.panTo( markers[0].getPosition() );
});
}
//Create a marker for each locations
for (var i = 0; i < num_markers; i++)
{
var mDefault =
{
position:
{
lat : s.locations[i][1],
lng : s.locations[i][2]
},
map : map,
html : ( !s.useTemplate ) ? s.locations[i][0] : s.templates.heading + s.locations[i][0] + s.templates.footer,
id : i
};
var mSettings = $.extend({}, mDefault, confMarker);
markers[i] = new google.maps.Marker( mSettings );
//Click event
google.maps.event.addListener(markers[i], 'click', function()
{
//Prepare the info window
var infowindow = new google.maps.InfoWindow(
{
id: this.id,
content:this.html,
position:this.getPosition()
});
//hide info window on closeclick button
google.maps.event.addListenerOnce(infowindow, 'closeclick', function()
{
//Show this marker
markers[ this.id ].setVisible(true);
});
//hide this marker
this.setVisible(false);
//Center map to the selected marker
map.setZoom( conf.zoom );
map.setCenter( markers[ this.id ].getPosition() );
//open info window
infowindow.open(map);
});
}
}
}
