ui-map Add demo

function MapCtrl($scope) {
    $scope.myMarkers = [];

    $scope.mapOptions = {
        center: new google.maps.LatLng(35.784, -78.670),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    $scope.addMarker = function($event) {
        $scope.myMarkers.push(new google.maps.Marker({
            map: $scope.myMap,
            position: $event.latLng
        }));
    };

    $scope.setZoomMessage = function(zoom) {
        $scope.zoomMessage = 'You just zoomed to '+zoom+'!';
        console.log(zoom,'zoomed');
    };

    $scope.openMarkerInfo = function(marker) {
        $scope.currentMarker = marker;
        $scope.currentMarkerLat = marker.getPosition().lat();
        $scope.currentMarkerLng = marker.getPosition().lng();
        $scope.myInfoWindow.open($scope.myMap, marker);
    };

    $scope.setMarkerPosition = function(marker, lat, lng) {
        marker.setPosition(new google.maps.LatLng(lat, lng));
    };
}

<section id="directives-map" ng-controller="MapCtrl">
                <div class="page-header">
                    <h1>Google Maps</h1>
                </div>
                <div class="well">
                    <div class="row">
                        <div class="span3">
                            <h4>Click to add a marker!</h4>
                            <p>{{zoomMessage}}</p>
                            <ul>
                                <li ng-repeat="marker in myMarkers">
                                    <a class="btn" ng-click="myMap.panTo(marker.getPosition())">
                                        Pan to Marker {{$index}}
                                    </a>
                                </li>
                            </ul>

                            <!-- this is the confusing part. we have to point the map marker directive
                                at an existing google.maps.Marker object, so it can hook up events -->
                            <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
                                ui-event="{'map-click': 'openMarkerInfo(marker)'}">
                            </div>

                            <div ui-map-info-window="myInfoWindow">
                                <h1>Marker</h1>
                                Lat: <input ng-model="currentMarkerLat">, Lng: <input ng-model="currentMarkerLng">
                                <a class="btn btn-primary" ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
                            </div>
                        </div>

                        <!--Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
                        google maps-->
                        <div id="map_canvas" ui-map="myMap" class="span8 map"
                            ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
                            ui-options="mapOptions">
                        </div>
                    </div>
                </div>
                <h3>How?</h3>
                <p class="alert alert-info"><i class="icon-info-sign"></i> Remember that you can pass a variable containing an object to <code>ui-event</code></p>
<pre class="prettyprint linenums" ng-non-bindable>
&lt;h4&gt;Click to add a marker!&lt;/h4&gt;
&lt;p&gt;{{zoomMessage}}&lt;/p&gt;
&lt;ul&gt;
  &lt;li ng-repeat=&quot;marker in myMarkers&quot;&gt;
    &lt;a ng-click=&quot;myMap.panTo(marker.getPosition())&quot;&gt;Pan to Marker {{$index}}&lt;/a&gt;
  &lt;/li&gt;
&lt;/ul&gt;

&lt;!-- this is the confusing part. we have to point the map marker directive
  at an existing google.maps.Marker object, so it can hook up events --&gt;
&lt;div ng-repeat=&quot;marker in myMarkers&quot; ui-map-marker=&quot;myMarkers[$index]&quot;
  ui-event=&quot;{&#x27;map-click&#x27;: &#x27;openMarkerInfo(marker)&#x27;}&quot;&gt;
&lt;/div&gt;

&lt;div ui-map-info-window=&quot;myInfoWindow&quot;&gt;
  &lt;h1&gt;Marker&lt;/h1&gt;
  Lat: &lt;input ng-model=&quot;currentMarkerLat&quot;&gt;, Lng: &lt;input ng-model=&quot;currentMarkerLng&quot;&gt;
  &lt;a ng-click=&quot;setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)&quot;&gt;Set Position&lt;/a&gt;
&lt;/div&gt;

&lt;!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
google maps --&gt;
&lt;div id=&quot;map_canvas&quot; ui-map=&quot;myMap&quot; class=&quot;map&quot;
  ui-event=&quot;{&#x27;map-click&#x27;: &#x27;addMarker($event)&#x27;, &#x27;map-zoom_changed&#x27;: &#x27;setZoomMessage(myMap.getZoom())&#x27; }&quot;
  ui-options=&quot;mapOptions&quot;&gt;
&lt;/div&gt;

&lt;script&gt;
$scope.myMarkers = [];

$scope.mapOptions = {
  center: new google.maps.LatLng(35.784, -78.670),
  zoom: 15,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

$scope.addMarker = function($event) {
  $scope.myMarkers.push(new google.maps.Marker({
    map: $scope.myMap,
    position: $event.latLng
  }));
};

$scope.setZoomMessage = function(zoom) {
  $scope.zoomMessage = &#x27;You just zoomed to &#x27;+zoom+&#x27;!&#x27;;
  console.log(zoom,&#x27;zoomed&#x27;)
};

$scope.openMarkerInfo = function(marker) {
  $scope.currentMarker = marker;
  $scope.currentMarkerLat = marker.getPosition().lat();
  $scope.currentMarkerLng = marker.getPosition().lng();
  $scope.myInfoWindow.open($scope.myMap, marker);
};

$scope.setMarkerPosition = function(marker, lat, lng) {
  marker.setPosition(new google.maps.LatLng(lat, lng));
};
&lt;/script&gt;

&lt;style&gt;
.map {
  height: 400px;
  width: 600px;
}
&lt;/style&gt;
</pre>
            </section>

May 15 '13 21:05 ProLoser

@douglasduteil I threw together some simple instructions, when your doc generator is ready this could use that magic touch too.

May 16 '13 06:05 ProLoser

K Actually I'm stuck with unknown problems it's may be better to share and fix them together, if it's really problematic... I'm going to push on the angular-ui-docs

May 16 '13 12:05 douglasduteil

K my angular-ui-docs works but... ui-map is not stable.

One unit test fail :

Firefox 21.0 (Linux) uiMap test infoWindow should recognize infowindow events in ui-event as "map-eventname" FAILED
    Expected undefined to be true.
    @.../mapSpec.js:100

More than that, after I run the doc in localhost

cd out && grunt build-doc && python -m SimpleHTTPServer 8666

I have another error :

TypeError: undefined is not a function
    at new <anonymous> (http://localhost:8666/core/demo.js:26:19)

This demo.js:26:19 is that :

$scope.mapOptions = {
          center: new google.maps.LatLng(35.784, -78.670), // line 26
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
};

May 16 '13 15:05 douglasduteil

Yeah that error ONLY occurs in FF (not in phantom nor chrome) I was trying to fix it last night but I got stuck.

As for your error it seems LatLng is undefined? I will have to test it again as I thought I fixed the demo page.

May 16 '13 19:05 ProLoser

Perhaps try changing the google map api to https://maps.googleapis.com/maps/api/js?sensor=true instead? I don't know what the API is for ?v=3.exp

May 16 '13 19:05 ProLoser

Alright I fixed the demo bug !

The demo works if you pass a initialization callback function parameter, like : https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initCall

I feel like commenting the failed test for now just to have a demo site made by Travis. What you think ?

May 16 '13 22:05 douglasduteil

Go ahead, we should throw comments in a few places (or at least have an issue open) for it.

May 16 '13 23:05 ProLoser

K. All done (: http://douglasduteil.github.io/ui-map/