angular-ui / ui-map Goto Github PK
View Code? Open in Web Editor NEWGoogle Maps
Home Page: http://angular-ui.github.io/ui-map
License: MIT License
Google Maps
Home Page: http://angular-ui.github.io/ui-map
License: MIT License
Hi, could you push this lib to npm?
Because it now possible to download only using bower.
Tested in all other browsers (except IE) and it passes fine. Very frustrating.
angular-ui/angular-ui-OLDREPO#236
I am getting the same problem as it looks like this issue was forgotten.
When closing an InfoWindow, the map-closeclick handler is not called in IE 10 or Firefox 12:
http://plnkr.co/edit/k3fVbo5Wdtf6HmCE0lCR?p=preview
The plunker works on Chrome.
I tried with:
Only a problem in firefox. See this fiddle to reproduce:
http://jsfiddle.net/xMw6U/4/
Add a marker and then click on it to open the window.
Today I was wondering if it's possible, for example, to toggle the marker visibility using ng-show
directive. It's a good idea?
I need to do geocoding on a map object, and as best I could see, there is no support for "addListenerOnce" and/or the tilesloaded event.
It was trivial to add it. And yes, I know this is NOT elegant. :)
function bindMapEvents(scope, eventsStr, googleObject, element) {
// Jason's hack. This makes the "ready" function fire on map load.
google.maps.event.addListenerOnce(googleObject, 'tilesloaded', function() {
scope.ready();
});
angular.forEach(eventsStr.split(' '), function (eventName) {
...
}
}
In the controller:
/* ready() is a custom definition that I added to the ui-map code.
It sets up a one time listener that will run on 'tilesloaded' */
$scope.ready = function() {
$scope.getCoords($scope.address1 + " " + $scope.city + " " + $scope.selectedState + " " + $scope.zip);
};
Not a show stopper, just an FYI.
Hi, and thanks for this module !
Is there a simple way to create a custom info window (I mean without the whole google maps divs) ?
Thanks !
Kind of annoying if I want to put a few markers onto the page. I think it would be more sensible to do something like this:
<div ui-map>
<div ng-repeat="marker in markers" ui-map-marker="marker">Popup Html Goes Here</div>
</div>
$scope.markers = [ { position: 11 }, { position: 12 } ];
The 'map' property would be added automatically to the object, and new markers would be generated for you.
I implemented the ui-map successfully in separate page but now I am implementing it in modal. Map is not shown and when I drag map area this error is shown. Uncaught TypeError: Cannot read property 'x' of undefined
. When I click the map area, I get this error. Uncaught RangeError: Maximum call stack size exceeded
. The same code was running when using without the modal. I am stuck. Has anyone the solution?
Hi,
I have markers on a map, that open an InfoWindow on click. Each InfoWindow contains a button.
To reproduce the bug:
open an InfoWindow and click on the button, the function callback is called once => OK
Click on another marker => the InfoWindow is closed, another one is opened
Click on the button, then the callback function is called twice => Bug
Hi all,
The readme seems to be some generic document without containing any details about this ui-maps project. The demo.html contained in the demo directory looks like it needs to be included from some other html file as it does not even include Angular. An online demo at http://douglasduteil.github.io/ui-map/ seems to be not quite working as it should (adding a marker and panning to it does not work.)
All in all I'm lost whether this module is in a usable state at all. Please advice..
Wrong Git, please close
Controller in 8f003f36.scripts.js angular.module("angularGoogleMapsApp").controller(["$scope","$log","$location","NotFoundCtrl"... needs name before safe injection array.
angular-hint breaks because of that.
Original bug at angular-ui/angular-ui-OLDREPO#552 .
GoogleMaps event listeners, e.g. map-idle
, map-click
, inside of ui-event
require jQuery for event binding. jQuery is listed as "optional" in the documentation.
It's true for latest uiMap
from https://github.com/angular-ui/ui-map/
And uiEvent
from https://github.com/angular-ui/angular-ui/
Here is a page where clicks on map pins works at first but before long the clicks stop working. Meanwhile, clicks in the list on the left continue to select items on the map.
http://run.plnkr.co/plunks/NFEyH8YDMigAr97vnFDp/
My sample uses angular-1.2.0-rc1 but I get the bug with any version of angular.
I have been using ui-map a lot so far, but now wanted to go a step further, and support polygon or rectangle drawing for arbitrary selections on the map. I copied code from this example:
https://developers.google.com/maps/documentation/javascript/examples/drawing-tools
That roughly works as expected, but I am not sure how to attach to the overlaycomplete event. Adding map-overlaycomplete to the ui-events attribute doesn't seem to do the trick, nor adding it inside the directives. Looks like it is an event on the drawingmanager, not on the map.
I would love to see DrawingManager to get integrated into this directive, with support of at least that overlaycomplete event..
Can I just get a quick show of hands on people who are, like, super-invested in the current implementation of this library? Would anybody's feelings be hurt if I submitted a PR with a complete rewrite? The problems as I see them:
$scope
). Having access to these objects is nice, but they absolutely should not be forced in front of my face.I could go on, and I'll grant that I'm obsessively perfectionistic, but hey, you gotta start somewhere. Thoughts and feedback are welcome. /cc @ProLoser
When I try to place markers it returns me Cannot read property latLng of undefined.
<div ng-repeat="marker in myMarkers"
ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'markerClicked(marker)'}">
</div>
//Module
angular.module('Maptesting', ['ui.map', 'ui.event'])
.controller('CtrlGMap', ['$scope', function($scope) {
$scope.mapOptions = {
center: new google.maps.LatLng(-54.798112, -68.303375),
zoom: 11,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
$scope.myMarkers = [];
$scope.addMarker = function ($event, $params) {
$scope.myMarkers.push(new google.maps.Markers({
map: $scope.myMap,
position: $params.latLng
}));
};
$scope.markerClicked = function(m) {
window.alert("clicked");
};
}]);
Since google maps infowindow has a very limited set of customizations infobubble was created. https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Would be awesome if support for this was added.
I would love to contribute, a bit of a beginner when it comes angular and js so would need a some pointers
I am using ui-map to create a map. I have several points now and I want the map to automatically set the center and the zoom to display all the markers at the beginning.
I found a possible solution here so I added to my project.
The problem is that every time I move around the map, the map goes to the initial zoom and extent.
Is it because angular is continually evaluating the $scope.mapOptions and centering the map?
Controller
$scope.myMarkers = [new google.maps.LatLng (52.537,-2.061),
new google.maps.LatLng (52.564,-2.017)];
var latlngbounds = new google.maps.LatLngBounds();
$scope.myMarkers.forEach(function(marker){
latlngbounds.extend(marker.position);
});
$scope.mapOptions = {
zoom: 17,
center: latlngbounds.getCenter(),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
HTML
<div id="map_canvas" ui-map="myMap" ui-options="mapOptions" style="height:800px"></div>
<!--In addition to creating the markers on the map, div elements with existing google.maps.Marker object should be created to hook up with events -->
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]">
</div>
How can I solve this?
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>
How can I detect if the map is ready
I get the error "ReferenceError: google is not defined" before the function onGoogleReady() is called. I load your module like this:
<script type="text/javascript" src="bower_components/angular-ui-utils/modules/event/event.js "></script>
<script type="text/javascript" src="bower_components/angular-ui-map/src/map.js"></script>
<script src="${pageContext.request.contextPath}/web/views/js/mapController.js"></script>
<script type="text/javascript" charset="utf-8" async="async" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>
If I do not use the attribute async when loading the GoogleAPI I get:
Uncaught TypeError: Cannot call method 'appendChild' of null
which is called in the line
document.body.appendChild(s);
of Google's js-script.
If I take the following Google-API-script:
<script type="text/javascript" charset="utf-8" src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
and the controller
var myMapsApp = angular.module('myMapsApp', [ 'restangular', 'ui.map', 'ui.event' ]);
function onGoogleReady() {
console.log('onGoogleReady...');
//angular.bootstrap(document.getElementById("map"), [ 'app.ui-map' ]);
}
angular.module('myMapsApp').controller('MapController', [ '$scope', function($scope) {
$scope.mapOptions = {
center : new google.maps.LatLng(35.784, -78.670),
zoom : 15,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
} ]);
... then the maps is displayed but I don't have a callback function registered. Is there any demo-page I could use to solve this?
I have an application set up in this way:
In the HTML, this is set up to call a function on the controller whenever a click event is triggered on the map:
<div id="map" ui-map="map" ui-options="mapOptions" ui-event="{'map-click': 'mapClick($event, $params)' }"></div>
Inside a controller, I have this:
$scope.mapClick = function ($event, $params) {
// I want to get lat / lng from the click event
// However, $params.latLng is undefined.
$scope.mapService.clicked.lat = $params.latLng.lat()
$scope.mapService.clicked.lng = $params.latLng.lng()
// This returns an empty array [ ]
console.log($params)
}
$params should be returning the normal Angular click event data, according to what I'm seeing in the examples here. Why would it be an empty array? I'm using Angular 1.1.5, if that makes a difference.
I have a section of the page that is using ng-if to add/remove from the page and that section has a map inside of it. The map will show on the page but it is never placed on the scope so I am unable to interact with it or show Markers on it.
Hi guys,
Any chance we can use ui-map with Leaflet instead of google maps ?
You cannot create markers on the demo right now:
The bindMapEvents()
-function attaches events to google-maps objects, but it does not handle unbinding when objects are removed (or replaced).
The following use case will cause a memory leak each time setProject()
is called.
var markers = {
"firtProject": [/* list of Google Maps markers */],
"secondProject": [/* list of Google Maps markers */]
};
$scope.setProject = function(project) {
$scope.markers = markers[project];
};
$scope.markerClicked = function(marker) {
/* some action */
};
<button ng-click="setProject('firstProject')">Project 1</button>
<button ng-click="setProject('secondProject')">Project 2</button>
<div ng-repeat="marker in markers" ui-map-marker="markers[$index]" ui-event="{'map-click': 'markerClicked(marker)'}"></div>
Directive should store unbind markers when they are removed from scope.
im using an API call to load in person detail. I want to update the map center location once the details are returned from the api but i cant seem to get it to work.
Lead.get($state.params, function(data) {
$scope.lead = data;
$scope.mapOptions.center = new google.maps.LatLng(20.6700, -43.9400);
});
I had already defined mapOptions within the controller scope and just trying to update the LatLng center but no luck. Any suggestions would be great!
how to click a button to trigger the map to show out?
it there any way to do that? because I am considering to lower the request to google API
thanks
When running it on a browser with no 'deviceready' listener there is no issues at all, it works like a charm and is very powerful.
Unfortunately though I am having a few hickups when it comes to Cordova, so after running `grunt build' and doing either 'cordova emulate ios' or 'cordova build ios' loading it directly on my phone it is unable to load the map at all.
My current controller setup looks like this:
// required for UI-Map
function onGoogleReady() {
angular.bootstrap(document.getElementById("map"), ['app.ui-map']);
}
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var styles = [
{
"featureType": "all",
"elementType": "labels.text.fill",
"stylers": [
{
"saturation": "0"
...
];
$scope.mapOptions = {
styles: styles,
zoom: 16,
center: new google.maps.LatLng(37.82670075048411, -122.42281079292297),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
},
panControl: false,
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false
};
Any help with this would be absolutely awesome.
Thank you.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.