165 lines
4.3 KiB
JavaScript
165 lines
4.3 KiB
JavaScript
|
// 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
|
||
|
|
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
|
||
|
|
var myLatlng = new google.maps.LatLng(-6.373091, 106.835175);
|
||
|
|
|
||
|
|
var mapOptions = {
|
||
|
|
// How zoomed in you want the map to start at (always required)
|
||
|
|
zoom: 10,
|
||
|
|
disableDefaultUI: false,
|
||
|
|
scrollwheel: false,
|
||
|
|
|
||
|
|
// The latitude and longitude to center the map (always required)
|
||
|
|
|
||
|
|
center: myLatlng, // New York
|
||
|
|
|
||
|
|
// How you would like to style the map.
|
||
|
|
// This is where you would paste any style found on Snazzy Maps.
|
||
|
|
styles: [
|
||
|
|
{
|
||
|
|
"featureType": "administrative",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"saturation": "-100"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "administrative.province",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"visibility": "off"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "landscape",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"saturation": -100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"lightness": 65
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"visibility": "on"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "poi",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"saturation": -100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"lightness": "50"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"visibility": "simplified"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "road",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"saturation": "-100"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "road.highway",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"visibility": "simplified"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "road.arterial",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"lightness": "30"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "road.local",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"lightness": "40"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "transit",
|
||
|
|
"elementType": "all",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"saturation": -100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"visibility": "simplified"
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "water",
|
||
|
|
"elementType": "geometry",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"hue": "#ffff00"
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"lightness": -25
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"saturation": -97
|
||
|
|
}
|
||
|
|
]
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"featureType": "water",
|
||
|
|
"elementType": "labels",
|
||
|
|
"stylers": [
|
||
|
|
{
|
||
|
|
"lightness": -25
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"saturation": -100
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
// 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 out element and options defined above
|
||
|
|
var map = new google.maps.Map(mapElement, mapOptions);
|
||
|
|
|
||
|
|
var marker = new google.maps.Marker({
|
||
|
|
position: myLatlng,
|
||
|
|
map: map,
|
||
|
|
icon: 'images/map-marker.png',
|
||
|
|
title: 'Lorem Ipsum'
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|