Add demo
ProLoser opened this issue · 27 comments
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>
<h4>Click to add a marker!</h4>
<p>{{zoomMessage}}</p>
<ul>
<li ng-repeat="marker in myMarkers">
<a 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 ng-click="setMarkerPosition(currentMarker, currentMarkerLat, currentMarkerLng)">Set Position</a>
</div>
<!-- Giving the div an id="map_canvas" fix problems with twitter bootstrap affecting
google maps -->
<div id="map_canvas" ui-map="myMap" class="map"
ui-event="{'map-click': 'addMarker($event)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
ui-options="mapOptions">
</div>
<script>
$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));
};
</script>
<style>
.map {
height: 400px;
width: 600px;
}
</style>
</pre>
</section>@douglasduteil I threw together some simple instructions, when your doc generator is ready this could use that magic touch too.
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
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 8666I 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
};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.
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
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 ?
Go ahead, we should throw comments in a few places (or at least have an issue open) for it.
K. All done (:
http://douglasduteil.github.io/ui-map/
The loading process is strange... It never works the first time... I have several Error 503 (Connection timed out)
It's showing me the loading screen AND the uncompiled version. The FIRST time it loaded fine, all subsequent times have failed to load properly. Do we need to add an ng-cloak somewhere?
Maybe... I'll cloak the demo section.
Haha Now it works very well for me. Thanks.
Still a panTo Error... But the loading works
Doesn't work for me at all
Really ?
Things getting unpredictable now... :(
Can you give me more details ?
I'm getting timeouts. Are you setting a timeout length anywhere?
Specifically this asset: http://douglasduteil.github.io/ui-map/assets/vendor/angular.min.js
Hi
Is it better with Google CDN ?
http://douglasduteil.github.io/ui-map/
No. Guess this is a race condition then? Is there no way you can make the dependencies load first or add some sort of dependency mapping thing or something?
I changed the waitSeconds to 15s (the default was 7s).
Is it better ?
Yeah seems to work okay.
Alleluia !
Is it enough for a pull request ?
Pssh just merge it man. The whole thing is already unstable, ANYTHING is an improvement lol.
LOL Alright (:
I need these projects to start becoming more autonomous as I just don't have the time/energy to keep up a beauracracy anymore lol.
Done http://angular-ui.github.io/ui-map/ !
I guess I have to come back to ui-utils, ui-codemirror and ui-ace to make them use our angular-ui-docs as doc generator ?
Demo broken for me:
GET http://douglasduteil.github.io/ui-map/assets/vendor/jquery.min.map 404 (Not Found)