wesurf-mapa.js

/**
 * 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);
    });

}