Skip to content

Instantly share code, notes, and snippets.

@ogt

ogt/display_nearby.js

Created February 3, 2018 19:43
Show Gist options
  • Save ogt/e7f22ad332ec527e5858181b589d33e8 to your computer and use it in GitHub Desktop.
Save ogt/e7f22ad332ec527e5858181b589d33e8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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";
}
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment