Responsive Google Maps

index.html

<section class="map cf">
  <header>
  <h3>Super Responsive Map</h3>
  </header>
  <div class="map" id="map"></div>
  <ul class="mapinfo"></ul>          
</section>

script.js

$.getJSON('map.json', function ( data ) {

  var myOptions = {
        zoom: data.zoom,
        center: new google.maps.LatLng(data.mainLatitude, data.mainLongitude),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        styles: data.styles
      },
      map = new google.maps.Map(document.getElementById('map'), myOptions);

  $.each(data.markers, function ( i, markerData ) {

    var markerImage = {
          url: markerData.image + '.png',
          scaledSize: new google.maps.Size(data.markerWidth, data.markerHeight),
          origin: new google.maps.Point(0,0),
          anchor: new google.maps.Point(data.markerHeight/2, data.markerHeight)
        },
        markerOptions = {
          map: map,
          position: new google.maps.LatLng(markerData.latitude, markerData.longitude),
          title: markerData.title,
          animation: google.maps.Animation.DROP,
          icon: markerImage,
          optimized: false
        },
        marker = new google.maps.Marker(markerOptions),
        markerTemplate = _.template('<li style="background-image: url(<%= image %>.png)"><h4><%= title %></h4><a href="http://maps.google.com/maps?daddr=<%= latitude %>,<%= longitude %>" target="_blank">Directions<a></li>', markerData);

        $('.mapinfo').append(markerTemplate);

  });

});

styles.css

section {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 1em;
}

ul {
  padding-left: 1em;
  width: 30%;
  float: left;
  list-style: none;
}

li {
  margin-bottom: .6em;
  padding-left: 3.5em;
  background-size: 45px 49px;
  background-repeat: no-repeat;
}

.map {
  height: 0;
  padding-bottom: 56.25%;
  padding-top: 30px;
}

@media (min-width: 44.375em) {
  .map {
    width: 60%;
    float: left;
  }
}

@media (min-width: 80.0625em) {
  section {
    max-width: 1010px;
  }
  body {
    font-size: 125%;
  }
}