mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2025-10-27 16:03:10 +01:00
39 lines
3.3 KiB
JavaScript
39 lines
3.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 mapOptions = {
|
|
// How zoomed in you want the map to start at (always required)
|
|
zoom: 12,
|
|
|
|
// The latitude and longitude to center the map (always required)
|
|
center: new google.maps.LatLng(10.731688,122.550535), // Your Location Coordinates
|
|
disableDefaultUI: true,
|
|
scrollwheel: false,
|
|
|
|
// 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);
|
|
var image = 'img/marker.png';
|
|
// Let's also add a marker while we're at it
|
|
var marker = new google.maps.Marker({
|
|
position: new google.maps.LatLng(10.731688,122.550535),
|
|
animation: google.maps.Animation.DROP,
|
|
map: map,
|
|
title: 'My Office',
|
|
icon: image,
|
|
});
|
|
|
|
} |