You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
6.1 KiB
223 lines
6.1 KiB
// ---------------------------------------------------------------------------------------------------------------------------->
|
|
// MAP ELEMENT ||-----------
|
|
// ---------------------------------------------------------------------------------------------------------------------------->
|
|
|
|
|
|
// When the window has finished loading create our google map below
|
|
google.maps.event.addDomListener(window, 'load', init);
|
|
|
|
function init() {
|
|
// Basic options for a simple Google Map
|
|
var mapOptions = {
|
|
// How zoomed in you want the map to start at (always required)
|
|
zoom: 15,
|
|
scrollwheel: false, //set to true to enable mouse scrolling while inside the map area
|
|
|
|
// The latitude and longitude to center the map (always required)
|
|
center: new google.maps.LatLng(21.170240, 72.831061), // Surat
|
|
|
|
// How you would like to style the map.
|
|
// This is where you would paste any style found on Snazzy Maps.
|
|
styles: [
|
|
{
|
|
"featureType": "water",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#d3d3d3"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "transit",
|
|
"stylers": [
|
|
{
|
|
"color": "#808080"
|
|
},
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.highway",
|
|
"elementType": "geometry.stroke",
|
|
"stylers": [
|
|
{
|
|
"visibility": "on"
|
|
},
|
|
{
|
|
"color": "#b3b3b3"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.highway",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#ffffff"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.local",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"visibility": "on"
|
|
},
|
|
{
|
|
"color": "#ffffff"
|
|
},
|
|
{
|
|
"weight": 1.8
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.local",
|
|
"elementType": "geometry.stroke",
|
|
"stylers": [
|
|
{
|
|
"color": "#d7d7d7"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "poi",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"visibility": "on"
|
|
},
|
|
{
|
|
"color": "#ebebeb"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "administrative",
|
|
"elementType": "geometry",
|
|
"stylers": [
|
|
{
|
|
"color": "#a7a7a7"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.arterial",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#ffffff"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.arterial",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#ffffff"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "landscape",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"visibility": "on"
|
|
},
|
|
{
|
|
"color": "#efefef"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road",
|
|
"elementType": "labels.text.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#696969"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "administrative",
|
|
"elementType": "labels.text.fill",
|
|
"stylers": [
|
|
{
|
|
"visibility": "on"
|
|
},
|
|
{
|
|
"color": "#737373"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "poi",
|
|
"elementType": "labels.icon",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "poi",
|
|
"elementType": "labels",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road.arterial",
|
|
"elementType": "geometry.stroke",
|
|
"stylers": [
|
|
{
|
|
"color": "#d6d6d6"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"featureType": "road",
|
|
"elementType": "labels.icon",
|
|
"stylers": [
|
|
{
|
|
"visibility": "off"
|
|
}
|
|
]
|
|
},
|
|
{},
|
|
{
|
|
"featureType": "poi",
|
|
"elementType": "geometry.fill",
|
|
"stylers": [
|
|
{
|
|
"color": "#dadada"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
// Get the HTML DOM element that will contain your map
|
|
// We are using a div with id="map" seen below in the <body>
|
|
var mapElement = document.getElementById('map');
|
|
|
|
// Create the Google Map using our element and options defined above
|
|
var map = new google.maps.Map(mapElement, mapOptions);
|
|
|
|
// Let's also add a marker while we're at it
|
|
var marker = new google.maps.Marker({
|
|
position: new google.maps.LatLng(21.170240, 72.831061),
|
|
map: map,
|
|
title: 'Nileforest',
|
|
icon: 'img/map-marker.png'
|
|
|
|
});
|
|
};
|