Icontem

File: examples/address.html

Recommend this page to a friend!
  Classes of Jean-Baptiste DEMONTE  >  Angular Google Maps Native  >  examples/address.html  >  Download  
File: examples/address.html
Role: Example script
Content type: text/plain
Description: Documentation
Class: Angular Google Maps Native
Add AngularJS directives to render GoogleMaps
Author: By
Last change: update to v2 and fix Error: $rootScope:infdig
Date: 3 years ago
Size: 1,027 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html ng-app="MyApp">
<head lang="en">
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="assets/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="../dist/angular-google-maps-native.min.js"></script>
  <script>angular.module('MyApp', ['GoogleMapsNative']);</script>
</head>
<body>
<div class="panel">
  <div class="item">
    Address: <input type="text" ng-model="address" ng-model-options="{debounce: 500}" size="50">
  </div>
</div>

<gm-map options="{center: [37.772323, -122.214897], zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP}">
  <gm-marker gm-address="address" gm-then="map.setCenter(marker.getPosition())" on-position_changed="map.setCenter(marker.getPosition())"></gm-marker>
</gm-map>
<br />
<gm-map gm-address="{address:'Haltern am See, Weseler Str. 151'}" options="{zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP}">
  <gm-marker position="map.getCenter()"></gm-marker>
</gm-map>

</body>
</html>