dsebao
6/21/2017 - 5:49 PM

Simple Google Map

Simple Google Map

  <div style='overflow:hidden;height:500px;width:100%;'>
	  <div id='gmap_canvas' style='height:520px;width:100%;'></div>
  </div>
		
	<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=yourkey'></script>
	<script type='text/javascript'>
		function mapa(){
			var myOptions = {
				zoom:16,
				scrollwheel: false,
				center:new google.maps.LatLng(-45.891403,-67.5179172),
				styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape.natural.landcover","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#ff0000"}]},{"featureType":"landscape.natural.terrain","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#ff0000"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi.park","elementType":"all","stylers":[{"lightness":"5"},{"saturation":"30"},{"gamma":"0.75"},{"weight":"0.69"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"visibility":"on"}]},{"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"hue":"#ff0000"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":"-100"},{"lightness":"7"},{"visibility":"simplified"},{"hue":"#ff0000"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"simplified"},{"lightness":"13"},{"saturation":"27"},{"gamma":"1.93"}]}],
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};

			map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);
			marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(-45.891403,-67.5179172)});
			infowindow = new google.maps.InfoWindow({content:'<strong>Name</strong><p>Demo</p>'});
			google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
			infowindow.open(map,marker);
		}
		google.maps.event.addDomListener(window, 'load', mapa);
	</script>