SPP RWE: Rasterelement - HTML&CSS

by Jens Kühn

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>
<div id="map_canvas"></div>
        <div style="display:none">
            <div id="artikel001">
                <article class="rasterelem wind">
                    <header>
                        <span class="icon h32 icon-traffic-yellow">&nbsp;</span>
                        <h3>Lorem Iphsd dsjfajs asfanaja</h3>
                        <span class="icons vertical">
                            <span class="icon w32 h32 icon-wind">&nbsp;</span>
                            <span class="icon w16 icon-controlling-active">&nbsp;</span>
                        </span>
                    </header>
                    <div class="location">
                        <span class="icon icon-location">&nbsp;</span>
                        Kaltswinkel-Beinhausen
                    </div>
                    <section>
                        <ul>
                            <li>
                                <div class="wrap">
                                    <b class="name">Betreiber</b>
                                    <span class="value">Musterfirma</span>
                                </div>
                            </li>
                            <li>
                                <div class="wrap">
                                    <b class="name">Regelzone</b>
                                    <span class="value">Amprion</span>
                                </div>
                            </li>
                        </ul>
                    </section>
                    <section class="vermarktung">
                        <b class="name">Vermarktungstyp</b>
                        <ul>
                            <li class="active">DV</li>
                            <li>MR</li>
                            <li class="active">SR</li>
          ...

CSS

#map_canvas {
     margin: 0;
     padding: 0;
     width: 640px;
     height: 480px;
 }
 .infoBox {
     padding:0px;
     border:0px solid #aaa;
 }

 .infoBox > img{
     position: absolute !important;
     right: 0;
 }

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
  display: block;
}
.content header, .content section, .content footer {
  clear: both;
  display: block;
}
article {
  background-color: #FFFFFF;
  margin: 20px;
  word-wrap: break-word;
  color: #757575;
  font-size: 11px;
}

.rasterelem{
    float: left;
    clear: none;
    width: 181px;
    height: 248px;
    margin-left: 20px;
    
    border: 1px solid #7bb52b;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 2px 0 2px #e2e2e2;
    -moz-box-shadow: 2px 0 2px #e2e2e2;
    box-shadow: 2px 0 2px #e2e2e2;
}
.rasterelem header{
    height: 60px;
    background: none;
    font-weight: bold;
    padding: 12px 8px 0 8px;
}
.rasterelem header h3{
    float: left;
    display: block;
    width: 106px;
    margin:0;
    padding:0 5px 0 0;
    font-size:11px;
    font-weight: bold;
}
.rasterelem .location {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-image: none;
  border-style: solid none;
  border-width: 1px medium;
  font-weight: bold;
  padding: 7px 8px 6px;
}
.rasterelem section {
  padding: 2px 8px 0;
}
.rasterelem .wrap {
  overflow: hidden;
  padding: 2px 0 2px 77px;
  text-align: right;
}
.rasterelem .name {
  color: #666666;
  float: left;
  font-weight: normal;
  text-align: left;
}
.rasterelem .value {
  font-weight: bold;
}
.rasterelem .wrap .name {
  margin: 0 0 0 -77px;
  padding: 0;
  width: 66px;
}

.rasterelem ul {
  border-bottom: 1px solid #BABABA;
  list-style: none outside none;
  margin: 0;
  padding: 0 0 3px;
  width: 100%;
}
.vermarktung ul {
  clear: both;
  height: 24px;
 ...

JavaScript

initialize();

var map;      
var marker1;
var marker1pos;      
var marker2;
var marker2pos;      
var infobox;
function initialize() {
    var mapOptions = {
        zoom: 9,
        center: new google.maps.LatLng(51.316881, 10.675048),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    marker1pos = new google.maps.LatLng(51.316881, 10.675048);
    marker1 = new google.maps.Marker({
         position: marker1pos,
         map: map,
         title:"Netzpunkt",
         icon: "http://google-maps-icons.googlecode.com/files/windturbine.png"
     });

     marker2pos = new google.maps.LatLng(51.556881, 10.995048);
     marker2 = new google.maps.Marker({
         position: marker2pos,
         map: map,
         title:"Netzpunkt",
         icon: "http://google-maps-icons.googlecode.com/files/apartment.png"
     });

     infobox = new InfoBox({
         content: "",
         disableAutoPan: false,
         maxWidth: 0,
         pixelOffset: new google.maps.Size(-91, -300),
         zIndex: null,
         boxStyle: {
             background: "none",
             opacity: 1.0,
             height:"250px",
             width: "182px"
         },
         closeBoxMargin: "5px 5px 0 0",
         closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
         infoBoxClearance: new google.maps.Size(1, 1)
     });

     google.maps.event.addListener(marker1, 'click', function() {
         infobox.setContent($('#artikel001').html());
         infobox.open(map, this);
         map.panTo(marker1pos);
     });

     google.maps.event.addListener($('#artikel001close'), 'click', function() {
         infobox.close(map, this);
     });

     google.maps.event.addListener(marker2, 'click', function() {
         infobox.setContent($('#artikel002').html());
         infobox.open(map, this);
         map.panTo(marker2pos);
     });
}