Skip to content
This repository has been archived by the owner on May 24, 2021. It is now read-only.

Turns MapsLib into a Class #42

Closed
wants to merge 3 commits into from
Closed

Turns MapsLib into a Class #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26ff0b2
adds AMD example
ffflabs Feb 4, 2015
8ea1960
update examples
ffflabs Feb 4, 2015
9c28885
passes an integer to setMap
ffflabs Feb 4, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 31 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,6 @@ <h4>Your JavaScript is disabled</h4>

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.address.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&v=3.17"></script>
<script type="text/javascript" src="js/maps_lib.js"></script>
<script type='text/javascript'>
Expand All @@ -118,39 +117,61 @@ <h4>Your JavaScript is disabled</h4>
}).resize();

$(function() {
MapsLib.initialize();
var MapsLibInstance = new MapsLib({
/*fusionTableId: "1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0",

//*New Fusion Tables Requirement* API key. found at https://code.google.com/apis/console/
//*Important* this key is for demonstration purposes. please register your own.
googleApiKey: "AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY",

//name of the location column in your Fusion Table.
//NOTE: if your location column name has spaces in it, surround it with single quotes
//example: locationColumn: "'my location'",
locationColumn: "geometry",

map_centroid: new google.maps.LatLng(41.8781136, -87.66677856445312), //center that your map defaults to
locationScope: "chicago", //geographical area appended to all address searches
recordName: "result", //for showing number of results
recordNamePlural: "results",

searchRadius: 805, //in meters ~ 1/2 mile
defaultZoom: 11, //zoom level when map is loaded (bigger is more zoomed in)
addrMarkerImage: 'images/blue-pushpin.png', // set to empty '' to hide searched address marker
currentPinpoint: null,
*/
});

var autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_address'));

$(':checkbox').click(function(){
MapsLib.doSearch();
MapsLibInstance.doSearch();
});

$(':radio').click(function(){
MapsLib.doSearch();
MapsLibInstance.doSearch();
});

$('#search_radius').change(function(){
MapsLib.doSearch();
MapsLibInstance.doSearch();
});

$('#search').click(function(){
MapsLib.doSearch();
MapsLibInstance.doSearch();
});

$('#find_me').click(function(){
MapsLib.findMe();
MapsLibInstance.findMe();
return false;
});

$('#reset').click(function(){
$.address.parameter('address','');
MapsLib.initialize();
MapsLibInstance.reset();
return false;
});

$(":text").keydown(function(e){
var key = e.keyCode ? e.keyCode : e.which;
if(key == 13) {
if(key === 13) {
$('#search').click();
return false;
}
Expand Down
201 changes: 201 additions & 0 deletions index_amd.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,201 @@
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Searchable Map Template Demo</title>
<meta charset='utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta content='' name='description' />
<meta content='' name='author' />
<!-- Styles -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/custom.css"/>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class='navbar navbar-default navbar-static-top'>
<div class='container-fluid'>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class='navbar-brand' href='index.html'>Searchable Map Template</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class='active'><a href="index.html">Map</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class='container-fluid'>
<div class='row'>
<div class='col-md-4'>
<p>This is a demo of <a href='http://derekeder.com'>Derek Eder's</a> <a href='http://derekeder.com/searchable_map_template/'>Searchable Map Template</a> using Google <a href='http://support.google.com/fusiontables/answer/2571232?hl=en&ref_topic=1652595'>Fusion Tables</a>. Use this section to give a little context to your map.</p>
<div class='well'>
<h4>
Address <small>(<a id='find_me' href='#'>find me</a>)</small>
</h4>
<p>
<input class='form-control' id='search_address' placeholder='Enter an address or an intersection' type='text' />
</p>
<p>
<label>
within
<select id='search_radius'>
<option value='400'>2 blocks</option>
<option value='805'>1/2 mile</option>
<option value='1610'>1 mile</option>
<option value='3220'>2 miles</option>
</select>
</label>
</p>

<br />
<h4>Custom filters and views</h4>
<p>Take a look at the <a href='https://github.com/derekeder/FusionTable-Map-Template/wiki/Filter-examples'>wiki</a> to see how to add your own custom filters and views like:</p>
<div class='row'>
<div class='col-md-6'>
<ul>
<li><a href='https://github.com/derekeder/FusionTable-Map-Template/wiki/Filter-examples#wiki-checkboxes'>Checkboxes</a></li>
<li><a href='https://github.com/derekeder/FusionTable-Map-Template/wiki/Filter-examples#wiki-radiobuttons'>Radio buttons</a></li>
<li><a href='https://github.com/derekeder/FusionTable-Map-Template/wiki/Filter-examples#wiki-drop-down-lists'>Drop down lists</a></li>
<li><a href='https://github.com/derekeder/FusionTable-Map-Template/wiki/Filter-examples#wiki-textsearches'>Text searches</a></li>
</ul>
</div>
<div class='col-md-6'>
<ul>
<li><a href='https://github.com/derekeder/FusionTable-Map-Template/wiki/Filter-examples#wiki-sliders'>Sliders</a></li>
<li><a href='https://github.com/derekeder/FusionTable-Map-Template/wiki/Filter-examples#wiki-date-sliders'>Date sliders</a></li>
<li><a href='https://github.com/derekeder/FusionTable-Map-Template/wiki/List-search-results'>Results lists</a></li>
</ul>
</div>
</div>
<br />
<a class='btn btn-primary' id='search' href='#'>
<i class='glyphicon glyphicon-search'></i>
Search
</a>
<a class='btn btn-default' id='reset' href='#'>
<i class='glyphicon glyphicon-repeat'></i>
Reset
</a>
</div>
<div class='alert alert-info' id='result_box' ><strong id='result_count'></strong></div>
</div>
<div class='col-md-8'>
<noscript>
<div class='alert alert-info'>
<h4>Your JavaScript is disabled</h4>
<p>Please enable JavaScript to view the map.</p>
</div>
</noscript>
<div id='map_canvas'></div>
<p class='pull-right'>
<a href='http://derekeder.com/searchable_map_template/'>Searchable Map Template</a> by <a href='http://derekeder.com'>Derek Eder</a>.
</p>
</div>
</div>
</div>
<script>
var require={
baseUrl:'./js',
paths: {
jquery: 'jquery-1.10.2.min',
bootstrap: 'bootstrap.min',
maps_lib: 'maps_lib'
}
};

</script>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&v=3.17"></script>
<script type="text/javascript" src="js/require.js"></script>
<script type='text/javascript'>
//<![CDATA[
require([
'jquery',
'maps_lib',
'bootstrap'],function($,MapsLib) {
$(window).resize(function () {
var h = $(window).height(),
offsetTop = 105; // Calculate the top offset

$('#map_canvas').css('height', (h - offsetTop));
}).resize();

$(function() {
var MapsLibInstance = new MapsLib({
/*fusionTableId: "1m4Ez9xyTGfY2CU6O-UgEcPzlS0rnzLU93e4Faa0",

//*New Fusion Tables Requirement* API key. found at https://code.google.com/apis/console/
//*Important* this key is for demonstration purposes. please register your own.
googleApiKey: "AIzaSyA3FQFrNr5W2OEVmuENqhb2MBB2JabdaOY",

//name of the location column in your Fusion Table.
//NOTE: if your location column name has spaces in it, surround it with single quotes
//example: locationColumn: "'my location'",
locationColumn: "geometry",

// latitude and longitude your map will be centered on
lat : 41.8781136,
lng : -87.666778,

locationScope: "chicago", //geographical area appended to all address searches
recordName: "result", //for showing number of results
recordNamePlural: "results",

searchRadius: 805, //in meters ~ 1/2 mile
defaultZoom: 11, //zoom level when map is loaded (bigger is more zoomed in)
addrMarkerImage: 'images/blue-pushpin.png', // set to empty '' to hide searched address marker
currentPinpoint: null,
*/
});

var autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_address'));

$(':checkbox').click(function(){
MapsLibInstance.doSearch();
});

$(':radio').click(function(){
MapsLibInstance.doSearch();
});

$('#search_radius').change(function(){
MapsLibInstance.doSearch();
});

$('#search').click(function(){
MapsLibInstance.doSearch();
});

$('#find_me').click(function(){
MapsLibInstance.findMe();
return false;
});

$('#reset').click(function(){
MapsLibInstance.reset();
return false;
});

$(":text").keydown(function(e){
var key = e.keyCode ? e.keyCode : e.which;
if(key === 13) {
$('#search').click();
return false;
}
});
});
});
//]]>

</script>
</body>
</html>
19 changes: 8 additions & 11 deletions index_iframe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,41 +75,38 @@ <h4>Your JavaScript is disabled</h4>
<script type='text/javascript'>
//<![CDATA[
$(function() {
MapsLib.initialize();
var MapsLibInstance= new MapsLib();
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('search_address'));

$(':checkbox').click(function(){
MapsLib.doSearch();
MapsLibInstance.doSearch();
});

$(':radio').click(function(){
MapsLib.doSearch();
MapsLibInstance.doSearch();
});

$('#search_radius').change(function(){
MapsLib.doSearch();
MapsLibInstance.doSearch();
});

$('#search').click(function(){
MapsLib.doSearch();
MapsLibInstance.doSearch();
});

$('#find_me').click(function(){
MapsLib.findMe();
MapsLibInstance.findMe();
return false;
});

$('#reset').click(function(){
$.address.parameter('address','');
MapsLib.currentType = "";
$("#select_type").val("");
MapsLib.initialize();
MapsLibInstance.reset();
return false;
});

$(":text").keydown(function(e){
var key = e.keyCode ? e.keyCode : e.which;
if(key == 13) {
if(key === 13) {
$('#search').click();
return false;
}
Expand Down
Loading