jQuery + google maps + Elevation
playing with google maps v3 events, jQuery, icons from http://google-maps-icons.googlecode.com
by bluetidepro
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map"></div>
CSS
#map{
width: 528px;
height: 300px;
}
JavaScript
initialize();
function initialize() {
var pinkParksStyles = [
{
featureType: "all",
stylers: [{
hue: "#35678f"},
{
saturation: 0}]},
{
featureType: "road",
stylers: [{
hue: "#f48127"},
{
saturation: 100}]}];
var pinkMapType = new google.maps.StyledMapType(pinkParksStyles, {
name: "Pink Parks"
});
var mapOptions = {
zoom: 13,
center: new google.maps.LatLng(39.8400, -86.1581),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
}
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
//use mapTypes to register pinkMapType
// map.mapTypes.set('pink_parks', pinkMapType);
//Insert styled map in overlayMapTypes.
//map.overlayMapTypes.insertAt(0, pinkMapType);
//map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}
//https://developers.google.com/maps/documentation/javascript/reference#MapTypeStyleFeatureType
//https://developers.google.com/maps/documentation/javascript/styling#creating_a_styledMapType