rexjiang92
2/23/2016 - 1:06 AM

full width custom google map (with lat and longtitude)

full width custom google map (with lat and longtitude)

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJwO6robSVhZqxIzKJ68fLNsTAfO3TJlc"></script>

<style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_canvas {
        min-height:400px;
        height: 100%;
      }
     #map_canvas img {
        max-width: none;
     }
 </style>

<p id="gmap-address" style="display:none;">[aw token_custom_address]</p>
<div id="map_canvas"></div>

<script>
var geocoder;
var map;
var address = "";

var initMap = function(){
  	
	// update address based on dom id
	address = $('#gmap-address').find('.token-address').html();
	
	
		geocoder = new google.maps.Geocoder();
		var latlng = new google.maps.LatLng(43.074071,-88.068638);
		var myOptions = {
			zoom: 15,
			center: latlng,
			//mapTypeControl: true,
			//navigationControl: true,
			zoomControl: true,
                        scrollwheel: false,
			disableDefaultUI: true,
			mapTypeId: google.maps.MapTypeId.ROADMAP,
			styles:[{"stylers":[{"saturation":-100},{"gamma":1}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.business","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi.place_of_worship","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"geometry","stylers":[{"visibility":"simplified"}]},{"featureType":"water","stylers":[{"visibility":"on"},{"saturation":50},{"gamma":0},{"hue":"#50a5d1"}]},{"featureType":"administrative.neighborhood","elementType":"labels.text.fill","stylers":[{"color":"#333333"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"weight":0.5},{"color":"#333333"}]},{"featureType":"transit.station","elementType":"labels.icon","stylers":[{"gamma":1},{"saturation":50}]}]
      // get more map styles @ <a href="https://snazzymaps.com/explore" title="https://snazzymaps.com/explore">https://snazzymaps.com/explore</a>
		};
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		if (geocoder) {
			geocoder.geocode({
				'address': address
			}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
						latlng

						var infowindow = new google.maps.InfoWindow({
							content: '<b>' + address + '</b>',
							size: new google.maps.Size(150, 50)
						});

						var marker = new google.maps.Marker({
							position: latlng,
							map: map,
							title: address
						});
						google.maps.event.addListener(marker, 'click', function() {
							infowindow.open(map, marker);
						});

					} else {
						console.log("No results found");
					}
				} else {
					console.log("Geocode was not successful for the following reason: " + status);
				}
			});
		}
  
  
	
	/* update settings live by using initMap() and options e.g.
	var mapOptions = {
		zoom: 15,
		navigationControl: false,
		styles: [{"featureType":"landscape","stylers":[{"saturation":-100},{"lightness":65},{"visibility":"on"}]},{"featureType":"poi","stylers":[{"saturation":-100},{"lightness":51},{"visibility":"simplified"}]},{"featureType":"road.highway","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"road.arterial","stylers":[{"saturation":-100},{"lightness":30},{"visibility":"on"}]},{"featureType":"road.local","stylers":[{"saturation":-100},{"lightness":40},{"visibility":"on"}]},{"featureType":"transit","stylers":[{"saturation":-100},{"visibility":"simplified"}]},{"featureType":"administrative.province","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":-25},{"saturation":-100}]},{"featureType":"water","elementType":"geometry","stylers":[{"hue":"#ffff00"},{"lightness":-25},{"saturation":-97}]}]
	}
	map.setOptions(mapOptions);
	
	more options
	{
		panControl: boolean,
		zoomControl: boolean,
		mapTypeControl: boolean,
		scaleControl: boolean,
		streetViewControl: boolean,
		overviewMapControl: boolean
	}
	
	*/
  }

  setTimeout(initMap, 100);

</script>