description = "Map Section"

[viewBag]
==
<div {% if data.section_map_id %}id="{{ data.section_map_id }}"{% endif %} class="w-100 {{ data.section_map_height }}"></div>
<!--onload="initialize()"-->
<script type="text/javascript">
    var geocoder;
    var map;
    var address ="{{ data.section_map_address }}";
    function initialize() {
        geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
        zoom: {{ data.section_map_zoom }},
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        styles:
            {% if data.section_map_style == 'basic' %}
            [{
                    "featureType": "landscape",
                    "stylers": [{
                            "color": "{{ data.section_map_landscape }}"
                        },
                        {
                            "saturation": {{ data.section_map_saturation }}
                        },
                        {
                            "gamma": {{ data.section_map_gamma }}
                        },
                        {
                            "lightness": {{ data.section_map_lightness }}
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "stylers": [{
                            "color": "{{ data.section_map_roadhighway }}"
                        },
                        {
                            "saturation": {{ data.section_map_saturation }}
                        },
                        {
                            "lightness": {{ data.section_map_lightness }}
                        },
                        {
                            "gamma": {{ data.section_map_gamma }}
                        }
                    ]
                },
                {
                    "elementType": "labels.icon",
                    "stylers": [{
                        "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "stylers": [{
                            "color": "{{ data.section_map_roadarterial }}"
                        },
                        {
                            "saturation": {{ data.section_map_saturation }}
                        },
                        {
                            "lightness": {{ data.section_map_lightness }}
                        },
                        {
                            "gamma": {{ data.section_map_gamma }}
                        },
                        {
                            "color": "{{ data.section_map_roadarterial }}"
                        }
                    ]
                },
                {
                    "elementType": "labels.text.stroke",
                    "stylers": [{
                        "visibility": "off"
                        }
                    ]
                },
                {
                    "elementType": "labels.text",
                    "stylers": [{
                        "color": "{{ data.section_map_labels }}"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "stylers": [{
                            "color": "{{ data.section_map_roadlocal }}"
                        },
                        {
                            "saturation": {{ data.section_map_saturation }}
                        },
                        {
                            "lightness": {{ data.section_map_lightness }}
                        },
                        {
                            "gamma": {{ data.section_map_gamma }}
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "stylers": [{
                            "color": "{{ data.section_map_water }}"
                        },
                        {
                            "saturation": {{ data.section_map_saturation }}
                        },
                        {
                            "lightness": {{ data.section_map_lightness }}
                        },
                        {
                            "gamma": {{ data.section_map_gamma }}
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "stylers": [{
                            "color": "{{ data.section_map_poipark }}"
                        },
                        {
                            "saturation": {{ data.section_map_saturation }}
                        },
                        {
                            "lightness": {{ data.section_map_lightness }}
                        },
                        {
                            "gamma": {{ data.section_map_gamma }}
                        }
                    ]
                }
            ]
            {% else %}
            {{ data.section_map_code|raw }}
            {% endif %}
      };
      map = new google.maps.Map(document.getElementById("{{ data.section_map_id }}"), myOptions);
      if (geocoder) {
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
            map.setCenter(results[0].geometry.location);
    
              var infowindow = new google.maps.InfoWindow(
                  { content: '<b>'+address+'</b>',
                    size: new google.maps.Size(150,50)
                  });
      
              var marker = new google.maps.Marker({
                  position: results[0].geometry.location,
                  map: map, 
                  title:address
              }); 
              google.maps.event.addListener(marker, 'click', function() {
                  infowindow.open(map,marker);
              });
    
            } else {
              alert("No results found");
            }
          } else {
            alert("Geocode was not successful for the following reason: " + status);
          }
        });
      }
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key={{ data.section_map_key }}&libraries=places&sensor=false&language={{ data.section_map_language|lower }}&region={{ data.section_map_region|upper }}&callback=initialize"></script>