G
Right now the map looks dark because you have defined own styles with black and different levels of clarity for the different elements of the map. To look blue, instead of indicating the color as #000000give it a value that is a tonality of blue (for example #3020dd).Now, to add zoom controls to the map and allow the Google Street View option, the procedure will be similar. As indicated in the https://developers.google.com/maps/documentation/javascript/controls , you can specify which controls you want indicating a boolean value:zoomControl: zoom controlsmapTypeControl: map type controlsscaleControl: scale control (the bar that shows what scale the map is)streetViewControl: controls to allow Google Street ViewrotateControl: controls to allow the rotation of the mapfullscreenControl: controls to put the map in full screen modeIn your case it would be the zoom and Google Street View, so you have to add:zoomControl: true,
streetViewControl: true,
And on that same page, it tells you how to position the controls within the map, in your case it would be something like this (to put them in the upper left corner):zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
That the code would remain with those changes://jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
var myOptions = {
zoom: 15,
center: new google.maps.LatLng(53.385873, -1.471471),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
styles: [{
"featureType": "water",
"elementType": "geometry",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 17
}]
}, {
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 20
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 17
}]
}, {
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 29
}, {
"weight": 0.2
}]
}, {
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 18
}]
}, {
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 16
}]
}, {
"featureType": "poi",
"elementType": "geometry",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 21
}]
}, {
"elementType": "labels.text.stroke",
"stylers": [{
"visibility": "on"
}, {
"color": "#3020dd"
}, {
"lightness": 16
}]
}, {
"elementType": "labels.text.fill",
"stylers": [{
"saturation": 36
}, {
"color": "#3020dd"
}, {
"lightness": 40
}]
}, {
"elementType": "labels.icon",
"stylers": [{
"visibility": "off"
}]
}, {
"featureType": "transit",
"elementType": "geometry",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 19
}]
}, {
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 20
}]
}, {
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{
"color": "#3020dd"
}, {
"lightness": 17
}, {
"weight": 1.2
}]
}]
};
var map = new google.maps.Map(document.getElementById('map'), myOptions);#map {
width: 100%;
height: 200px;
margin-top: 100px;
}<div id="map"></div>
<!-- Google Maps API Key - You will need to use your own API key to use the map feature -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Core JavaScript Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
