display_nearby.js

  $(function() {

            initializeMap();

            $("#ContactForm").submit(function(e) {
                SendContactEmail(); return false;
            });

	    });

        var scrollTimer;

        var infowindow;

		var initializeMap = function() {

            var mylocation = {
                lat: 35.8712200000,
                lng: -86.8113599000            };

            if ($("#map-canvas").length) {

                var map_canvas = new google.maps.Map(document.getElementById('map-canvas'), {
                    center: mylocation,
                    zoom: 16,
                    mapTypeId: google.maps.MapTypeId.HYBRID,
                    styles: [
                        {
                            "featureType": "poi",
                            "stylers": [
                                {
                                    "visibility": "off"
                                }
                            ]
                        }
                    ]
                });
                
                var marker = new google.maps.Marker({
                    position: mylocation,
                    map: map_canvas,
                    title: '141 Princess Circle'
                });

                $(window).scroll(function () {
                    map_canvas.setOptions({scrollwheel: false});

                    clearInterval(scrollTimer);
                    scrollTimer = setTimeout(function () {
                        map_canvas.setOptions({scrollwheel: true})
                    }, 1000);

                });

            }

            if ($("#map-places").length) {
                var POST_URL = "http://listing.gofullframe.com/places/11876";
        
                $.ajax({
                    type: "POST",
                    cache: false,
                    url: POST_URL,
                    dataType: "json",
                    success: function(places) {
                        $("#places-spinner").remove();
                        var places_map = new google.maps.Map(document.getElementById('map-places'), {
                            center: mylocation,
                            zoom: 16,
                            mapTypeId: google.maps.MapTypeId.roadmap,
                            styles: [
                                {
                                    "featureType": "poi",
                                    "stylers": [
                                        {
                                            "visibility": "off"
                                        }
                                    ]
                                }
                            ]
                        });

                        var marker = new google.maps.Marker({
                            position: mylocation,
                            map: places_map,
                            title: '141 Princess Circle'
                        });

                        var infowindow = new google.maps.InfoWindow();

                        places = places.reduce(function(places, place) {
                            var dist = distance(mylocation, {lat: place.latitude, lng: place.longitude});

                            if (dist > 2)
                                return places;

                            if (!places[place.type]) {
                                places[place.type] = {
                                    name: (function() {
                                        switch (place.type) {
                                            case 'school': return 'Schools';
                                            case 'hospital': return 'Health';
                                            case 'church': return 'Churches';
                                            case 'restaurant': return 'Restaurants';
                                            case 'shopping_mall': return 'Shopping Malls';
                                            case 'fire_station': return 'Fire Stations';
                                            case 'store': return 'Stores';
                                            case 'lodging': return 'Lodging';
                                            case 'gym': return 'Gym';
                                            case 'grocery_or_supermarket': return 'Grocery';
                                        }
                                    })(),
                                    markers: []
                                }
                            }
                            
                            places[place.type].markers.push({
                                place: place,
                                distance: dist,
                                marker: createMarker(place, places_map, infowindow)
                            });

                            return places;
                        }, {});

                        $(window).scroll(function () {
                            places_map.setOptions({scrollwheel: false});

                            clearInterval(scrollTimer);
                            scrollTimer = setTimeout(function () {
                                places_map.setOptions({scrollwheel: true})
                            }, 1000);

                        });
                                
                        // setup places nav...
                        placeNav(places, places_map, infowindow);
                    },
                    error: errorAlert
                }); //end of $.ajax
            }

            function createMarker(place, map, infowindow) {
                var placeLoc = {lat: place.latitude, lng: place.longitude};
                var marker = new google.maps.Marker({
                    map: map,
                    icon: {
                        url: getIcon(place.type),
                        scaledSize: new google.maps.Size(32, 37),
                        anchor: new google.maps.Point(16, 37),
                    },
                    position: {lat: place.latitude, lng: place.longitude}
                });
                marker.addListener('click', function() {

                    infowindow.setContent([
                        "<strong>" + place.name + "</strong>",
                        place.vicinity
                    ].join("<br />"));
                    infowindow.open(map, marker);

                });

                return marker;
            }

            function placeNav(places, map, infowindow) {
                var $nav = $(".places-nav");

                var $main = $("<ul></ul>").wrap($("<div style='font-size: 1.15em; text-align: center'></div>").attr("id", "places-nav-main"));

                var types = Object.keys(places);
                for (var i = 0; i < types.length; i++) {
                    var type = types[i];
                    var $category = $("<li></li>")
                        .data("type", type)
                        .append($("<a class='place'></a>").text(places[type].name))
                        .append($("<span class='place-muted'></span>").text(places[type].markers.length + " Places"))
                        .on("click", function() {
                            var type = $(this).data("type");
                            $("#places-nav-main").hide("slide", { direction: "left" }, 250);
                            $("#places-nav-" + type + "-0").show("slide", { direction: "right" }, 250);

                            var bounds = new google.maps.LatLngBounds();
                            bounds.extend(mylocation);
                            var placeTypes = Object.keys(places);
                            for (var i = 0; i < placeTypes.length; i++) {
                                var type2 = placeTypes[i];
                                places[type2].markers.forEach(function(marker) {
                                    if (type2 === type)
                                        bounds.extend(marker.marker.getPosition());

                                    marker.marker.setMap(type2 === type ? map : null)
                                });
                            }
                            map.fitBounds(bounds);
                        });

                    $main.append($category);

                    var pageN = 0;
                    var $page;
                    
                    for (var j = 0; j < places[type].markers.length; j++) {
                        var marker = places[type].markers[j];

                        if (!$page || j % 9 === 0) {
                            $page = $("<ul style='text-align: left'></ul>");
                            
                            $page.wrap(
                                $("<div style='text-align: center'></div>")
                                    .attr("id", "places-nav-" + type + "-" + pageN)
                                    .data("prev", pageN > 0 ? "#places-nav-" + type + "-" + (pageN - 1) : "#places-nav-main")
                                    .hide()
                            )
                            .before(
                                $("<a></a>")
                                    .html("<i class='fa fa-fw fa-caret-left'></i>")
                                    .on("click", function() {
                                        var $page = $(this).parent();
                                        $page.hide("slide", { direction: "right" }, 250);
                                        $($page.data("prev")).show("slide", { direction: "left" }, 250);

                                        if ($page.data("prev") === "#places-nav-main") {
                                            var bounds = new google.maps.LatLngBounds();
                                            bounds.extend(mylocation);
                                            var placeTypes = Object.keys(places);
                                            for (var i = 0; i < placeTypes.length; i++) {
                                                var type2 = placeTypes[i];
                                                places[type2].markers.forEach(function(marker) {
                                                    bounds.extend(marker.marker.getPosition());
                                                    marker.marker.setMap(map)
                                                });
                                            }
                                            map.fitBounds(bounds);
                                        }
                                    })
                            )
                            .before($("<a style='font-size: 1.1em'></a>").text(places[type].name));

                            if (places[type].markers.length > j + 9) {
                                $page.parent().data("next", "#places-nav-" + type + "-" + (pageN + 1));
                                $page.before(
                                    $("<a></a>")
                                        .html("&nbsp;<i class='fa fa-fw fa-caret-right'></i>")
                                        .on("click", function() {
                                            var $page = $(this).parent();
                                            $page.hide("slide", { direction: "left" }, 250);
                                            $($page.data("next")).show("slide", { direction: "right" }, 250);
                                        })
                                )
                            } else {
                                $page.before($("<a></a>").html("&nbsp;<i class='fa fa-fw'></i>"));
                            }

                            $nav.append($page.parent());

                            pageN++;
                        }

                        var $place = $("<li></li>")
                            .data("type", type)
                            .data("marker", j)
                            .append($("<a class='place'></a>").text(marker.place.name))
                            .append($("<span class='place-muted'></span>").text(marker.place.vicinity.lastIndexOf(',') !== -1 ? marker.place.vicinity.substr(0, marker.place.vicinity.lastIndexOf(',')) : marker.place.vicinity))
                            .append($("<span class='pull-right'></span>").append($("<strong></strong>").text(marker.distance.toFixed(1) + " miles")))
                            .on("click", function() {
                                var type = $(this).data("type");
                                var i = $(this).data("marker");
                                var marker = places[type].markers[i];

                                map.setCenter(marker.marker.getPosition());

                                infowindow.setContent([
                                    "<strong>" + marker.place.name + "</strong>",
                                    marker.place.vicinity
                                ].join("<br />"));
                                infowindow.open(map, marker.marker);
                            });

                        $page.append($place);                        
                    }                    
                }

                $nav.append($main.parent());
            }

            function distance(pos1, pos2) {
                var R = 3959; // radius of earth in miles

                var theta1 = toRadians(pos1.lat);
                var theta2 = toRadians(pos2.lat);
                var delta1 = toRadians(pos2.lat - pos1.lat);
                var delta2 = toRadians(pos2.lng - pos1.lng);

                var a = (Math.sin(delta1 / 2) * Math.sin(delta1 / 2)) +
                        (Math.cos(theta1) * Math.cos(theta2) *
                        Math.sin(delta2 / 2) * Math.sin(delta2 / 2));

                var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
                var d = R * c;

                return d;
            }

            function toRadians(val) {
                return val * (Math.PI/180);
            }

            function getIcon(type) {
                switch (type) {
                    case 'school': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/school.png";
                    case 'hospital': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/hospital.png";
                    case 'church': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/church.png";
                    case 'restaurant': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/restaurant.png";
                    case 'shopping_mall': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/shopping.png";
                    case 'fire_station': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/hospital.png";
                    case 'store': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/shopping.png";
                    case 'lodging': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/lodging.png";
                    case 'gym': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/gym.png";
                    case 'grocery_or_supermarket': return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/grocery.png";

                    // default:
                    //     console.log(type);
                    //     return "http://listing.gofullframe.com/templates/template-2/assets/img/mapicons/skull.png";
                }
            }

        };