Angular-Google-Maps: How to use 'method' in the controller - angularjs

When I change my app from jQuery way to Angular way,
I try to use Angular-Google-Maps.
But I can't find where is the Google Map Objects(Map, Marker, Polygon...)
and the approach to use Object 'method' (such like getMap() , getPath(), getPosition()..).
If I need to get the position of the marker which is dragged, how can i do?
just like I usually do ?
marker = new google.maps.Marker(opts);
postion = marker.getPosition();

Edit:
I found a way how to get the marker position when it was dragged'n'dropped. You can set the callback function for the marker:
<google-map center="center" zoom="zoom" control="googleMap">
<marker coords="coords" options="options" events="events">
</google-map>
Then in the controller you define the callback:
$scope.events: {
dragend: function (marker) {
$rootScope.$apply(function () {
console.log(marker.position.lat());
console.log(marker.position.lng());
});
}
}
Old Answer:
It is currently not possible:
https://github.com/nlaplante/angular-google-maps/issues/277
However, you can get the original google.maps.Map object:
Directive call:
<google-map center="center" zoom="zoom" control="googleMap"></google-map>
Angular controller:
...
$scope.center = = {
latitude: 48.13171,
longitude: 11.549554
};
$scope.zoom = 8;
$scope.googleMap = {}; // this is filled when google map is initiated
function getMapObject() {
$scope.googleMap.control.getGMap();
}
...

Actually you don't even need events, the library already binds your marker position with the scope.
Here is how I did it in Coffee Script:
Controller:
$scope.map =
center:
latitude: k
longitude: D
zoom: 16
marker:
coord:
k
D
View:
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<ui-gmap-marker
idKey="'pin'"
coords="map.marker.coord"
options="{'draggable':true}"
>
</ui-gmap-marker>
</ui-gmap-google-map>
<pre>{{map | json}}</pre>

Related

NgMap AngularJS setZoom()

Is anyone familiar with NgMap directives for using the Google Maps API? I have gotten a map to render with markers on data points, however I want to zoom in when I click on the marker. This isn't working for me. I am just trying to log the passed in location of the marker and I am seeing nothing right now.
I'm pretty new to AngularJS so I am probably missing something with the scope. Thanks!
Here's the map:
<div id='map'>
<map center="{{ $ctrl.map.center.latitude }}, {{ $ctrl.map.center.longitude }}" zoom="{{ $ctrl.map.zoom }}">
<div ng-repeat="location in $ctrl.locations">
<marker position="[{{ location.latitude }}, {{ location.longitude }}]" ng-click="$ctrl.pinClicked(location)"></marker>
</div>
</map>
</div>
And the component:
angular.module('myplaces')
.component('placespage', {
templateUrl: 'places.template.html',
controller: controller
})
function controller(placeService, NgMap) {
const ctrl = this;
ctrl.locations = [];
ctrl.marker = []
ctrl.map = {}
var map;
ctrl.$onInit = function() {
placeService.getPlaces().then(function(response) {
console.log(response.data.rows);
ctrl.locations = response.data.rows;
})
NgMap.getMap().then(function(map) {
console.log(ctrl.map);
})
ctrl.map = {
center:
{
latitude: 34.8394,
longitude: 134.6939
},
zoom:5,
};
}
ctrl.pinClicked = function(loc) {
console.log(loc); //This is getting nothing...
ctrl.map.setZoom(8);
}
}
move ng-repeat to marker directive and use onClick to bind with controller's function.
<marker ng-repeat="location in $ctrl.locations" position="[{{ location.latitude }}, {{ location.longitude }}]" on-click="$ctrl.pinClicked(location)"></marker>
see sample here.

How to style default map marker in Google maps angular plugin

