Created
June 22, 2016 17:43
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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