以下是 jQuery谷歌地图插件Maplace js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<!--[if lt IE 9]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="gb2312">
<meta name="viewport" content="width=device-width">
<title>jQuery�ȸ��ͼ���Maplace</title>
<meta name="description" content="Maplace.js helps you to embed Google Maps into your website, quickly creating markers and controls menu for the locations on map.">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<meta name="author" content="Daniele Moraschi - daniele.moraschi@gmail.com">
<meta property="og:title" content="Maplace.js - A small Google Maps Javascript helper">
<meta property="og:description" content="Maplace.js helps you to embed Google Maps into your website, quickly create markers and controls menu for the locations on map.">
<meta property="og:image" content="http://maplacejs.com/images/red-dot.png">
<meta property="og:url" content="http://maplacejs.com/">
<meta property="og:type" content="website">
<meta property="fb:admins" content="1508317783">
<meta property="fb:app_id" content="431057636976449">
<!--<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600|Oxygen:700' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" href="stylesheets/libs.min.css">
<link rel="stylesheet" href="stylesheets/app.css">
</head>
<body>
<div id="fb-root"></div>
<header>
<div class="row">
<div class="four columns mobile-two">
<h1>Maplace.js</h1>
<p>A small Google Maps Javascript helper.</p>
</div>
</div>
</header>
<div class="row">
<div class="four columns">
<ul class="tabs-content">
<li class="active" id="ExamplesTab">
<section id="simple" class="row">
<h2 class="two columns mobile-one">Hello, World</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example1">Example</a></dd>
<dd><a href="#code1">Code</a></dd>
</dl>
</div>
<div class="four columns mobile-two">
<ul class="tabs-content">
<li class="active" id="example1Tab">
<div class="gmap" id="gmap"></div>
</li>
<li class="code" id="code1Tab">
<h3>JS</h3>
<pre class="prettyprint">
var maplace = new Maplace();
maplace.Load();
// or new Maplace().Load();
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<div id="gmap"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section id="markers" class="row">
<h2 class="two columns mobile-one">Markers</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example2">Example</a></dd>
<dd><a href="#code2">Code</a></dd>
</dl>
</div>
<div class="four columns mobile-two">
<ul class="tabs-content">
<li class="active" id="example2Tab">
<div class="gmap" id="gmap-2"></div>
<div class="gmap" id="gmap-3"></div>
</li>
<li class="code" id="code2Tab">
<h3>JS</h3>
<pre class="prettyprint">
//dropdown example
new Maplace({
locations: LocsA,
map_div: '#gmap-dropdown',
controls_title: 'Choose a location:'
}).Load();
//ul list example
new Maplace({
locations: LocsB,
map_div: '#gmap-list',
controls_type: 'list',
controls_title: 'Choose a location:'
}).Load();
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<div id="gmap-dropdown"></div>
<div id="gmap-list"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section id="menu" class="row">
<h2 class="two columns mobile-one">Menu</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example3">Example</a></dd>
<dd><a href="#code3">Code</a></dd>
</dl>
</div>
<div class="four columns menu mobile-two">
<ul class="tabs-content">
<li class="active" id="example3Tab">
<div class="row">
<div class="four columns">
<div class="gmap_controls" id="controls"></div>
</div>
</div>
<div class="row">
<div class="four columns">
<div class="gmap" id="gmap-4"></div>
</div>
</div>
</li>
<li class="code" id="code3Tab">
<h3>JS</h3>
<pre class="prettyprint">
new Maplace({
locations: LocsAB,
map_div: '#gmap-menu',
controls_type: 'list',
controls_on_map: false
}).Load();
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<div id="controls"></div>
<div id="gmap-menu"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section id="dtabs" class="row">
<h2 class="two columns mobile-one">Tabs</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example4">Example</a></dd>
<dd><a href="#code4">Code</a></dd>
</dl>
</div>
<div class="four columns gtabs mobile-two">
<ul class="tabs-content">
<li class="active" id="example4Tab">
<div class="row">
<div class="four columns">
<div class="gmap_controls tabs" id="controls-5"></div>
</div>
</div>
<div class="row">
<div class="four columns">
<div id="info" class="tab-content"></div>
</div>
</div>
<div class="gmap" id="gmap-5"></div>
</li>
<li class="code" id="code4Tab">
<h3>JS</h3>
<pre class="prettyprint">
new Maplace({
locations: LocsB,
map_div: '#gmap-tabs',
controls_div: '#controls-tabs',
controls_type: 'list',
controls_on_map: false,
show_infowindow: false,
start: 1,
afterShow: function(index, location, marker) {
$('#info').html(location.html);
}
}).Load();
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<div id="controls-tabs"></div>
<div id="info"></div>
<div id="gmap-tabs"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section id="polyline" class="row">
<h2 class="two columns mobile-one">Path / Polyline</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example5">Example</a></dd>
<dd><a href="#code5">Code</a></dd>
</dl>
</div>
<div class="four columns mobile-two">
<ul class="tabs-content">
<li class="active" id="example5Tab">
<div class="row">
<div class="one columns">
<div class="gmap_controls" id="controls-6"></div>
</div>
<div class="three columns">
<div class="gmap" id="gmap-6"></div>
</div>
</div>
</li>
<li class="code" id="code5Tab">
<h3>JS</h3>
<pre class="prettyprint">
new Maplace({
locations: LocsA,
map_div: '#gmap-polyline',
controls_div: '#controls-polyline',
controls_type: 'list',
controls_on_map: false,
view_all_text: 'Start',
type: 'polyline'
}).Load();
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<div id="controls-polyline"></div>
<div id="gmap-polyline"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section id="polygon" class="row">
<h2 class="two columns mobile-one">Polygon</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example6">Example</a></dd>
<dd><a href="#code6">Code</a></dd>
</dl>
</div>
<div class="four columns mobile-two">
<ul class="tabs-content">
<li class="active" id="example6Tab">
<div class="gmap" id="gmap-7"></div>
</li>
<li class="code" id="code6Tab">
<h3>JS</h3>
<pre class="prettyprint">
new Maplace({
locations: LocsA,
map_div: '#gmap-polygon',
controls_div: '#controls-polygon',
controls_type: 'list',
show_markers: false,
type: 'polygon',
draggable: true
}).Load();
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<div id="gmap-polygon"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section id="directions" class="row">
<h2 class="two columns mobile-one">Route: <strong id='km'></strong></h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example7">Example</a></dd>
<dd><a href="#route7">Route</a></dd>
<dd><a href="#code7">Code</a></dd>
</dl>
</div>
<div class="four columns mobile-two">
<ul class="tabs-content">
<li class="active" id="example7Tab">
<div class="row">
<div class="four columns">
<div class="gmap" id="gmap-8"></div>
</div>
</div>
</li>
<li id="route7Tab">
<div class="row">
<div class="four columns">
<div id="route"></div>
</div>
</div>
</li>
<li class="code" id="code7Tab">
<h3>JS</h3>
<pre class="prettyprint">
new Maplace({
locations: LocsD,
map_div: '#gmap-route',
generate_controls: false,
show_markers: false,
type: 'directions',
draggable: true,
directions_panel: '#route',
afterRoute: function(distance) {
$('#km').text(': '+(distance/1000)+'km');
}
}).Load();
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<h2>Route <strong id="km"></strong></h2>
<div id="gmap-route"></div>
<div id="route"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section id="styled" class="row">
<h2 class="two columns mobile-one">Styled</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example12">Example</a></dd>
<dd><a href="#code12">Code</a></dd>
</dl>
</div>
<div class="four columns mobile-two">
<ul class="tabs-content">
<li class="active" id="example12Tab">
<div class="gmap" id="gmap-12"></div>
</li>
<li class="code" id="code12Tab">
<h3>JS</h3>
<pre class="prettyprint">
new Maplace({
map_div: '#gmap-styled',
locations: LocsAB,
start: 3,
styles: {
'Other style': [{
stylers: [
{ hue: "#00ffe6" },
{ saturation: -20 }
]
}, {
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 100 },
{ visibility: "simplified" }
]
}, {
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}],
'Night': [{
featureType: 'all',
stylers: [
{ invert_lightness: 'true' }
]
}],
'Greyscale': [{
featureType: 'all',
stylers: [
{ saturation: -100 },
{ gamma: 0.50 }
]
}]
}
}).Load();
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<div id="gmap-styled"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section id="dmixed" class="row">
<h2 class="two columns mobile-one">Mixed / Ajax</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example8">Example</a></dd>
<dd><a href="#code8">Code</a></dd>
</dl>
</div>
<div class="four columns mobile-two">
<ul class="tabs-content">
<li class="active" id="example8Tab">
<div class="row">
<div class="four columns">
<dl id="mixed" class="tabs">
<dd><a href="javascript:void(0)" data-load="0" id="g0" title="Group A">Group A</a></dd>
<dd><a href="javascript:void(0)" data-load="1" id="g1" title="Group B">Group B</a></dd>
<dd><a href="javascript:void(0)" data-load="2" id="g2" title="Group C">Group C</a></dd>
<dd><a href="javascript:void(0)" data-load="3" id="g3" title="Group D">Group D</a></dd>
</dl>
</div>
</div>
<div class="row">
<div class="four columns">
<div class="gmap_controls" id="controls-9"></div>
</div>
</div>
<div class="gmap" id="gmap-9"></div>
</li>
<li class="code" id="code8Tab">
<h3>JS</h3>
<pre class="prettyprint">
var maplace = new Maplace({
map_div: '#gmap-mixed',
controls_div: '#controls-mixed',
controls_type: 'list',
controls_on_map: false
});
$('#tabs a').click(function(e) {
e.preventDefault();
var index = $(this).attr('data-load');
showGroup(index);
});
function showGroup(index) {
var el = $('#g'+index);
$('#tabs li').removeClass('active');
$(el).parent().addClass('active');
$.getJSON('data/ajax.php', { type: index }, function(data) {
//loads data into the map
maplace.Load({
locations: data.locations,
view_all_text: data.title,
type: data.type,
force_generate_controls: true
});
});
}
showGroup(0);
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<ul id="tabs">
<li><a href="javascript:void(0)" data-load="0" id="g0" title="Group A">Group A</a></li>
<li><a href="javascript:void(0)" data-load="1" id="g1" title="Group B">Group B</a></li>
<li><a href="javascript:void(0)" data-load="2" id="g2" title="Group C">Group C</a></li>
<li><a href="javascript:void(0)" data-load="3" id="g3" title="Group D">Group D</a></li>
</ul>
<div id="controls-mixed"></div>
<div id="gmap-mixed"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section id="fusion" class="row">
<h2 class="two columns mobile-one">Fusion Tables</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example10">Example</a></dd>
<dd><a href="#code10">Code</a></dd>
</dl>
</div>
<div class="four columns mobile-two">
<ul class="tabs-content">
<li class="active" id="example10Tab">
<div class="gmap" id="gmap-11"></div>
</li>
<li class="code" id="code10Tab">
<h3>JS</h3>
<pre class="prettyprint">
new Maplace({
map_div: '#gmap-fusion',
type: 'fusion',
map_options: {
zoom: 2,
set_center: [31.1, -39.4]
},
fusion_options: {
query: {
from: '423292',
select: 'location'
},
heatmap: {
enabled: true
},
suppressInfoWindows: true
}
}).Load();
</pre>
<h3>Html</h3>
<pre class="prettyprint">
<div id="gmap-fusion"></div>
</pre>
</li>
</ul>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
<section class="row last">
<h2 class="two columns mobile-one">Big Data</h2>
<div class="two columns mobile-one">
<dl class="right tabs pill small">
<dd class="active"><a href="#example9">Example</a></dd>
<dd><a href="#code9">Code</a></dd>
</dl>
</div>
<div class="four columns mobile-two"><div class="line"></div></div>
</section>
</li>
<li class="install" id="SetupTab">
<section class="row">
<div class="four columns mobile-two">
<h2>Requirements</h2>
<p>Download the latest version of Maplace.js and include the Google Maps API v3 along with jQuery.</p>
<pre class="prettyprint">
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7">
</script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="maplace.min.js"></script>
</pre>
<h2>Html</h2>
<p>Just place a DIV in your page and give it a unique ID or class, "gmap" by default, but you can change it in the options.</p>
<pre class="prettyprint">
<div id="gmap"></div>
</pre>
<p>If you want the menu outside of the map you need to include another DIV with a unique ID or class, "controls" by default.</p>
<pre class="prettyprint">
<div id="controls"></div>
</pre>
<h2>JS</h2>
<p>Now you can create the map.</p>
<pre class="prettyprint">
<script type="text/javascript">
$(function() {
new Maplace({
locations: [{...}, {...}],
controls_on_map: false
}).Load();
});
</script>
</pre>
<p>If you want to center the map on a single location without any marker, you have two options:</p>
<pre class="prettyprint">
new Maplace({
show_markers: false,
locations: [{
lat: 45.9,
lon: 10.9,
zoom: 8
}]
}).Load();
//or
new Maplace({
map_options: {
set_center: [45.9, 10.9],
zoom: 8
}
}).Load();
</pre>
</div>
</section>
</li>
<li class="docs" id="DocsTab">
<section class="row">
<h2 class="four columns mobile-two">Options</h2>
<div class="four columns mobile-two">
<table class="small twelve" style="width:100%">
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>map_div</td>
<td>string</td>
<td>#gmap</td>
<td>
Where you want to show the Map
</td>
</tr>
<tr>
<td>controls_div</td>
<td>string</td>
<td>#controls</td>
<td>
Where you want to show the menu.<br/>
<strong>generate_controls</strong> must be <strong><em>true</em></strong><br/>
<strong>controls_on_map</strong> must be <strong><em>false</em></strong><br/>
At least more than one location on map
</td>
</tr>
<tr>
<td>generate_controls</td>
<td>boolean</td>
<td>true</td>
<td>
If <strong><em>false</em></strong>, the menu will not generated
</td>
</tr>
<tr>
<td>force_generate_controls</td>
<td>boolean</td>
<td>false</td>
<td>
Force to generate menu also with one location
</td>
</tr>
<tr>
<td>controls_type</td>
<td>string</td>
<td>dropdown</td>
<td>
To set the menu type choose between: <strong>dropdown</strong> | <strong>list</strong>
</td>
</tr>
<tr>
<td>controls_on_map</td>
<td>boolean</td>
<td>true</td>
<td>
If <strong><em>false</em></strong>, the menu will be generated into the element defined by the property <strong>controls_div</strong>
</td>
</tr>
<tr>
<td>controls_title</td>
<td>string</td>
<td></td>
<td>
Add a title/header text to the menu
</td>
</tr>
<tr>
<td>controls_cssclass</td>
<td>string</td>
<td></td>
<td>
Add a custom class to the menu element
</td>
</tr>
<tr>
<td>controls_applycss</td>
<td>boolean</td>
<td>true</td>
<td>
If <strong><em>false</em></strong>, default styles to the menu will not be applied
</td>
</tr>
<tr>
<td>controls_position</td>
<td>object</td>
<td>google.maps.ControlPosition.RIGHT_TOP</td>
<td>
Controls position on the right, below top-right elements of the map.<br/>
As defined by <a target="_blank" href="https://developers.google.com/maps/documentation/javascript/controls#ControlPositioning">Google</a>
</td>
</tr>
<tr>
<td>type</td>
<td>string</td>
<td>marker</td>
<td>
To set the Map type choose between: <strong>marker</strong> | <strong>polyline</strong> | <strong>polygon</strong> | <strong>directions</strong> | <strong>fusion</strong>
</td>
</tr>
<tr>
<td>view_all</td>
<td>boolean</td>
<td>true</td>
<td>
If <strong><em>false</em></strong> the link "view all" will not be created
</td>
</tr>
<tr>
<td>view_all_text</td>
<td>string</td>
<td>View All</td>
<td>
Set a custom text for the link "view all"
</td>
</tr>
<tr>
<td>start</td>
<td>integer</td>
<td>0</td>
<td>
Set the first location to show, <strong><em>0</em></strong> stands for "view all"
</td>
</tr>
<tr>
<td>locations</td>
<td>Array <locations></td>
<td>[]</td>
<td>
List of locations being marked on the map.<br/>Check the location docs page for more details
</td>
</tr>
<tr>
<td>commons</td>
<td>object</td>
<td>{}</td>
<td>
Overwrite every location with a set of common properties
</td>
</tr>
<tr>
<td>show_markers</td>
<td>boolean</td>
<td>true</td>
<td>
If <strong><em>false</em></strong>, markers will not be visible on the map
</td>
</tr>
<tr>
<td>show_infowindows</td>
<td>boolean</td>
<td>true</td>
<td>
If <strong><em>false</em></strong>, infowindows will not be created
</td>
</tr>
<tr>
<td>infowindow_type</td>
<td>string</td>
<td>bubble</td>
<td>
Only <strong>bubble</strong> is supported
</td>
</tr>
<tr>
<td>visualRefresh</td>
<td>boolean</td>
<td>true</td>
<td>
Enable/disable the new google maps look and feel
</td>
</tr>
<tr>
<td>map_options</td>
<td>Object</td>
<td>
<pre class="prettyprint">
{
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 1
}
</pre>
</td>
<td>
Map options as defined by <a href="https://developers.google.com/maps/documentation/javascript/reference#MapOptions" target="_blank">Google</a>.<br/>
The property <strong>center</strong> will be ignored. Check at the Install page to see how to center the map with only one location
</td>
</tr>
<tr>
<td>styles</td>
<td>Object</td>
<td>
<pre class="prettyprint">
{}
</pre>
</td>
<td>
Style options as defined by <a href="https://developers.google.com/maps/documentation/javascript/styling#stylers" target="_blank">Google</a>
</td>
</tr>
<tr>
<td>stroke_options</td>
<td>Object</td>
<td>
<pre class="prettyprint">
{
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.4
}
</pre>
</td>
<td>
Stroke options as defined by <a href="https://developers.google.com/maps/documentation/javascript/reference#PolylineOptions" target="_blank">Google</a>.<br/>
Used in Polyline/Polygon/Directions/Fusion Map type.
</td>
</tr>
<tr>
<td>directions_options</td>
<td>Object</td>
<td>
<pre class="prettyprint">
{
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
optimizeWaypoints: false,
provideRouteAlternatives:
false,
avoidHighways: false,
avoidTolls: false
}
</pre>
</td>
<td>
Direction options as defined by <a href="https://developers.google.com/maps/documentation/javascript/reference#DirectionsRequest" target="_blank">Google</a>
</td>
</tr>
<tr>
<td>directions_panel</td>
<td>string</td>
<td>null</td>
<td>
ID or class of the div in which to display the directions steps.
</td>
</tr>
<tr>
<td>fusion_options</td>
<td>Object</td>
<td>{}</td>
<td>
Fusion tables options as defined by <a href="https://developers.google.com/maps/documentation/javascript/reference#FusionTablesLayerOptions" target="_blank">Google</a>
</td>
</tr>
<tr>
<td>draggable</td>
<td>boolean</td>
<td>false</td>
<td>
If <strong><em>true</em></strong>, allow the users to drag and modify the <strong>route</strong>, the <strong>polyline</strong> or the <strong>polygon</strong>
</td>
</tr>
<tr>
<td>listeners</td>
<td>Object</td>
<td>{}</td>
<td>Example:<br/>
<pre class="prettyprint">
listeners: {
click: function(map, event) {
map.setOptions({scrollwheel: true});
}
}
</pre>
Docs: <a href="https://developers.google.com/maps/documentation/javascript/events#UIEvents" target="_blank">Google maps Events</a>
</td>
</tr>
</tbody>
</table>
<h2>Methods</h2>
<table class="small twelve" style="width:100%">
<thead>
<tr>
<th>Function</th>
<th>Params</th>
<th>Return</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>AddControl</td>
<td>string <<strong>name</strong>>, function</td>
<td></td>
<td>Add you own menu type to the map. Check at the Menu Docs page for more details.</td>
</tr>
<tr>
<td>CloseInfoWindow</td>
<td></td>
<td></td>
<td>Close the current infowindow</td>
</tr>
<tr>
<td>ShowOnMenu</td>
<td>integer <<strong>index</strong>></td>
<td>boolean</td>
<td>Checks if a location has to be shown on menu</td>
</tr>
<tr>
<td>ViewOnMap</td>
<td>integer <<strong>index</strong>></td>
<td></td>
<td>Triggers to show a location on map</td>
</tr>
<tr>
<td>SetLocations</td>
<td>array <<strong>locations</strong>>, boolean <<strong>reload</strong>></td>
<td></td>
<td>Replace the current locations</td>
</tr>
<tr>
<td>AddLocations</td>
<td>array <<strong>locations</strong>> | object <<strong>location</strong>>, boolean <<strong>reload</strong>></td>
<td></td>
<td>Adds one or many locations</td>
</tr>
<tr>
<td>AddLocation</td>
<td>object <<strong>location</strong>>, integer <<strong>index</strong>>, boolean <<strong>reload</strong>></td>
<td></td>
<td>Adds one location at the specific index</td>
</tr>
<tr>
<td>RemoveLocations</td>
<td>array <<strong>indexes</strong>> | integer <<strong>index</strong>>, boolean <<strong>reload</strong>></td>
<td></td>
<td>Delete one or many locations</td>
</tr>
<tr>
<td>Load</td>
<td>null | object <<strong>options</strong>></td>
<td></td>
<td>Loads or updates the current configuration and constructs the map</td>
</tr>
<tr>
<td>Loaded</td>
<td></td>
<td></td>
<td>Checks if a Load() was already been called<br/></td>
</tr>
</tbody>
</table>
<h2>Events</h2>
<table class="small twelve" style="width:100%">
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>beforeViewAll</td>
<td>function</td>
<td></td>
<td>
Fires before showing all the locations
</td>
</tr>
<tr>
<td>afterViewAll</td>
<td>function</td>
<td></td>
<td>
Fires after showing all the locations
</td>
</tr>
<tr>
<td>beforeShow</td>
<td>function</td>
<td>(index, location, marker){}</td>
<td>
Fires before showing the current triggered location
</td>
</tr>
<tr>
<td>afterShow</td>
<td>function</td>
<td>(index, location, marker){}</td>
<td>
Fires after showing the current triggered location
</td>
</tr>
<tr>
<td>afterCreateMarker</td>
<td>function</td>
<td>(index, location, marker){}</td>
<td>
Fires after a marker creation
</td>
</tr>
<tr>
<td>beforeCloseInfowindow</td>
<td>function</td>
<td>(index, location){}</td>
<td>
Fires before closing the infowindow
</td>
</tr>
<tr>
<td>afterCloseInfowindow</td>
<td>function</td>
<td>(index, location){}</td>
<td>
Function called after closing the infowindow
</td>
</tr>
<tr>
<td>beforeOpenInfowindow</td>
<td>function</td>
<td>(index, location, marker){}</td>
<td>
Fires before opening the infowindow
</td>
</tr>
<tr>
<td>afterOpenInfowindow</td>
<td>function</td>
<td>(index, location, marker){}</td>
<td>
Fires after opening the infowindow
</td>
</tr>
<tr>
<td>afterRoute</td>
<td>function</td>
<td>(distance, status, result){}</td>
<td>
Fires after the route calcoule
</td>
</tr>
<tr>
<td>onPolylineClick</td>
<td>function</td>
<td>(obj) {}</td>
<td>
Fires when click on polylines
</td>
</tr>
</tbody>
</table>
</div>
</section>
</li>
<li class="docs" id="LocationsdocsTab">
<section class="row">
<h2 class="four columns mobile-two">Options</h2>
<div class="four columns mobile-two">
<table class="small twelve" style="width:100%">
<thead>
<tr>
<th>Option</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>lat</td>
<td>float</td>
<td>Latitude (<strong>required</strong>)</td>
</tr>
<tr>
<td>lon</td>
<td>float</td>
<td>Longitude (<strong>required</strong>)</td>
</tr>
<tr>
<td>title</td>
<td>string</td>
<td>Link title for the menu</td>
</tr>
<tr>
<td>html</td>
<td>string</td>
<td>
Html content for the infowindow<br/>
String <strong>%index</strong> will be replaced with the location index<br/>
String <strong>%title</strong> will be replaced with the content of the title
</td>
</tr>
<tr>
<td>icon</td>
<td>string/uri</td>
<td>Icon for the marker</td>
</tr>
<tr>
<td>zoom</td>
<td>integer</td>
<td>Zoom level when focus the marker</td>
</tr>
<tr>
<td>show_infowindow</td>
<td>boolean</td>
<td>Force to show or not the infowindow, <strong><em>true</em></strong> by default</td>
</tr>
<tr>
<td>visible</td>
<td>boolean</td>
<td>If <strong><em>true</em></strong>, the marker is visible, <strong><em>true</em></strong> by default</td>
</tr>
<tr>
<td>stopover</td>
<td>boolean</td>
<td>
Available in type: <strong>directions</strong><br/>
If <strong><em>true</em></strong>, indicates that this waypoint is a stop between the origin and destination.<br/>
This has the effect of splitting the route in two. <strong><em>false</em></strong> by default
</td>
</tr>
<tr>
<td>*</td>
<td></td>
<td>Whatever you want to pass and catch in your menu function.</td>
</tr>
<tr>
<td></td>
<td></td>
<td>For other options look at the <a href="https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions" target="_blank">Google page</a></td>
</tr>
</tbody>
</table>
</div>
<h2 class="four columns mobile-two">Locations used in the examples</h2>
<div class="four columns mobile-two">
<pre class="prettyprint points">
var LocsA = [
{
lat: 45.9,
lon: 10.9,
title: 'Title A1',
html: '<h3>Content A1</h3>',
icon: 'http://maps.google.com/mapfiles/markerA.png'
},
{
lat: 44.8,
lon: 1.7,
title: 'Title B1',
html: '<h3>Content B1</h3>',
icon: 'http://maps.google.com/mapfiles/markerB.png',
show_infowindow: false
},
{
lat: 51.5,
lon: -1.1,
title: 'Title C1',
html: [
'<h3>Content C1</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
icon: 'http://maps.google.com/mapfiles/markerC.png'
}
];
var LocsB = [
{
lat: 52.1,
lon: 11.3,
title: 'Title A2',
html: [
'<h3>Content A2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 8
},
{
lat: 51.2,
lon: 22.2,
title: 'Title B2',
html: [
'<h3>Content B2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 8
},
{
lat: 49.4,
lon: 35.9,
title: 'Title C2',
html: [
'<h3>Content C2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 4
},
{
lat: 47.8,
lon: 15.6,
title: 'Title D2',
html: [
'<h3>Content D2</h3>',
'<p>Lorem Ipsum..</p>'
].join(''),
zoom: 6
}
];
var LocsAB = LocsA.concat(LocsB);
var LocsC = [
{
lat: 45.4654,
lon: 9.1866,
title: 'Milan, Italy'
},
{
lat: 47.36854,
lon: 8.53910,
title: 'Zurich, Switzerland'
},
{
lat: 48.892,
lon: 2.359,
title: 'Paris, France'
},
{
lat: 48.13654,
lon: 11.57706,
title: 'Munich, Germany'
}
];
var LocsD = [
{
lat: 45.4654,
lon: 9.1866,
title: 'Milan, Italy',
html: '<h3>Milan, Italy</h3>'
},
{
lat: 47.36854,
lon: 8.53910,
title: 'Zurich, Switzerland',
html: '<h3>Zurich, Switzerland</h3>',
visible: false
},
{
lat: 48.892,
lon: 2.359,
title: 'Paris, France',
html: '<h3>Paris, France</h3>',
stopover: true
},
{
lat: 48.13654,
lon: 11.57706,
title: 'Munich, Germany',
html: '<h3>Munich, Germany</h3>'
}
];
</pre>
</div>
</section>
</li>
<li id="MenudocsTab">
<section class="row">
<h2 class="four columns mobile-two">Adding a new menu type</h2>
<div class="four columns mobile-two">
<p>
This is a simple checkbox menu example. You have to define two methods to make it work: <strong>activateCurrent</strong> and <strong>getHtml</strong><br/>
and <strong><em>this</em></strong> variable will be scoped to the current Maplace instance.
</p>
<pre class="prettyprint">
var html_checks = {
//required: called by Maplace.js to activate the current voice on menu
activateCurrent: function(index) {
this.html_element.find("input[value='" + index + "']").attr('checked', true);
},
//required: called by Maplace.js to get the html of the menu
getHtml: function() {
var self = this,
html = '';
//if more than one location
if(this.ln > 1) {
html += '<div class="checkbox controls ' + this.o.controls_cssclass + '">';
//check "view all" link
//use ShowOnMenu(index) to know if a location has to appear on menu
if(this.ShowOnMenu(this.view_all_key)) {
html += '<label><input type="radio" name="gmap" value="'
+ this.view_all_key + '"/>' + this.o.view_all_text + '</label>';
}
//iterate the locations
for (var a = 0; a < this.ln; a++) {
if(this.ShowOnMenu(a))
html += '<label><input type="radio" name="gmap" value="' + (a+1) + '"/>'
+ (this.o.locations[a].title || ('#' + (a+1))) + '</label>';
}
html += '</div>';
}
this.html_element = $('<div class="wrap_controls"></div>').append(html);
//event on change
//use ViewOnMap(index) to trigger the marker on map
this.html_element.find('input[type=radio]').bind('change', function() {
self.ViewOnMap(this.value);
});
return this.html_element;
}
};
</pre>
<pre class="prettyprint">
//new Maplace object
var maplace = new Maplace();
//add the new menu with the method AddControl(name, function)
maplace.AddControl('checks', html_checks);
//load the map
maplace.Load({
controls_type: 'checks',
locations: [{...}, {...}]
});
</pre>
</div>
</section>
</li>
</ul>
</div>
</div>
<div class="row"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7?1343675510"></script>
<script src="javascripts/libs.min.js?v=0.1.2b"></script>
<script src="src/maplace.min.js?v=0.1.2c"></script>
<script src="data/points.js?v=0.1.2b"></script>
<script src="javascripts/app.js?v=0.1.2b"></script>
</body>
</html>
JS代码(app.js):
;
(function ($,window,undefined){
'use strict';
var $doc = $(document),Modernizr = window.Modernizr,lt_ie9 = false;
$(document).ready(function(){
$.fn.foundationMediaQueryViewer ? $doc.foundationMediaQueryViewer():null;
$.fn.foundationTabs ? $doc.foundationTabs():null;
if (Modernizr.touch && !window.location.hash){
$(window).load(function (){
setTimeout(function (){
window.scrollTo(0,1);
}
,0);
}
);
}
$("body").iealert({
support:'ie7'}
);
prettyPrint();
if($('html').hasClass('lt-ie9')){
lt_ie9 = true;
}
//Just the map var simple = new Maplace();
//Simple Example,dropdown on map var dropdown = new Maplace({
map_div:'#gmap-2',controls_title:'Choose a location:',locations:LocsA}
);
//Simple Example,menu on map var ullist = new Maplace({
map_div:'#gmap-3',controls_type:'list',controls_title:'Choose a location:',locations:LocsB}
);
//Simple Example,external menu var menu = new Maplace({
map_div:'#gmap-4',controls_type:'list',controls_cssclass:'side-nav',controls_on_map:false,locations:LocsAB}
);
//Tabs Example var tabs = new Maplace({
map_div:'#gmap-5',controls_div:'#controls-5',start:1,controls_type:'list',controls_on_map:false,show_infowindows:false,view_all:false,locations:LocsB,afterShow:function(index,location,marker){
$('#info').html(location.html);
}
}
);
//Polyline Example var polyline = new Maplace({
map_div:'#gmap-6',controls_div:'#controls-6',controls_cssclass:'side-nav',controls_type:'list',controls_on_map:false,show_infowindows:true,view_all_text:'Start',locations:LocsA,type:'polyline'}
);
//Polygon Example var polygon = new Maplace({
map_div:'#gmap-7',controls_div:'#controls-7',controls_type:'list',show_markers:false,locations:LocsA,type:'polygon',draggable:true}
);
//Directions route Example var directions = new Maplace({
map_div:'#gmap-8',generate_controls:false,show_markers:false,locations:LocsD,type:'directions',draggable:true,directions_panel:'#route',afterRoute:function(distance){
$('#km').text((distance/1000)+'km');
}
}
);
//Styled Example var styled = new Maplace({
map_div:'#gmap-12',locations:LocsAB,start:3,styles:{
'Other style':[{
stylers:[{
hue:"#00ffe6"}
,{
saturation:-20}
]}
,{
featureType:"road",elementType:"geometry",stylers:[{
lightness:100}
,{
visibility:"simplified"}
]}
,{
featureType:"road",elementType:"labels",stylers:[{
visibility:"off"}
]}
],'Night':[{
featureType:'all',stylers:[{
invert_lightness:'true'}
]}
],'Greyscale':[{
featureType:'all',stylers:[{
saturation:-100}
,{
gamma:0.50}
]}
]}
}
);
//Mixed / Ajax Example var mixed = new Maplace({
map_div:'#gmap-9',controls_div:'#controls-9',controls_type:'list',controls_on_map:false}
);
function showGroup(index){
var el = $('#g'+index);
$('#mixed li').removeClass('active');
$(el).parent().addClass('active');
$.getJSON('data/ajax.php',{
type:index}
,function(data){
mixed.Load({
locations:data.points,view_all_text:data.title,type:data.type,force_generate_controls:true}
);
}
);
}
$('#mixed a').click(function(e){
e.preventDefault();
var index = $(this).attr('data-load');
showGroup(index);
}
);
//Fusion var fusion = new Maplace({
map_div:'#gmap-11',type:'fusion',map_options:{
zoom:2,set_center:[31.1,-39.4]}
,fusion_options:{
query:{
from:'423292',select:'location'}
,heatmap:{
enabled:true}
,suppressInfoWindows:true}
}
);
//Big Data Example var bigdata = new Maplace({
map_div:'#gmap-10',locations:big4k,commons:{
zoom:5,html:'%index'}
}
);
$('#load_bigdata').click(function(e){
e.preventDefault();
$('#panel').fadeOut(10,function(){
$('#gmap-10').fadeIn(10);
bigdata.Load();
}
);
}
);
$('#simple').one('inview',function(event,isInView){
if (isInView){
simple.Load();
}
}
);
$('#markers').one('inview',function(event,isInView){
if (isInView){
dropdown.Load();
ullist.Load();
}
}
);
$('#menu').one('inview',function(event,isInView){
if (isInView){
menu.Load();
}
}
);
$('#dtabs').one('inview',function(event,isInView){
if (isInView){
tabs.Load();
}
}
);
$('#polyline').one('inview',function(event,isInView){
if (isInView){
polyline.Load();
}
}
);
$('#polygon').one('inview',function(event,isInView){
if (isInView){
polygon.Load();
}
}
);
$('#directions').one('inview',function(event,isInView){
if (isInView){
directions.Load();
}
}
);
$('#styled').one('inview',function(event,isInView){
if (isInView){
styled.Load();
}
}
);
$('#dmixed').one('inview',function(event,isInView){
if (isInView){
showGroup(0);
}
}
);
$('#fusion').one('inview',function(event,isInView){
if (isInView){
fusion.Load();
}
}
);
if(lt_ie9){
simple.Load();
dropdown.Load();
ullist.Load();
menu.Load();
tabs.Load();
polyline.Load();
polygon.Load();
directions.Load();
styled.Load();
showGroup(0);
fusion.Load();
}
}
);
//ready}
)(jQuery,this);
JS代码(maplace.min.js):
/*** Maplace.js 0.1.2c** Copyright (c) 2013 Daniele Moraschi* Licensed under the MIT license* For all details and documentation:* http://maplacejs.com*/
(function(f,s,d,undefined){
'use strict';
var q,n,p;
q={
activateCurrent:function(c){
this.html_element.find("select").val(c)}
,getHtml:function(){
var c=this,a="",b;
if(1<this.ln){
a+='<select class="dropdown controls '+this.o.controls_cssclass+'">';
this.ShowOnMenu(this.view_all_key)&&(a+='<option value="'+this.view_all_key+'">'+this.o.view_all_text+"</option>");
for(b=0;
b<this.ln;
b+=1)this.ShowOnMenu(b)&&(a+='<option value="'+(b+1)+'">'+(this.o.locations[b].title||"#"+(b+1))+"</option>");
a=f(a+"</select>").bind("change",function(){
c.ViewOnMap(this.value)}
)}
(b=this.o.controls_title)&&(b=f('<div class="controls_title"></div>').css(this.o.controls_applycss?{
fontWeight:"bold",fontSize:this.o.controls_on_map?"12px":"inherit",padding:"3px 10px 5px 0"}
:{
}
).append(this.o.controls_title));
return this.html_element=f('<div class="wrap_controls"></div>').append(b).append(a)}
}
;
n={
html_a:function(c,a,b){
var e=this;
a=a||c+1;
b=b||this.o.locations[c].title;
c=f('<a data-load="'+a+'" id="ullist_a_'+a+'" href="#'+a+'" title="'+b+'"><span>'+(b||"#"+(c+1))+"</span></a>");
c.css(this.o.controls_applycss?{
color:"#666",display:"block",padding:"5px",fontSize:this.o.controls_on_map?"12px":"inherit",textDecoration:"none"}
:{
}
);
c.on("click",function(a){
a.preventDefault();
a=f(this).attr("data-load");
e.ViewOnMap(a)}
);
return c}
,activateCurrent:function(c){
this.html_element.find("li").removeClass("active");
this.html_element.find("#ullist_a_"+c).parent().addClass("active")}
,getHtml:function(){
var c=f("<ul class='ullist controls "+this.o.controls_cssclass+"'></ul>").css(this.o.controls_applycss?{
margin:0,padding:0,listStyleType:"none"}
:{
}
),a;
this.ShowOnMenu(this.view_all_key)&&c.append(f("<li></li>").append(n.html_a.call(this,!1,this.view_all_key,this.o.view_all_text)));
for(a=0;
a<this.ln;
a++)this.ShowOnMenu(a)&&c.append(f("<li></li>").append(n.html_a.call(this,a)));
(a=this.o.controls_title)&&(a=f('<div class="controls_title"></div>').css(this.o.controls_applycss?{
fontWeight:"bold",padding:"3px 10px 5px 0",fontSize:this.o.controls_on_map?"12px":"inherit"}
:{
}
).append(this.o.controls_title));
return this.html_element=f('<div class="wrap_controls"></div>').append(a).append(c)}
}
;
p=function(){
function c(a){
this.VERSION="0.1.2";
this.errors=[];
this.loaded=!1;
this.dev=!1;
this.markers=[];
this.oMap=!1;
this.view_all_key="all";
this.infowindow=null;
this.ln=0;
this.oMap=!1;
this.directionsDisplay=this.directionsService=this.Fusion=this.Polygon=this.Polyline=this.current_index=this.current_control=this.controls_wrapper=this.canvas_map=this.map_div=this.oBounds=null;
this.o={
map_div:"#gmap",controls_div:"#controls",generate_controls:!0,controls_type:"dropdown",controls_cssclass:"",controls_title:"",controls_on_map:!0,controls_applycss:!0,controls_position:d.maps.ControlPosition.RIGHT_TOP,type:"marker",view_all:!0,view_all_text:"View All",start:0,locations:[],commons:{
}
,map_options:{
mapTypeId:d.maps.MapTypeId.ROADMAP,zoom:1}
,stroke_options:{
strokeColor:"#0000FF",strokeOpacity:0.8,strokeWeight:2,fillColor:"#0000FF",fillOpacity:0.4}
,directions_options:{
travelMode:d.maps.TravelMode.DRIVING,unitSystem:d.maps.UnitSystem.METRIC,optimizeWaypoints:!1,provideRouteAlternatives:!1,avoidHighways:!1,avoidTolls:!1}
,styles:{
}
,fusion_options:{
}
,directions_panel:null,draggable:!1,show_infowindows:!0,show_markers:!0,infowindow_type:"bubble",listeners:{
}
,beforeViewAll:function(){
}
,afterViewAll:function(){
}
,beforeShow:function(a,e,c){
}
,afterShow:function(a,e,c){
}
,afterCreateMarker:function(a,e,c){
}
,beforeCloseInfowindow:function(a,e){
}
,afterCloseInfowindow:function(a,e){
}
,beforeOpenInfowindow:function(a,e,c){
}
,afterOpenInfowindow:function(a,e,c){
}
,afterRoute:function(a,e,c){
}
,onPolylineClick:function(a){
}
}
;
this.AddControl("dropdown",q);
this.AddControl("list",n);
f.extend(!0,this.o,a)}
c.prototype.controls={
}
;
c.prototype.create_objMap=function(){
var a=0,b;
for(b in this.o.styles)this.o.styles.hasOwnProperty(b)&&(0===a&&(this.o.map_options.mapTypeControlOptions={
mapTypeIds:[d.maps.MapTypeId.ROADMAP]}
),a++,this.o.map_options.mapTypeControlOptions.mapTypeIds.push("map_style_"+a));
if(this.loaded)this.oMap.setOptions(this.o.map_options);
else try{
this.map_div.css({
position:"relative",overflow:"hidden"}
),this.canvas_map=f("<div>").addClass("canvas_map").css({
width:"100%",height:"100%"}
).appendTo(this.map_div),this.oMap=new d.maps.Map(this.canvas_map.get(0),this.o.map_options)}
catch(e){
this.errors.push(e.toString())}
a=0;
for(b in this.o.styles)this.o.styles.hasOwnProperty(b)&&(a++,this.oMap.mapTypes.set("map_style_"+a,new d.maps.StyledMapType(this.o.styles[b],{
name:b}
)),this.oMap.setMapTypeId("map_style_"+a));
this.debug("01")}
;
c.prototype.add_markers_to_objMap=function(){
var a;
a=this.o.type||"marker";
switch(a){
case "marker":for(a=0;
a<this.ln;
a++)this.create.marker.call(this,a);
break;
default:this.create[a].apply(this)}
}
;
c.prototype.create={
marker:function(a){
var b=this,e=this.o.locations[a],c,h,l,m,g=new d.maps.LatLng(e.lat,e.lon),r=!1===e.visible?!1:!0;
f.extend(e,{
position:g,map:this.oMap,zIndex:1E4,visible:!1===this.o.show_markers?!1:r}
);
e.image&&(l=e.image_w||32,m=e.image_h||32,f.extend(e,{
icon:new d.maps.MarkerImage(e.image,new d.maps.Size(l,m),new d.maps.Point(0,0),new d.maps.Point(l/2,m/2))}
));
c=new d.maps.Marker(e);
d.maps.event.addListener(c,"click",function(){
b.o.beforeShow(a,e,c);
h=!1===e.show_infowindows?!1:!0;
b.o.show_infowindows&&h&&b.open_infowindow(a,c);
b.oMap.panTo(g);
e.zoom&&b.oMap.setZoom(e.zoom);
b.current_control&&(b.o.generate_controls&&b.current_control.activateCurrent)&&b.current_control.activateCurrent.call(b,a+1);
b.current_index=a;
b.o.afterShow(a,e,c)}
);
this.oBounds.extend(g);
this.markers.push(c);
this.o.afterCreateMarker(a,e,c);
e.visible=r;
return c}
,polyline:function(){
var a,b,e=[];
for(a=0;
a<this.ln;
a++)b=new d.maps.LatLng(this.o.locations[a].lat,this.o.locations[a].lon),e.push(b),this.create.marker.call(this,a);
f.extend(this.o.stroke_options,{
path:e,map:this.oMap}
);
this.Polyline?this.Polyline.setOptions(this.o.stroke_options):this.Polyline=new d.maps.Polyline(this.o.stroke_options)}
,polygon:function(){
var a=this,b,e,c=[];
for(b=0;
b<this.ln;
b++)e=new d.maps.LatLng(this.o.locations[b].lat,this.o.locations[b].lon),c.push(e),this.create.marker.call(this,b);
f.extend(this.o.stroke_options,{
paths:c,editable:this.o.draggable,map:this.oMap}
);
this.Polygon?this.Polygon.setOptions(this.o.stroke_options):this.Polygon=new d.maps.Polygon(this.o.stroke_options);
d.maps.event.addListener(this.Polygon,"click",function(b){
a.o.onPolylineClick(b)}
)}
,fusion:function(){
f.extend(this.o.fusion_options,{
styles:[this.o.stroke_options],map:this.oMap}
);
this.Fusion?this.Fusion.setOptions(this.o.fusion_options):this.Fusion=new d.maps.FusionTablesLayer(this.o.fusion_options)}
,directions:function(){
var a=this,b,c,k,h,l,m=[],g=0;
for(b=0;
b<this.ln;
b++)k=new d.maps.LatLng(this.o.locations[b].lat,this.o.locations[b].lon),0===b?h=k:b===this.ln-1?l=k:(c=!0===this.o.locations[b].stopover?!0:!1,m.push({
location:k,stopover:c}
)),this.create.marker.call(this,b);
f.extend(this.o.directions_options,{
origin:h,destination:l,waypoints:m}
);
this.directionsService||(this.directionsService=new d.maps.DirectionsService);
this.directionsDisplay?this.directionsDisplay.setOptions({
draggable:this.o.draggable}
):this.directionsDisplay=new d.maps.DirectionsRenderer({
draggable:this.o.draggable}
);
this.directionsDisplay.setMap(this.oMap);
this.o.directions_panel&&(this.o.directions_panel=f(this.o.directions_panel),this.directionsDisplay.setPanel(this.o.directions_panel.get(0)));
this.o.draggable&&d.maps.event.addListener(this.directionsDisplay,"directions_changed",function(){
g=a.compute_distance(a.directionsDisplay.directions);
a.o.afterRoute(g)}
);
this.directionsService.route(this.o.directions_options,function(b,c){
c===d.maps.DirectionsStatus.OK&&(g=a.compute_distance(b),a.directionsDisplay.setDirections(b));
a.o.afterRoute(g,c,b)}
)}
}
;
c.prototype.compute_distance=function(a){
var b=0,c=a.routes[0],d=c.legs.length;
for(a=0;
a<d;
a++)b+=c.legs[a].distance.value;
return b}
;
c.prototype.type_to_open={
bubble:function(a){
this.infowindow=new d.maps.InfoWindow({
content:a.html||""}
)}
}
;
c.prototype.open_infowindow=function(a,b){
this.CloseInfoWindow();
var c=this.o.locations[a],d=c.type||this.o.infowindow_type;
c.html&&this.type_to_open[d]&&(this.o.beforeOpenInfowindow(a,c,b),this.type_to_open[d].call(this,c),this.infowindow.open(this.oMap,b),this.o.afterOpenInfowindow(a,c,b))}
;
c.prototype.get_html_controls=function(){
return this.controls[this.o.controls_type]&&this.controls[this.o.controls_type].getHtml?(this.current_control=this.controls[this.o.controls_type],this.current_control.getHtml.apply(this)):""}
;
c.prototype.generate_controls=function(){
if(this.o.controls_on_map){
var a=f('<div class="on_gmap '+this.o.controls_type+' gmap_controls"></div>').css(this.o.controls_applycss?{
margin:"5px"}
:{
}
),b=f(this.get_html_controls()).css(this.o.controls_applycss?{
background:"#fff",padding:"5px",border:"1px solid rgb(113,123,135)",boxShadow:"rgba(0,0,0,0.4) 0px 2px 4px",maxHeight:this.map_div.find(".canvas_map").outerHeight()-80,minWidth:100,overflowY:"auto",overflowX:"hidden"}
:{
}
);
a.append(b);
this.oMap.controls[this.o.controls_position].push(a.get(0))}
else this.controls_wrapper.empty(),this.controls_wrapper.append(this.get_html_controls())}
;
c.prototype.init_map=function(){
var a=this,b=0;
this.Polyline&&this.Polyline.setMap(null);
this.Polygon&&this.Polygon.setMap(null);
this.Fusion&&this.Fusion.setMap(null);
this.directionsDisplay&&this.directionsDisplay.setMap(null);
if(this.markers){
for(b in this.markers)if(this.markers[b])try{
this.markers[b].setMap(null)}
catch(c){
a.errors.push(c)}
this.markers.length=0;
this.markers=[]}
this.o.controls_on_map&&this.oMap.controls&&this.oMap.controls[this.o.controls_position].forEach(function(b,c){
try{
a.oMap.controls[this.o.controls_position].removeAt(c)}
catch(e){
a.errors.push(e)}
}
);
this.oBounds=new d.maps.LatLngBounds;
this.debug("02")}
;
c.prototype.perform_load=function(){
1===this.ln?(this.oMap.setCenter(this.markers[0].getPosition()),this.ViewOnMap(1)):0===this.ln?(this.o.map_options.set_center?this.oMap.setCenter(new d.maps.LatLng(this.o.map_options.set_center[0],this.o.map_options.set_center[1])):this.oMap.fitBounds(this.oBounds),this.oMap.setZoom(this.o.map_options.zoom)):(this.oMap.fitBounds(this.oBounds),"number"===typeof(this.o.start-0)&&0<this.o.start&&this.o.start<=this.ln?this.ViewOnMap(this.o.start):this.ViewOnMap(this.view_all_key))}
;
c.prototype.debug=function(a){
this.dev&&this.errors.length&&console.log(a+":",this.errors)}
;
c.prototype.AddControl=function(a,b){
if(!a||!b)return!1;
this.controls[a]=b;
return!0}
;
c.prototype.CloseInfoWindow=function(){
this.infowindow&&(this.current_index||0===this.current_index)&&(this.o.beforeCloseInfowindow(this.current_index,this.o.locations[this.current_index]),this.infowindow.close(),this.infowindow=null,this.o.afterCloseInfowindow(this.current_index,this.o.locations[this.current_index]))}
;
c.prototype.ShowOnMenu=function(a){
if(a===this.view_all_key&&this.o.view_all&&1<this.ln)return!0;
a=parseInt(a,10);
if("number"===typeof(a-0)&&0<=a&&a<this.ln){
var b=!1===this.o.locations[a].on_menu?!1:!0;
if(!1!==this.o.locations[a].visible&&b)return!0}
return!1}
;
c.prototype.ViewOnMap=function(a){
if(a===this.view_all_key)this.o.beforeViewAll(),this.current_index=a,0<this.o.locations.length&&(this.o.generate_controls&&this.current_control&&this.current_control.activateCurrent)&&this.current_control.activateCurrent.apply(this,[a]),this.oMap.fitBounds(this.oBounds),this.CloseInfoWindow(),this.o.afterViewAll();
else if(a=parseInt(a,10),"number"===typeof(a-0)&&0<a&&a<=this.ln)try{
d.maps.event.trigger(this.markers[a-1],"click")}
catch(b){
this.errors.push(b.toString())}
this.debug("03")}
;
c.prototype.SetLocations=function(a,b){
this.o.locations=a;
b&&this.Load()}
;
c.prototype.AddLocations=function(a,b){
var c=this;
f.isArray(a)&&f.each(a,function(a,b){
c.o.locations.push(b)}
);
f.isPlainObject(a)&&this.o.locations.push(a);
b&&this.Load()}
;
c.prototype.AddLocation=function(a,b,c){
f.isPlainObject(a)&&this.o.locations.splice(b,0,a);
c&&this.Load()}
;
c.prototype.RemoveLocations=function(a,b){
var c=this,d=0;
f.isArray(a)?f.each(a,function(a,b){
b-d<c.ln&&c.o.locations.splice(b-d,1);
d++}
):a<this.ln&&this.o.locations.splice(a,1);
b&&this.Load()}
;
c.prototype.Loaded=function(){
return this.loaded}
;
c.prototype._init=function(){
this.ln=this.o.locations.length;
for(var a=0;
a<this.ln;
a++)f.extend(this.o.locations[a],this.o.commons),this.o.locations[a].html&&(this.o.locations[a].html=this.o.locations[a].html.replace("%index",a+1),this.o.locations[a].html=this.o.locations[a].html.replace("%title",this.o.locations[a].title||""));
this.map_div=f(this.o.map_div);
this.controls_wrapper=f(this.o.controls_div)}
;
c.prototype.Load=function(a){
f.extend(!0,this.o,a);
a&&a.locations&&(this.o.locations=a.locations);
this._init();
!1===this.o.visualRefresh?d.maps.visualRefresh=!1:d.maps.visualRefresh=!0;
this.init_map();
this.create_objMap();
this.add_markers_to_objMap();
1<this.ln&&this.o.generate_controls||this.o.force_generate_controls?(this.o.generate_controls=!0,this.generate_controls()):this.o.generate_controls=!1;
var b=this;
if(this.loaded)this.perform_load();
else{
d.maps.event.addListenerOnce(this.oMap,"idle",function(){
b.perform_load()}
);
d.maps.event.addListener(this.oMap,"resize",function(){
b.canvas_map.css({
width:b.map_div.width(),height:b.map_div.height()}
)}
);
for(var c in this.o.listeners){
var k=this.oMap,h=this.o.listeners[c];
this.o.listeners.hasOwnProperty(c)&&d.maps.event.addListener(this.oMap,c,function(e){
h(k,e)}
)}
}
this.loaded=!0}
;
return c}
();
"function"==typeof define&&define.amd?define(function(){
return p}
):s.Maplace=p}
)(jQuery,this,google);
CSS代码(app.css):
/* ----------------------------------------- General----------------------------------------- */
header{border-top:10px solid #a72200;background:#fff;color:#222;margin-bottom:20px;}
header h1{font-family:"Oxygen",sans-serif;text-transform:capitalize;font-weight:700;margin-top:50px;font-size:50px;}
header h1 a{color:#222;}
ul,ol,dl{margin-bottom:20px}
.gmap{height:300px;width:100%;padding:3px;border:5px solid #ddd;font-size:90%;}
.gmap + .gmap{margin:5px 0;}
.canvas_map{width:100% !important;}
.gmap img,.gmap object,.gmap embed{max-width:none;height:auto}
.gmap *,.gmap *:before,.gmap *:after{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
.tabs-content li{list-style-type:none !important;}
.line{border-bottom:3px solid #ddd;margin-top:10px;}
h2{font-family:"Open Sans",sans-serif;font-size:32px;font-weight:400;height:40px;line-height:40px;margin-bottom:20px;}
.install h2{}
.panel h2{font-size:28px;}
h3{font-size:22px;margin:0 0 5px;}
.code h3{margin:15px 0 12px;font-weight:normal;}
.description{margin-bottom:20px;}
.description ul{padding-left:20px;}
.description strong{font-weight:normal;}
.tabs.pill{margin-bottom:20px;}
.tabs.pill.small a{padding:0 8px;font-size:12px;line-height:22px;height:22px;}
.tabs.pill dd.active,.tabs.pill li.active,.tabs.pill dd,.tabs.pill li{margin-top:24px;}
section{padding-bottom:20px;}
section.last{padding-bottom:0;}
header .line{border-bottom:3px solid #444;}
section.last .line{border:none;}
footer{padding-top:10px;border-top:3px solid #444;}
ul.side-nav li{margin:0;}
.tabs .right{float:right !important;}
.docs .prettyprint{font-size:12px;}
.panel{height:140px;}
.panel .button{width:100%;}
select{width:auto;}
.mobile-one .right{float:right!important}
.adp-directions{width:100%;}
#controls{margin-bottom:20px;float:left;width:100%;}
#controls .ullist{margin:0px;padding:0px;list-style-type:none;}
#controls-9 .wrap_controls{margin-bottom:20px;}
#route table tbody tr td.adp-text{padding:9px 25px;vertical-align:middle;}
.socials{position:absolute;bottom:20px;right:-10px;}
@media only screen and (max-width:767px){h2{font-size:24px;}
h3{font-size:20px;}
.tabs dd a,.tabs li a{padding:0px 6px;}
.panel{height:auto;}
.socials{position:static;}
.gmap_controls.tabs .ullist li a{padding:0px 6px !important;}
#directions h2{height:auto;}
}
/* ----------------------------------------- Examples----------------------------------------- */
.gmap *{font-size:100%;}
.ullist{width:100%;}
.tab-content{margin:0 0 20px;}
.menu .ullist li{width:49%;float:left;margin-right:1%}
.menu .ullist li.active a,.menu .ullist li a:hover{color:#B82200 !important;background-color:#eee !important;}
.tabs .ullist li a{padding:0px 23.8px !important;}
.tabs .ullist li a:hover{color:#6f6f6f !important;background-color:transparent !important;}
.tabs .ullist li.active a{font-weight:bold;color:#3c3c3c !important;background-color:#fff !important;}
.ullist li.active a{font-weight:bold;}
.ullist li.active a,.ullist li a:hover{color:#B82200 !important;background-color:#eee !important;}
分享到QQ
分享到微博
微信扫一扫