I am using 2.0.X version of angular-google-maps.
All the markers are typical Google Maps style (red pointer) by default. While I what to style it a bit - either have the same shape but different colour or choose another shape. Without any custom images/icons involved, just basic but different colour.
Plugin documentation marker directive has a options attribute, which is referencing Google maps API docs where is says google.maps.MarkerOptions -
icon
Type: string|Icon|Symbol Icon for the foreground.
If a string
is provided, it is treated as though it were an Icon with the string
as url.
I've tried applying this like this
var pointObject = {
//other props
options: {
draggable: false,
icon: FORWARD_OPEN_ARROW //here
},
active: false
};
$scope.points.push(pointObject);
but this didn't work.
This is my solution to change marker:
in HTML:
<md-whiteframe flex="grow" layout-margin>
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options">
<ui-gmap-marker idKey="1" coords="marker.coords" options="marker.options">
</ui-gmap-marker>
</ui-gmap-google-map>
</md-whiteframe>
in Controller.ng.js:
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = {
center: {
latitude: 43.6091569,
longitude: 57.4442909
},
zoom: 13,
options: {
scrollwheel: false,
streetViewControl: false,
draggable: isDraggable,
}
};
$scope.marker = {
coords : {
latitude: 47.6091569,
longitude: 33.4442909
},
options: {
icon: '/marker.png',
}
};
$scope.window = {...};
});
Remember to inject uiGmapGoogleMapApi in controller
Google provides some constants that you can use for your icons here.
In your controller, use this:
uiGmapGoogleMapApi
.then(function (maps) {
$scope.map = { center: { latitude: 47, longitude: 33 }, zoom: 14 };
$scope.personMarker = {
id : 'personMarkerId', //must be unique
options: {
// more options: https://developers.google.com/maps/documentation/javascript/3.exp/reference#SymbolPath
icon: { path: maps.SymbolPath.CIRCLE, scale: 10 }
}
};
})
And your HTML:
<ui-gmap-google-map ng-if="map.center" center="map.center" zoom="map.zoom">
<ui-gmap-marker coords="map.center" options="personMarker.options" idKey="personMarker.id">
</ui-gmap-marker>
</ui-gmap-google-map>

Retrieving map markers - angular google maps

How do you retrieve the collection of markers using angular google maps?
I've trying to use var markers = $scope.map.markerscontrol.getGMarkers(); but it only returns the last item in the list.
Made a plunkr http://plnkr.co/edit/Tl60bVydDQ3jIXqG6nIc
I wanna use the markers to calculate the bounds and map center.
i think it help you.
in your HTML file:
<ui-gmap-google-map center="map.center" zoom="map.zoom" options="options" data-tap-disabled="true">
<ui-gmap-marker
icon="yourModel.icon"
idKey="yourModel.id"
coords="yourModel.coords"
control="markerControl">
</ui-gmap-marker>
</ui-gmap-google-map>
and in your angular controller.
$scope.yourModel = {
id: 1,
coords = {
latitude: position.latitude,
longitude: position.longitude
},
icon = 'path/to/icon.png'
};
$scope.markerControl = {};
and how to use
var marker = $scope.markerControl.getGMarkers();
// marker variable, get an array of object to use.

angularjs google maps - markers with window - infowindow not showing

