I have already looked at a number of tutorials on Stack Overflow about how to change the colors on Google Maps, and none of them have worked for me. I just would like the map to be tinted a blue color.
Here is the Javascript I'm using for my map. The map has additional code work so that it will give directions to the users (not sure if that is somehow interfering).
Also, as dumb as this sounds, I'm unsure if I'm using the new version of Google maps. The map is being called somehow in the javascript, but I don't know where, and I'm a little confused how you know you're using the new version of google maps.
Please help!
(function () {
function Map(address, desc, title, markerico, spanId) {
var me = this;
this.spanId = spanId;
var latlng = new google.maps.LatLng(0, 0);
var blue = {
stylers: [
{ saturation: 60 },
{ lightness: 20 },
{ hue: '#0000BB'}
]
};
var myOptions = {
styles: blue,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng
};
this.map = new google.maps.Map(document.getElementById("map-" + this.spanId), myOptions);
this.contentString = (desc);
this.directionsDisplay = new google.maps.DirectionsRenderer();
this.directionsDisplay.setMap(this.map);
this.directionsDisplay.setPanel(document.getElementById("route-" + this.spanId));
this.marker = new google.maps.Marker({
position: city,
map: this.map,
title: title,
icon: markerico,
animation: google.maps.Animation.DROP
});
var infowindow = new google.maps.InfoWindow({
content: this.contentString
});
google.maps.event.addListener(this.marker, 'click', function () {
infowindow.open(me.map, me.marker);
});
this.directionsService = new google.maps.DirectionsService();
this.geocoder = new google.maps.Geocoder();
var city = address;
this.geocoder.geocode({ 'address': city }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
address = results[0].formatted_address;
me.map.setCenter(results[0].geometry.location);
me.marker.setOptions({
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
if (document.getElementById('start-' + this.spanId)) {
var input = document.getElementById('start-' + this.spanId);
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
input.className = 'notfound';
return;
}
});
}
};
Map.prototype.route = function() {
var me = this;
var radioButtons = document.getElementsByName("travel-" + this.spanId);
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
var selectedMode = radioButtons[i].value;
}
};
var request = {
origin: document.getElementById('start-' + this.spanId).value,
destination: document.getElementById('end-' + this.spanId).value,
travelMode: google.maps.TravelMode[selectedMode]
};
me.directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
me.directionsDisplay.setDirections(result);
} else if (status == google.maps.DirectionsStatus.NOT_FOUND) {
alert("No corresponding geographic location could be found for the specified address. This may be due to a recent address, or incorrect.");
}
});
};
Map.prototype.error = function (e) {
switch (e.code) {
case e.TIMEOUT:
alert('Timeout');
break;
case e.POSITION_UNAVAILABLE:
alert('Position unavailable');
break;
case e.PERMISSION_DENIED:
alert('Permission denied.');
break;
case e.UNKNOWN_ERROR:
alert('Unknown error');
break;
}
};
Map.prototype.geocode = function (l) {
latLng = new google.maps.LatLng(l.lat, l.lng);
var me = this;
me.geocoder.geocode({
'latLng': latLng
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].formatted_address);
document.getElementById('start-' + me.spanId).value = results[0].formatted_address;
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
};
Map.prototype.initiate_geolocation = function() {
var me = this;
console.log(this, this.spanId);
if (navigator.geolocation) {
// HTML5 GeoLocation
function getLocation(position) {
me.geocode({
"lat": position.coords.latitude,
"lng": position.coords.longitude
});
}
navigator.geolocation.getCurrentPosition(getLocation, this.error);
} else if(typeof google == 'object') { // Google AJAX API fallback GeoLocation
if (google.loader.ClientLocation) {
this.geocode({
"lat": google.loader.ClientLocation.latitude,
"lng": google.loader.ClientLocation.longitude
});
}
}
};
function createMaps() {
var spans = document.getElementsByTagName("SPAN");
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
if (span.className != 'mapgen')
continue ;
var spanId = span.id;
var organisation = span.getAttribute('data-org');
var phone = span.getAttribute('data-phone');
var url = span.getAttribute('data-url');
var fax = span.getAttribute('data-fax');
var title = span.getAttribute('data-title');
var desc = span.getAttribute('data-desc');
var street = span.getAttribute('data-street');
var city = span.getAttribute('data-city');
var state = span.getAttribute('data-state');
var zip = span.getAttribute('data-zip');
var country = span.getAttribute('data-country');
var image = span.getAttribute('data-image');
var markerico = span.getAttribute('data-marker');
var mode = span.getAttribute('data-mode');
var address = '' + street + ',' + city + ',' + country + '.';
var orgid = organisation.replace(/ /g, "-");
if ( mode == "only") {
var htmlmap = '<div class="form-gmaps clearfix" id="form-gmaps-'+spanId+'" >'
+'<input class="end hidden" id="end-'+spanId+'" name="to" readonly="readonly" type="text" value="Los Angeles" />'
+' <div class="contentmap" id="contentmap-'+spanId+'" >'
+' <div class="map" id="map-'+spanId+'" ></div> '
+' </div> '
+'</div>';
document.getElementById(spanId).innerHTML += htmlmap;
} else if (mode == "itinerary") {
var htmlmap = '<div class="form-gmaps clearfix" id="form-gmaps-'+spanId+'" >'
+'<form style="display:block;" id="geoloc-'+spanId+'" name="geoloc" action="" method="post">'
+' <table class="iti" border="0" width="696">'
+' <tbody>'
+' <tr valign="top">'
+' <td align="right" class="o">'
+' <label for="start" class="1-1">Start :</label>'
+' </td>'
+' <td align="left">'
+' <input id="start-'+spanId+'" name="from" class="start n" type="text">'
+' </td>'
+' <td class="annoy" align="left" >'
+' <input type="radio" name="travel-'+spanId+'" value="DRIVING" checked="checked"> Driving'
+' </td>'
+' </tr>'
+' <tr>'
+' <td align="left" class="th">'
+' <label for="end">End :</label>'
+' </td>'
+' <td>'
+' <input class="end" id="end-'+spanId+'" name="to" readonly="readonly" class="n" type="text" value="'+address+'">'
+' </td>'
+' <td class="f fy" >'
+' <input class="get" id="iti-'+spanId+'" type="button" value="Directions">'
+' </td>'
+' <td class="annoy2" align="left" >'
+' <input type="radio" name="travel-'+spanId+'" value="WALKING" > Walking'
+' </td>'
+' </tr>'
+' </tbody>'
+' </table>'
+'</form>'
+'<div class="contentmap" id="contentmap-'+spanId+'" >'
+' <div id="map-'+spanId+'" class="map"></div> '
+' <div id="route-'+spanId+'">'
+' </div>'
+' </div> '
+'</div>';
document.getElementById(spanId).innerHTML += htmlmap;
}
var desctot = '<div id="hcard-'+orgid+'" class="vcard">'
+'<div class="org" style=\"font-family:sans-serif;\">'
+' <b>'+organisation+'</b>'
+'</div>'
+'<hr>'
+'<span style=\"font-size:12px;line-height:20px;font-family:sans-serif;\">'
+' <b>Url : </b>'
+' <a class="url fn n" href="'+url+'" title="'+title+'">'+title+'</a>'
+' <br />'
+' <b>Description : </b>'
+' '+desc+'<br />'
+' <b style="display:inline-block;">Address : </b>'
+' <div class="adr" style="display:inline-block;">'
+' <div class="street-address" style="display:inline-block;"> '+street+'</div>, <span class="locality">'+city+'</span> , <span class="locality">'+state+'</span> , <span class="locality">'+zip+'</span> , <span class="country-name">'+country+'</span>.'
+' </div>'
+' <br />'
+' <b>Phone : </b>'
+' <div class="tel" style="display:inline-block;">'+phone+'</div>'
+' <br />'
+' <b>Fax : </b>'
+' <div class="tel" style="display:inline-block;">'+fax+'</div>'
+' <br />'
+' <div class="img-shop">'
+' <img src="'+image+'" height="50" width="300"> '
+' </div>'
+' </span>'
+'</div>';
var map = new Map(address, desctot, title, markerico, spanId);
if (mode == "itinerary") {
var tmap = map; // Create a copy of map in tmap to use in onclick callback
document.getElementById('iti-'+spanId+'').onclick = function () { tmap.route() };
document.getElementById('geo-'+spanId+'').onclick = function () { tmap.initiate_geolocation() };
}
}
};
google.maps.event.addDomListener(window, 'load', createMaps);
}
)();