238 lines
8.8 KiB
HTML
Executable File
238 lines
8.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>JSDoc: Source: directives/map.js</title>
|
|
|
|
<script src="scripts/prettify/prettify.js"> </script>
|
|
<script src="scripts/prettify/lang-css.js"> </script>
|
|
<!--[if lt IE 9]>
|
|
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
|
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="main">
|
|
|
|
<h1 class="page-title">Source: directives/map.js</h1>
|
|
|
|
|
|
|
|
|
|
|
|
<section>
|
|
<article>
|
|
<pre class="prettyprint source linenums"><code>/**
|
|
* @ngdoc directive
|
|
* @name map
|
|
* @requires Attr2Options
|
|
* @description
|
|
* Implementation of {@link MapController}
|
|
* Initialize a Google map within a `<div>` tag with given options and register events
|
|
* It accepts children directives; marker, shape, or marker-clusterer
|
|
*
|
|
* It initialize map, children tags, then emits message as soon as the action is done
|
|
* The message emitted from this directive is;
|
|
* . mapInitialized
|
|
*
|
|
* Restrict To:
|
|
* Element
|
|
*
|
|
* @param {Array} geo-fallback-center
|
|
* The center of map incase geolocation failed. i.e. [0,0]
|
|
* @param {String} init-event The name of event to initialize this map.
|
|
* If this option is given, the map won't be initialized until the event is received.
|
|
* To invoke the event, use $scope.$emit or $scope.$broacast.
|
|
* i.e. <map init-event="init-map" ng-click="$emit('init-map')" center=... ></map>
|
|
* @param {String} &lt;MapOption> Any Google map options,
|
|
* https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions
|
|
* @param {String} &lt;MapEvent> Any Google map events,
|
|
* https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/map_events.html
|
|
* @example
|
|
* Usage:
|
|
* <map MAP_OPTIONS_OR_MAP_EVENTS ..>
|
|
* ... Any children directives
|
|
* </map>
|
|
*
|
|
* Example:
|
|
* <map center="[40.74, -74.18]" on-click="doThat()">
|
|
* </map>
|
|
*
|
|
* <map geo-fallback-center="[40.74, -74.18]">
|
|
* </map>
|
|
*/
|
|
/*jshint -W030*/
|
|
ngMap.directive('map', ['Attr2Options', '$timeout', function(Attr2Options, $timeout) {
|
|
var parser = Attr2Options;
|
|
function getStyle(el,styleProp)
|
|
{
|
|
if (el.currentStyle) {
|
|
var y = el.currentStyle[styleProp];
|
|
} else if (window.getComputedStyle) {
|
|
var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
|
|
}
|
|
return y;
|
|
}
|
|
|
|
return {
|
|
restrict: 'AE',
|
|
controller: ngMap.MapController,
|
|
/**
|
|
* Initialize map and events
|
|
* @memberof map
|
|
* @param {$scope} scope
|
|
* @param {angular.element} element
|
|
* @param {Hash} attrs
|
|
* @ctrl {MapController} ctrl
|
|
*/
|
|
link: function (scope, element, attrs, ctrl) {
|
|
var orgAttrs = parser.orgAttributes(element);
|
|
|
|
scope.google = google; //used by $scope.eval in Attr2Options to avoid eval()
|
|
|
|
/**
|
|
* create a new `div` inside map tag, so that it does not touch map element
|
|
* http://stackoverflow.com/questions/20955356
|
|
*/
|
|
var el = document.createElement("div");
|
|
el.style.width = "100%";
|
|
el.style.height = "100%";
|
|
element.prepend(el);
|
|
|
|
/**
|
|
* if style is not given to the map element, set display and height
|
|
*/
|
|
if (getStyle(element[0], 'display') != "block") {
|
|
element.css('display','block');
|
|
}
|
|
if (getStyle(element[0], 'height').match(/^(0|auto)/)) {
|
|
element.css('height','300px');
|
|
}
|
|
|
|
/**
|
|
* initialize function
|
|
*/
|
|
var initializeMap = function(mapOptions, mapEvents) {
|
|
var map = new google.maps.Map(el, {});
|
|
map.markers = {};
|
|
map.shapes = {};
|
|
|
|
/**
|
|
* resize the map to prevent showing partially, in case intialized too early
|
|
*/
|
|
$timeout(function() {
|
|
google.maps.event.trigger(map, "resize");
|
|
});
|
|
|
|
/**
|
|
* set options
|
|
*/
|
|
mapOptions.zoom = mapOptions.zoom || 15;
|
|
var center = mapOptions.center;
|
|
if (!center) {
|
|
mapOptions.center = new google.maps.LatLng(0,0);
|
|
} else if (!(center instanceof google.maps.LatLng)) {
|
|
delete mapOptions.center;
|
|
Attr2Options.setDelayedGeoLocation(map, 'setCenter',
|
|
center, {fallbackLocation: options.geoFallbackCenter});
|
|
}
|
|
map.setOptions(mapOptions);
|
|
|
|
/**
|
|
* set events
|
|
*/
|
|
for (var eventName in mapEvents) {
|
|
if (eventName) {
|
|
google.maps.event.addListener(map, eventName, mapEvents[eventName]);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* set observers
|
|
*/
|
|
parser.observeAttrSetObj(orgAttrs, attrs, map);
|
|
|
|
/**
|
|
* set controller and set objects
|
|
* so that map can be used by other directives; marker or shape
|
|
* ctrl._objects are gathered when marker and shape are initialized before map is set
|
|
*/
|
|
ctrl.map = map; /* so that map can be used by other directives; marker or shape */
|
|
ctrl.addObjects(ctrl._objects);
|
|
|
|
// /* providing method to add a marker used by user scope */
|
|
// map.addMarker = ctrl.addMarker;
|
|
|
|
/**
|
|
* set map for scope and controller and broadcast map event
|
|
* scope.map will be overwritten if user have multiple maps in a scope,
|
|
* thus the last map will be set as scope.map.
|
|
* however an `mapInitialized` event will be emitted every time.
|
|
*/
|
|
scope.map = map;
|
|
scope.map.scope = scope;
|
|
//google.maps.event.addListenerOnce(map, "idle", function() {
|
|
scope.$emit('mapInitialized', map);
|
|
//});
|
|
|
|
// the following lines will be deprecated on behalf of mapInitialized
|
|
// to collect maps, we should use scope.maps in your own controller, i.e. MyCtrl
|
|
scope.maps = scope.maps || {};
|
|
scope.maps[options.id||Object.keys(scope.maps).length] = map;
|
|
scope.$emit('mapsInitialized', scope.maps);
|
|
}; // function initializeMap()
|
|
|
|
/**
|
|
* get map options and events
|
|
*/
|
|
var filtered = parser.filter(attrs);
|
|
var options = parser.getOptions(filtered, scope);
|
|
var controlOptions = parser.getControlOptions(filtered);
|
|
var mapOptions = angular.extend(options, controlOptions);
|
|
var mapEvents = parser.getEvents(scope, filtered);
|
|
console.log("filtered", filtered, "mapOptions", mapOptions, 'mapEvents', mapEvents);
|
|
|
|
if (attrs.initEvent) { // allows controlled initialization
|
|
scope.$on(attrs.initEvent, function() {
|
|
!ctrl.map && initializeMap(mapOptions, mapEvents); // init if not done
|
|
});
|
|
} else {
|
|
initializeMap(mapOptions, mapEvents);
|
|
} // if
|
|
}
|
|
};
|
|
}]);
|
|
</code></pre>
|
|
</article>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<nav>
|
|
<h2><a href="index.html">Index</a></h2><h3>service</h3><ul><li><a href="Attr2Options.html">Attr2Options</a></li><li><a href="GeoCoder.html">GeoCoder</a></li><li><a href="NavigatorGeolocation.html">NavigatorGeolocation</a></li><li><a href="StreetView.html">StreetView</a></li></ul><h3>directive</h3><ul><li><a href="bicycling-layer.html">bicycling-layer</a></li><li><a href="cloud-layer.html">cloud-layer</a></li><li><a href="custom-control.html">custom-control</a></li><li><a href="drawing-manager.html">drawing-manager</a></li><li><a href="dynamic-maps-engine-layer.html">dynamic-maps-engine-layer</a></li><li><a href="fusion-tables-layer.html">fusion-tables-layer</a></li><li><a href="heatmap-layer.html">heatmap-layer</a></li><li><a href="info-window.html">info-window</a></li><li><a href="kml-layer.html">kml-layer</a></li><li><a href="lazy-load.html">lazy-load</a></li><li><a href="map.html">map</a></li><li><a href="map-data.html">map-data</a></li><li><a href="map-type.html">map-type</a></li><li><a href="MapController.html">MapController</a></li><li><a href="maps-engine-layer.html">maps-engine-layer</a></li><li><a href="marker.html">marker</a></li><li><a href="overlay-map-type.html">overlay-map-type</a></li><li><a href="shape.html">shape</a></li><li><a href="traffic-layer.html">traffic-layer</a></li><li><a href="transit-layer.html">transit-layer</a></li><li><a href="weather-layer.html">weather-layer</a></li></ul>
|
|
</nav>
|
|
|
|
<br clear="both">
|
|
|
|
<footer>
|
|
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-alpha9</a>
|
|
and <a href="https://github.com/allenhwkim/angular-jsdoc">angular-jsdoc</a>
|
|
</footer>
|
|
|
|
<script> prettyPrint(); </script>
|
|
<script src="scripts/linenumber.js"> </script>
|
|
<script>
|
|
var href=window.location.href.match(/\/([^\/]+$)/)[1];
|
|
document.querySelector("nav a[href='"+href+"']").scrollIntoView(true);
|
|
if (window.location.hash == "")
|
|
document.querySelector("body").scrollIntoView(true);
|
|
</script>
|
|
</body>
|
|
</html>
|