Angular directive
info-window source
Defines infoWindow and provides compile method
Requires: map directive
Restrict To: Element
NOTE: this directive should NOT be used with ng-repeat
because InfoWindow itself is a template, and a template must be
reused by each marker, thus, should not be redefined repeatedly
by ng-repeat
.
Dependencies:
Name | Type | Description |
---|---|---|
Attr2MapOptions | service | convert html attribute to Gogole map api options |
$compile | service | $compile service |
Attributes:
Name | Type | Description |
---|---|---|
visible | Boolean | Indicates to show it when map is initialized |
visible-on-marker | Boolean | Indicates to show it on a marker when map is initialized |
geo-callback | Expression | if position is an address, the expression is will be performed when geo-lookup is successful. e.g., geo-callback="showDetail()" |
<InfoWindowOption> | String | Any InfoWindow options, https://developers.google.com/maps/documentation/javascript/reference?csw=1#InfoWindowOptions |
<InfoWindowEvent> | String | Any InfoWindow events, https://developers.google.com/maps/documentation/javascript/reference |
Example
Usage:
<map MAP_ATTRIBUTES>
<info-window id="foo" ANY_OPTIONS ANY_EVENTS"></info-window>
</map>
Example:
<map center="41.850033,-87.6500523" zoom="3">
<info-window id="1" position="41.850033,-87.6500523" >
<div ng-non-bindable>
Chicago, IL<br/>
LatLng: {{chicago.lat()}}, {{chicago.lng()}}, <br/>
World Coordinate: {{worldCoordinate.x}}, {{worldCoordinate.y}}, <br/>
Pixel Coordinate: {{pixelCoordinate.x}}, {{pixelCoordinate.y}}, <br/>
Tile Coordinate: {{tileCoordinate.x}}, {{tileCoordinate.y}} at Zoom Level {{map.getZoom()}}
</div>
</info-window>
</map>