Google Maps

footer.tpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
{if isset($maps)}
  <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
{/if}

index.tpl

        <div id="map">
          <span class="loading">Karte wird geladen</span>
        </div>

{include file="includes/footer.tpl" maps=true}

javascript.js

  // Kontakt > Google Maps
  if($('#map').length > 0){
    var myLatlng = new google.maps.LatLng(XXX);
    var map = new google.maps.Map($('#map')[0],{
      zoom: 12,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      streetViewControl: false,
      mapTypeControl: false,
      scrollwheel: false,
      navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }
    });
    var marker = new google.maps.Marker({
      position: myLatlng,
      map: map
    });
  }

style.css

#map {width: 100%; height: 500px;}