Skip to content

Instantly share code, notes, and snippets.

@stinoga stinoga/index.html
Last active Dec 16, 2015

Embed
What would you like to do?
Responsive Google Maps
<section class="map cf">
<header>
<h3>Super Responsive Map</h3>
</header>
<div class="map" id="map"></div>
<ul class="mapinfo"></ul>
</section>
$.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);
});
});
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%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.