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>