Skip to content

Instantly share code, notes, and snippets.

@kacole2

kacole2/HTML

Created November 13, 2014 13:48
Show Gist options
  • Save kacole2/c8ad84bf51a2bbc88237 to your computer and use it in GitHub Desktop.
Save kacole2/c8ad84bf51a2bbc88237 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link href='http://fonts.googleapis.com/css?family=Lobster|Quattrocento+Sans:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/async.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollintoview.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=_MY_API_KEY_&libraries=geometry,places"> </script>
<title>Working Google Maps</title>
</head>
<body>
<div id="top-header"><h1>Strong Water Hunter <img src="img/drink2.png" align="top" style="width: 30px;"></h1></div>
<div id="map"></div>
<div id="storeListLoading"><img src="img/loader.gif"></div>
<dl id="storeList"></dl>
</body>
</html>
Raw
JavaScript
/*
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
var app = {
// Application Constructor
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicitly call 'app.receivedEvent(...);'
onDeviceReady: function() {
// app.receivedEvent('deviceready');
navigator.geolocation.getCurrentPosition(app.onSuccess, app.onError);
},
onSuccess: function(position){
var longitude = position.coords.longitude;
var latitude = position.coords.latitude;
var latLong = new google.maps.LatLng(latitude, longitude);
var mapOptions = {
center: latLong,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myLocationMarkerImage = {
url: 'img/blue_dot.png',
anchor: new google.maps.Point(16, 0)
};
var myLocationMarker = new google.maps.Marker({
position: latLong,
map: map,
title: 'my location',
icon: myLocationMarkerImage
});
//PlacesAPI
var liquorSearchParams = {
location: latLong,
rankBy: google.maps.places.RankBy.DISTANCE,
types: ['liquor_store']
};
var allPlaces = [];
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
async.each(results, addPlaceToArray, function(err) {
// this gets executed when all places have been added to allPlaces
console.log(allPlaces);
});
}
}
function addPlaceToArray(place, done) {
var placeIdRequest = {
placeId: place.place_id
};
var placeDetailCallback = function(placeDetail, status) {
var destinationPoint = new google.maps.LatLng(placeDetail.geometry.location.k, placeDetail.geometry.location.B);
var theDistance = google.maps.geometry.spherical.computeDistanceBetween(destinationPoint, latLong);
allPlaces.push({name: placeDetail.name, latitude: placeDetail.geometry.location.k, longitude: placeDetail.geometry.location.B, address: placeDetail.vicinity, phone: placeDetail.formatted_phone_number, website: placeDetail.website, distance: theDistance});
done(); //if an error occurred here, you can pass it to done
};
service.getDetails(placeIdRequest, placeDetailCallback);
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(liquorSearchParams, callback);
function placeHtmlOutput() {
function compare(a,b) {
if (a.distance < b.distance)
return -1;
if (a.distance > b.distance)
return 1;
return 0;
}
allPlaces.sort(compare);
for (var i = 0; i < allPlaces.length; i++) {
var html = '<dt><a href="#">' + allPlaces[i].name + '<span class="storeDistance">' + (allPlaces[i].distance * 0.000621371192).toFixed(2) + 'mi </span></a></dt>';
html += '<dd><div class="leftSide"><span class="storeInfo">' + '<a href="tel:' + allPlaces[i].formatted_phone_number + '">' + allPlaces[i].formatted_phone_number + '</a>';
if (typeof placeDetail.opening_hours === 'undefined'){
html += '';
} else {
if (placeDetail.opening_hours.open_now == true){
html += '<span style="float: right;"><strong>Open Now</strong></span>';
} else {
html += '<span style="float: right;>Closed</span>';
}
}
html += '<br>';
html += allPlaces[i].vicinity;
if (typeof allPlaces[i].website === 'undefined'){
html += '';
} else {
html += '<br><a href="' + allPlaces[i].website + '">' + allPlaces[i].website + '</a>';
}
html += '</span></div>';
if(device.platform == "Android"){
html += '<div class="rightSide"><a href="geo:' + allPlaces[i].latitude + ',' + allPlaces[i].longitude + '"><img src="img/takemethere.png"></a></div></dd>';
}else if(device.platform == "iOS"){
html += '<div class="rightSide"><a href="comgooglemaps://?q=' + allPlaces[i].name + '"><img src="img/takemethere.png" class="takeMeThere"></a></div></dd>';
}else{
console.error("Unknown platform");
}
$("#storeList").append(html);
createMarker(placeDetail);
}
};
var defaultStorePin = {
url: 'img/store_bottle_pin.png',
size: new google.maps.Size(17, 44),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(8, 44)
};
var highlightedStorePin = {
url: 'img/store_bottle_pin_glow.png',
size: new google.maps.Size(23, 47),
origin: new google.maps.Point(0,0),
anchor: new google.maps.Point(11, 47)
};
var allMarkers = [];
function createMarker(place) {
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: defaultStorePin
});
allMarkers.push(marker);
markerEventHandler(place, marker);
};
function markerEventHandler(place, marker){
google.maps.event.addListener(marker, 'click', function() {
for (var i = 0; i < allMarkers.length; i++) {
allMarkers[i].setIcon(defaultStorePin);
}
$( "a:contains(" + place.name + ")" ).click().scrollintoview();
marker.setIcon(highlightedStorePin);
});
};
//BEGINNING OF ACCORDION
(function($){
$.fn.accordion = function() {
var el = this;
var ddHeight;
ddHeight = new Array();
el.addClass('enhance');
el.find('dd').each(function(i) {
var dd = $(this);
ddHeight[i] = dd.height();
dd.addClass('closed');
});
var hash = location.hash;
var hasHash = el.find('dt a[href="'+hash+'"]');
if (hasHash.length) {
var toExpand = hasHash.parent().next('dd');
var i = toExpand.index('dd');
toExpand
.attr('id', 'active')
.css('height', ddHeight[i]+'px')
.removeClass('closed');
}
el.find('dt a').bind('click', function(e) {
e.preventDefault();
//Make the map pin highlight on click
for (var i = 0; i < allMarkers.length; i++) {
allMarkers[i].setIcon(defaultStorePin);
}
var toExpand = $(this).parent().next('dd');
var i = toExpand.index('dd');
if (toExpand.attr('id') == 'active') {
toExpand
.removeAttr('id')
.removeAttr('style')
.addClass('closed');
location.hash = '';
} else {
var active = toExpand.parent().find('#active');
if (active) {
active
.removeAttr('id')
.removeAttr('style')
.addClass('closed');
}
toExpand
.attr('id', 'active')
.css('height', ddHeight[i]+'px')
.removeClass('closed');
location.hash = $(this).attr('href');
}
});
}
})(jQuery);
//END OF ACCORDION FEATURE
setTimeout(function(){
$('#storeList').accordion();
},2400);
$( "#storeListLoading" ).delay( 2500 ).slideUp(200).hide;
//repeat every 5 seconds
//setTimeout(app.onSuccess, 5000);
},
onError: function(error){
alert("the code is " + error.code + ". \n" + "message: " + error.message);
},
};
app.initialize();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment