michaeldank
9/10/2017 - 11:56 PM
Snazzy Maps - Change colour and description on google map. 1. Get Photoshop file called Marker from folder: G:\~Template Working Folders\Sna
Snazzy Maps - Change colour and description on google map.
- Get Photoshop file called Marker from folder: G:~Template Working Folders\Snazzy Maps, create your own custom pointer icon and upload it into thumbnail library under the name mapicon.png
- Insert HTML in require position on the page where you wish the map to display.
- Insert CSS (height is required)
- Editing JS file 4.1 - Copy and insert Snazzy Maps JS into footer. 4.2 - Search for 'var markers' within the JS file and Edit the co-ordinates and name. 4.3 - Search for 'var infoWindowContent' within the JS file and edit Business info. 4.4 - Paste desired colourscheme within the 'styles' of JS file.
<script>
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyCbFea1eVYbDazHDT_Pqufn-MGS7OS_cZc&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {
mapTypeId: 'roadmap',
// Map Colourscheme
// background colour
styles: [
// Insert Colour of map in here
]
};
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);
// Multiple Markers
var markers = [
// Specify Name of Element and co-ordinates of pointer (Right click, 'what's here?')
['Havealook Websites ', -37.810296, 144.954121]
];
//change icons
var icons = "/thumbnaillarge/mapicon.png";
// Info Window Content
var infoWindowContent = [
['<div class="info_content">' +
'<h3>YOUR BUSNESS NAME</h3>' +
'<p><strong>Phone:</strong> YOUR PHONE</p>' +
'<p><strong>Email:</strong> <a href="mailTo:info@youremail.com">YOU EMAIL</a> </p>' +
'<p>Monday to Friday: YOUR Work Hours</p>' +
'</div>']
];
// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
//icon: icons[i]
icon: icons
});
// Allow each marker to have an info window
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(12);
google.maps.event.removeListener(boundsListener);
});
}
</script>#map_wrapper {
height: 450px;/* Height Required */
}
#map_canvas {
width: 100%;
height: 100%;
}{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#7f8d89"},{"lightness":80}]},
{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"off"},{"color":"#000000"},{"lightness":16}]},
{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},
{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},
{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},
{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},
{"featureType":"landscape","elementType":"geometry.fill","stylers":[{"color":"#4d6059"}]},
{"featureType":"landscape","elementType":"geometry.stroke","stylers":[{"color":"#4d6059"}]},
{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"color":"#4d6059"}]},
{"featureType":"poi","elementType":"geometry","stylers":[{"lightness":21}]},
{"featureType":"poi","elementType":"geometry.fill","stylers":[{"color":"#4d6059"}]},
{"featureType":"poi","elementType":"geometry.stroke","stylers":[{"color":"#4d6059"}]},
{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"on"},{"color":"#7f8d89"}]},
{"featureType":"road","elementType":"geometry.fill","stylers":[{"color":"#7f8d89"}]},
{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#7f8d89"},{"lightness":17}]},
{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#7f8d89"},{"lightness":29},{"weight":0.2}]},
{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},
{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#7f8d89"}]},
{"featureType":"road.arterial","elementType":"geometry.stroke","stylers":[{"color":"#7f8d89"}]},
{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},
{"featureType":"road.local","elementType":"geometry.fill","stylers":[{"color":"#7f8d89"}]},
{"featureType":"road.local","elementType":"geometry.stroke","stylers":[{"color":"#7f8d89"}]},
{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},
{"featureType":"water","elementType":"all","stylers":[{"color":"#2b3638"},{"visibility":"on"}]},
{"featureType":"water","elementType":"geometry","stylers":[{"color":"#2b3638"},{"lightness":17}]},
{"featureType":"water","elementType":"geometry.fill","stylers":[{"color":"#24282b"}]},
{"featureType":"water","elementType":"geometry.stroke","stylers":[{"color":"#24282b"}]},
{"featureType":"water","elementType":"labels","stylers":[{"visibility":"off"}]},
{"featureType":"water","elementType":"labels.text","stylers":[{"visibility":"off"}]},
{"featureType":"water","elementType":"labels.text.fill","stylers":[{"visibility":"off"}]},
{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},
{"featureType":"water","elementType":"labels.icon","stylers":[{"visibility":"off"}]}{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},
{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},
{"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":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},
{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},
{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},
{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},
{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},
{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},
{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},
{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}{"featureType":"all","elementType":"all","stylers":[{"invert_lightness":false},{"saturation":0},{"lightness":0},{"gamma":1},{"hue":"#558200"}]}{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},
{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},
{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},
{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},
{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},
{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},
{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21}]},
{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":17}]},
{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":29},{"weight":0.2}]},
{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},
{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},
{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},
{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}{"featureType":"all","elementType":"labels","stylers":[{"visibility":"on"}]},
{"featureType":"all","elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#000000"},{"lightness":40}]},
{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#000000"},{"lightness":16}]},
{"featureType":"all","elementType":"labels.icon","stylers":[{"visibility":"off"}]},
{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#000000"},{"lightness":20}]},
{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#000000"},{"lightness":17},{"weight":1.2}]},
{"featureType":"administrative.country","elementType":"labels.text.fill","stylers":[{"color":"#e5c163"}]},
{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#c4c4c4"}]},
{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#e5c163"}]},
{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":20}]},
{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":21},{"visibility":"on"}]},
{"featureType":"poi.business","elementType":"geometry","stylers":[{"visibility":"on"}]},
{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#e5c163"},{"lightness":"0"}]},
{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"visibility":"off"}]},
{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},
{"featureType":"road.highway","elementType":"labels.text.stroke","stylers":[{"color":"#e5c163"}]},
{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":18}]},
{"featureType":"road.arterial","elementType":"geometry.fill","stylers":[{"color":"#575757"}]},
{"featureType":"road.arterial","elementType":"labels.text.fill","stylers":[{"color":"#ffffff"}]},
{"featureType":"road.arterial","elementType":"labels.text.stroke","stylers":[{"color":"#2c2c2c"}]},
{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":16}]},
{"featureType":"road.local","elementType":"labels.text.fill","stylers":[{"color":"#999999"}]},
{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":19}]},
{"featureType":"water","elementType":"geometry","stylers":[{"color":"#000000"},{"lightness":17}]}{"featureType":"all","elementType":"all","stylers":[{"invert_lightness":true},{"saturation":60},{"lightness":50},{"gamma":0.5},{"hue":"#35868b"}]}