ARE fin

by Lawrence Ross

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://maps.google.com/mapfiles/ms/micons/green.png" />Bars</li>
    <li id="hotel" onclick="toggleGroup('hotel', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/orange.png" />Hotel</li>
    <li id="restaurant" onclick="toggleGroup('restaurant', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/red.png" />Restaurant</li>
    <li id="shopping" onclick="toggleGroup('shopping', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/yellow.png" />Shopping</li>
    <li id="freizeit" onclick="toggleGroup('freizeit', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/purple.png" />Freizeit & Wellness</li>
    <li id="kultur" onclick="toggleGroup('kultur', this)" class="active">
      <img src="http://maps.google.com/mapfiles/ms/micons/grey.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

// global infowindow variable
var infoWindow = new google.maps.InfoWindow();
var map; 
// 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);

  // 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
   ...