Trying to get a app using angular-google-maps with:
- multiple markers via the markers directive
- a single infowindow via the window directive
I've been through the API and multiple closed issues / questions on the git-hub site but just can't get it working... :-/
jsfiddle
For simplicity, I'm declaring the markers manually (and they're displaying correctly):
$scope.markers = [
{
id: 0,
coords: {
latitude: 37.7749295,
longitude: -122.4194155
},
data: 'restaurant'
},
{
id: 1,
coords: {
latitude: 37.79,
longitude: -122.42
},
data: 'house'
},
{
id: 2,
coords: {
latitude: 37.77,
longitude: -122.41
},
data: 'hotel'
}
];
The html looks like:
<body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
<ui-gmap-window coords="markers.coords" show="windowOptions.show" closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
</body>
I'm applying the onClick function to the markers array using this code
$scope.addMarkerClickFunction = function(markersArray){
angular.forEach(markersArray, function(value, key) {
value.onClick = function(){
$scope.onClick(value.data);
};
});
};
The marker click functions look like
$scope.windowOptions = {
show: false
};
$scope.onClick = function(data) {
$scope.windowOptions.show = !$scope.windowOptions.show;
console.log('$scope.windowOptions.show: ', $scope.windowOptions.show);
console.log('This is a ' + data);
};
$scope.closeClick = function() {
$scope.windowOptions.show = false;
};
The $scope.onClick() function seems to be working on marker click since the console outputs what is expected - and the $scope.windowOptions.show value toggles between true and false...
I'm thinking it's the way I've connected the window html to the controller arrays and functions ? Any help is appreciated.
P.S. The API documentation examples seem out of date since they don't use show in the example but rather options.visible to show and hide infowindows - but then all the issues / examples suggest using show instead ?
I know this is an old post.
However, these days I've been struggling myself trying to do this and, moreover, the jsfiddle of the accepted answer is broken and doesn't work with latest versions of angular-google-maps directive. So, I've decided to share a working plunker hoping it can help other people.
Plunker here
This version is rendering multiple markers but just one window. Only one window can be opened at the same time.
It's based on the advises of the official site FAQ Section: See How do I only open one window at a time?
html
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-window
show="map.window.show"
coords="map.window.model"
options="map.window.options"
closeClick="map.window.closeClick()"
templateUrl="'infowindow.tpl.html'"
templateParameter="map.window">
</ui-gmap-window>
<ui-gmap-markers
models="map.markers"
coords="'self'"
events="map.markersEvents"
options="'options'">
</ui-gmap-markers>
</ui-gmap-google-map>
js
$scope.map = {
center: {
latitude: 39.5925511,
longitude: 2.633202
},
zoom: 14,
markers: [], // Markers here
markersEvents: {
click: function(marker, eventName, model) {
$scope.map.window.model = model;
$scope.map.window.show = true;
}
},
window: {
marker: {},
show: false,
closeClick: function() {
this.show = false;
},
options: {}
}
};
Hope it helps.
Your marker's binding is incorrect in the window directive.
Basically, you need to set a marker as selected on click and bind the window to that selected marker. See the jsfiddle for a working example.
<body ng-app="app">
<div class="angular-google-map-container" ng-controller="MainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
<ui-gmap-window coords="MapOptions.markers.selected.coords" show="windowOptions.show" closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
<ui-gmap-markers models="markers" idkey="markers.id" coords="'coords'" click="'onClick'" events="markers.events" >
</ui-gmap-markers>
</ui-gmap-google-map>
</div>
http://jsfiddle.net/gqkmyjos/
I know this is old post, but I struggled with Angular Google Map, and solve issue when you open one window for markers. If you use ng-repeat and window for each one - no problems. But when you have a markers directive, and want to show only one window, then you have an issue - window places not above marker and you need change position a little. How to do it? Let me share my experience on that.
You just need to specify pixelOffset for windowoptions like that:
JS:
$scope.windowOptions = {
pixelOffset : {
height: -25,
width: 0
}
};
HTML:
<ui-gmap-window coords='selectedmarker.coords' show='true' options='windowOptions'>
#{{ selectedmarker.tagline }}
</ui-gmap-window>
That's it. Change height for your needs.
you're better setting the marker model on the scope on click something like this:
marker click callback:
$scope.onClick = function(marker) {
$scope.selectedMarker = marker.model;
}
Then use the selectedMarker in the directive:
<ui-gmap-window coords="selectedMarker" show="windowOptions.show" closeClick="closeClick()">
<div>Hello</div>
</ui-gmap-window>
simple. assumes your marker model has longitude and latitude set of cause

angular-google-maps getting GEO location from mouse click

I am using the library angular-google-maps from http://angular-google-maps.org/. I am able to get most everything to work. What I am currently banging my head against is to get the "click" event to work on the map to give me the GEO location of where I clicked. Currently it's not even registering that I am clicking on the map.
Here is my partial:
<google-map
center="map.center"
zoom="map.zoom"
draggable='true'
>
</google-map>
and here is the controller:
// Create Map
$scope.map = {
center: {
latitude: 40.296755,
longitude: -111.696415
},
zoom: 13,
events: {
click: function (mapModel, eventName, originalEventArgs) {
alert("hola?");
}
}
};
Any help would be fantastic!
To add the event to the map, you need to attach an associative array (object) to the events attribute of the directive:
<google-map events="$scope.events" .... ></google-map>
In Controller:
$scope.events = {"click" : function () { console.log('woo-hoo') })

Resources