File: examples/markers.html

Recommend this page to a friend!
  Classes of Jean-Baptiste DEMONTE  >  Angular Google Maps Native  >  examples/markers.html  >  Download  
File: examples/markers.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 of examples/markers.html
Date: 1 month ago
Size: 1,685 bytes


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=""></script>
  <script src="../dist/angular-google-maps-native.min.js"></script>
  <script src="assets/tools.js"></script>
    angular.module('MyApp', ['GoogleMapsNative', 'ExampleTools'])

        .controller('MyCtrl', function ($scope, console) {
          $scope.console = console;

          $scope.items = [
             {position: [41.21444529917117,-78.2734375], name: "Point 1"},
             {position: [32.51281509243061,-83.986328125], name: "Point 2"},
             {position: [39.33709791014559,-87.150390625], name: "Point 3"},
             {position: [42.910812044859036,-99.19140625], name: "Point 4"},
             {position: [36.847358278821424,-109.2109375], name: "Point 5"},
             {position: [41.609935469410566,-116.505859375], name: "Point 6"}

<body ng-controller="MyCtrl" ng-init="showMarker=true">

  <div class="panel">
    <div class="item">
        <input type="checkbox" ng-model="showMarker"> Show the markers

  <gm-map options="{center: [37.772323, -122.214897], zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP}">
        ng-repeat="item in items" position="item.position"
        on-click="console.log( + ': ' + marker.getPosition().lat() + ',' + marker.getPosition().lng())"