moxdev
11/2/2016 - 3:46 PM

Google Maps Initializer with Dynamic loading

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);