ARE fin

by Singhi Deisenhofer

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div class="filters">
  <ul>
    <li id="bar" onclick="toggleGroup('bar', this);" class="active"><img src="http://www.vanith.de/img/icon_bar.png" /> Bars</li>
    <li id="hotel" onclick="toggleGroup('hotel', this)"  class="active"><img src="http://www.vanith.de/img/icon_hotel.png" /> Hotel</li>
    <li id="restaurant" onclick="toggleGroup('restaurant', this)"  class="active"><img src="http://www.vanith.de/img/icon_restaurant.png" /> Restaurant</li>
    <li id="shopping" onclick="toggleGroup('shopping', this)"  class="active"><img src="http://www.vanith.de/img/icon_shopping.png" />Shopping</li>
    <li id="freizeit" onclick="toggleGroup('freizeit', this)"  class="active"><img src="http://www.vanith.de/img/icon_freizeit.png" />Freizeit & Wellness</li>
    <li id="kultur" onclick="toggleGroup('kultur', this)"  class="active"><img src="http://www.vanith.de/img/icon_kultur.png" /> Kunst & Kultur</li>
    <li class="map-print">Drucken</li>
  </ul>
</div>
<div id="map" style="width: 100%; height: 400px"></div>

CSS

body {
 font-family: arial; 
  
}

#map {
  position: relative;
}

.filters {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 20px;
  left: 20px;
  border: 0px solid #999;
  border-radius: 2px;
  padding: 0;
  z-index: 999;
}

.filters ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.filters ul li {
  display: block;
  padding: 10px 15px 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #e4e4e4;
  border-bottom-color: rgba(228, 228, 228, 0.8);
  margin-bottom: -1px;
  font-size: 14px;
  color: #666;
}

.filters ul li img {
  margin: 0 3px -4px 0;
}


.filters ul li#bar.active {
  background: #e4002b;
  color: #fff;
   
}
 .filters ul li#hotel.active {
  background: #00a9e0;
  color: #fff;
}
 .filters ul li#restaurant.active {
  background: #ffcd00;
  color: #fff;
}
 .filters ul li#shopping.active {
  background: #df1995;
  color: #fff;
}
.filters ul li#freizeit.active {
  background: #97d700;
  color: #fff;
}
.filters ul li#kultur.active {
  background: #7d55c7;
  color: #fff;
}
.filters ul li a img {
  margin: 0 5px -3px 0;
  }
.filters ul li#bar:hover,
.filters ul li#hotel:hover,
.filters ul li#restaurant:hover,
.filters ul li#shopping:hover,
.filters ul li#freizeit:hover, 
.filters ul li#kultur:hover {
 opacity: 0.8;
}

JavaScript

// INIT
function load() {
	// Create Map
	map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(48.130266, 11.537999),
    zoom: 15,
    styles: styles,
    mapTypeControl: false,
    streetViewControl: false
  });
  
  // Home Polygon - Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
  	{lat: 48.130723,lng: 11.536538},
    {lat: 48.130466,lng: 11.536259},
    {lat: 48.129191,lng: 11.538692},
    {lat: 48.130265,lng: 11.538976},
    {lat: 48.130265,lng: 11.538402}, 
    {lat: 48.130602,lng: 11.538402}, 
    {lat: 48.131114,lng: 11.537206}, 
    {lat: 48.130659,lng: 11.536755}
	];
  // Home Polygon - Construct the polygon.
  var homepoly = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#003781',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#009ee0',
    fillOpacity: 0.2
  });
  homepoly.setMap(map);

  
  // Set up Marker & Infowindows
  var infoWindow = new google.maps.InfoWindow();
  // downloadUrl("phpsqlajax_genxml.php", function(data) {
  var xml = parseXml(xmlStr); // data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  var bounds = new google.maps.LatLngBounds();
  
  for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var address = markers[i].getAttribute("address");
    var website = markers[i].getAttribute("website");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng"))
    );
    bounds.extend(point);
    var type = markers[i].getAttribute("type");
    var html = "<b>" + name + "</b> <br/>" + address + "<br/><a href='" + website + "' target='_blank'>" + website + "</a>";
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon
    });
    markerGroups[type].push(marker);   
   ...