Created
October 14, 2015 18:52
-
-
Save castroalves/cc8f24a4307d46d41f54 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
/** | |
* Created by Cadu de Castro Alves | |
*/ | |
(function() { | |
// Load Google Maps API | |
var mapCanvas = document.getElementById("map-canvas"); | |
if( typeof mapCanvas !== 'undefined' ) { | |
var script = document.createElement('script'); | |
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"; | |
document.body.appendChild(script); | |
} | |
})(); | |
function initialize() { | |
var map; | |
var bounds = new google.maps.LatLngBounds(); | |
var mapOptions = { | |
scrollwheel: false, | |
center: new google.maps.LatLng( -14.2392976, -53.1805018 ), | |
zoom: 16, | |
mapTypeId: 'roadmap', | |
styles: styles | |
}; | |
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); | |
map.setTilt(45); | |
// Multiple Markers | |
// .photo-item => classe da div que trará os itens de resultado da busca | |
var markers = document.getElementsByClassName('photo-item') || []; | |
// Display multiple markers on a map | |
var infoWindow = new google.maps.InfoWindow(), marker, i; | |
// Loop through our array of markers & place each one on the map | |
for( i = 0; i < markers.length; i++ ) { | |
// Pega a latitude e longitude da foto | |
var position = new google.maps.LatLng(markers[i].dataset.latitude, markers[i].dataset.longitude); | |
bounds.extend(position); | |
marker = new google.maps.Marker({ | |
position: position, | |
map: map, | |
animation: google.maps.Animation.DROP, | |
title: markers[i][0] | |
}); | |
google.maps.event.addListener(marker, 'click', (function (marker, i) { | |
return function () { | |
infoWindow.setContent( | |
'<div class="map-photo-info">' + | |
'<div class="map-photo-info__thumb">' + | |
'<img src="' + markers[i].dataset.photo + '" />' + | |
'</div>' + | |
'<div class="map-photo-info__content">' + | |
'<h3 class="title">' + markers[i].dataset.title + '</h3>' + | |
'<div class="location">' + markers[i].dataset.location + '</div>' + | |
'</div>' + | |
'</div>' | |
); | |
infoWindow.open(map, marker); | |
} | |
})(marker, i)); | |
// Automatically center the map fitting all markers on the screen | |
map.fitBounds(bounds); | |
} | |
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once) | |
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) { | |
if( markers[0].className == 'space-map' ) { | |
this.setZoom( 14 ); | |
} else { | |
this.setZoom( 4 ); | |
} | |
google.maps.event.removeListener(boundsListener); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment