Skip to content

Instantly share code, notes, and snippets.

@moxdev
Last active November 2, 2016 15:47
Show Gist options
  • Save moxdev/4db603434241d3b1e108a06ef53ad2ca to your computer and use it in GitHub Desktop.
Save moxdev/4db603434241d3b1e108a06ef53ad2ca to your computer and use it in GitHub Desktop.
Google Maps Initializer with Dynamic loading
document.addEventListener('DOMContentLoaded', function () {
if (document.querySelectorAll('#map-canvas').length > 0) {
if (document.querySelector('html').lang)
lang = document.querySelector('html').lang;
else
lang = 'en';
var js_file = document.createElement('script');
js_file.type = 'text/javascript';
js_file.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyCpyM0WKh2D56hXCJvays0YYDlXaG1A8u8&callback=initialize&language=' + lang;
document.getElementsByTagName('body')[0].appendChild(js_file);
}
});
function initialize() {
// VARIABLES WE WILL NEED
var infowindow = new google.maps.InfoWindow();
var center = new google.maps.LatLng(latitude,longitude);
// SET UP A CUSTOM MAP STYLE
var procopioStyles = [
{
"stylers": [
{ "hue": "#93caea" },
{ "saturation": -40 }
]
}, {
featureType: "poi",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": [{"saturation": -75}, {"color": "#8fbeee"}, {"lightness": 50}]
}
];
// ADD NAMES FOR OUR CUSTOM MAP TYPE CONTROLS
var procopioMap = new google.maps.StyledMapType(procopioStyles, {
name: 'Procopio Family Homes'
});
// SET OUR MAP OPTIONS
var myOptions = {
zoom:13,
center: center,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
/// ADD AND REMOVE SOME DEFAULT MAP CONTROLS
//zoomControl: false,
mapTypeControl: false,
scrollwheel: false,
panControl:false,
rotateControl:false,
streetViewControl:false,
// ADD ALL OF THE MAP TYPES THAT WE WANT TO USE IN OUR MAP
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.TERRAIN, google.maps.MapTypeId.SATELLITE, 'procopioStyles']
}, mapTypeId: google.maps.MapTypeId.ROADMAP
};
// LOAD THE MAP
var map = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
// ADD CUSTOM MAP TYPES TO MAP CONTROLS
map.mapTypes.set('procopioStyles', procopioMap);
map.setMapTypeId('procopioStyles');
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude,longitude),
map: map,
//icon:image,
zIndex: 1000
});
window.addEventListener('resize', function () {
map.setCenter(center);
});
}
// google.maps.event.addDomListener(window, 'load', initialize);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment