Skip to content

Instantly share code, notes, and snippets.

@landru247
Created June 22, 2016 17:43
Show Gist options
  • Save landru247/88c162b36c1d23880665c561c7d093b1 to your computer and use it in GitHub Desktop.
Save landru247/88c162b36c1d23880665c561c7d093b1 to your computer and use it in GitHub Desktop.
MAP - (Foundation) -- This google map code displays two locations and the map will switch location on hover
<div id="map-1" class="control-padding-lg topmargin-sm">
<div class="container-fullwidth clearfix">
<div class="fancy-title title-border title-center">
<h2>Two Locations</h2>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var markers = [];
var map;
function initialize() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
zoom: 13,
scrollwheel: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.DEFAULT
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.DEFAULT
},
streetViewControl: false,
scaleControl: false,
overviewMapControl: false,
center: new google.maps.LatLng(36.14919484138667, -115.17062804152829)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var icon = {
path: 'M16.5,51s-16.5-25.119-16.5-34.327c0-9.2082,7.3873-16.673,16.5-16.673,9.113,0,16.5,7.4648,16.5,16.673,0,9.208-16.5,34.327-16.5,34.327zm0-27.462c3.7523,0,6.7941-3.0737,6.7941-6.8654,0-3.7916-3.0418-6.8654-6.7941-6.8654s-6.7941,3.0737-6.7941,6.8654c0,3.7916,3.0418,6.8654,6.7941,6.8654z',
anchor: new google.maps.Point(16.5, 51),
fillColor: '#00008C',
fillOpacity: 1,
strokeWeight: 2,
strokeColor: '#FFFFFF',
strokeOpacity: 1,
scale: 0.66
};
var locations = [
['<p><strong>Newport Motors - East:</strong></p><p>2711 E. Sahara Ave.<br />Las Vegas, NV 89104</p><p><a href="/view-inventory.aspx">View Inventory</a></p>', 36.1435205, -115.11383430000001, icon],
['<p><strong>Newport Motors - West:</strong></p><p>6175 W. Sahara Ave.<br />Las Vegas, NV 89146</p><p><a href="/view-inventory.aspx">View Inventory</a></p>', 36.1433615, -115.22707400000002, icon]
];
var marker, i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: locations[i][3]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
map.setZoom(15);
map.setCenter(marker.getPosition());
}
})(marker, i));
markers.push(marker);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function myClick(id){
google.maps.event.trigger(markers[id], 'click');
}
function mapCenter(){
map.setZoom(15);
map.setCenter(marker.getPosition());
}
google.maps.event.addDomListener(window, 'load', initialize);
function checkResize(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
}
window.onresize = checkResize;
</script>
<div class="location--core">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 col-xs-6 location--inside">
<div class="well" onmouseover="myClick(0);mapCenter();">
<address>
<strong>Newport Motors - East:</strong><br>
2711 E. Sahara Ave.<br>
Las Vegas, NV 89104<br>
Phone: 702-470-2154
</address>
<a href="https://goo.gl/maps/RS1XjZsHk4n" target="_blank">Get Directions</a>
</div>
</div>
<div class="col-sm-12 col-xs-6 location--inside">
<div class="well" onmouseover="myClick(1);mapCenter();">
<address>
<strong>Newport Motors - West:</strong><br />
6175 W. Sahara Ave.<br />
Las Vegas, NV 89146<br />
Phone: 702-997-1110
</address>
<a href="https://goo.gl/maps/CDEG1kikGVL2" target="_blank">Get Directions</a>
</div>
</div>
</div>
</div>
<div class="col-sm-8">
<div id="map-canvas"></div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment