angular js google map unable to use google event listener for marker
Question
I am testing out angular js google map http://angular-ui.github.io/angular-google-maps/#!/api
I can add multiple marker on the map, however i am unable to set the event listener to each marker. i just want it to write into console when user click any of the marker.
How can i make my codes work?
Below are my codes:
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org/" ng-app="appMaps">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script src="//maps.googleapis.com/maps/api/js?libraries=weather,geometry,visualization,places&sensor=false&language=en&v=3.17"></script>
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.26/angular.js" data-semver="1.2.26"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--css-->
<style type="text/css">
html, body, #map_canvas {
height: 100%;
width: 100%;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
</style>
<script>angular.module('appMaps', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function($scope) {
$scope.map = {
center: {
latitude: 34.963916,
longitude: 104.311893
},
zoom: 4,
bounds: {},
};
$scope.options = {
scrollwheel: false
};
var createRandomMarker = function(i, bounds, idKey) {
var lat_min = bounds.southwest.latitude,
lat_range = bounds.northeast.latitude - lat_min,
lng_min = bounds.southwest.longitude,
lng_range = bounds.northeast.longitude - lng_min;
if (idKey == null) {
idKey = "id";
}
var latitude = lat_min + (Math.random() * lat_range);
var longitude = lng_min + (Math.random() * lng_range);
var ret = {
latitude: latitude,
longitude: longitude,
title: 'm' + i
};
ret[idKey] = i;
return ret;
};
$scope.randomMarkers = [];
// Get the bounds from the map once it's loaded
$scope.$watch(function() {
return $scope.map.bounds;
}, function(nv, ov) {
// Only need to regenerate once
if (!ov.southwest && nv.southwest) {
var markers = [];
for (var i = 0; i < 2; i++) {
var ret = {
latitude: 34.963916,
longitude: 104.311893,
title: 'm3',
id: 1
};
var ret2 = {
latitude: 37.096002,
longitude: 126.987675,
title: 'm2',
id:2
};
markers.push(ret);
markers.push(ret2);
}
$scope.randomMarkers = markers;
}
}, true);
$scope.marker = {
events:{click: console.log('click')},
}
});
</script>
</head>
<body>
<div id="map_canvas" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options" bounds="map.bounds" events = "'map.events'">
<ui-gmap-markers models="randomMarkers" coords="'self'" icon="'icon'" click="'test'" events = "'events'"></ui-gmap-markers>
</ui-gmap-google-map>
</div>
<!--example-->
</body>
</html>
2 answers
solution1
0 2015-02-06 17:52:41
I will look further into this later today. One way I can think of at the moment is to set the click argument in <ui-gmap-markers> to a valid JS function that calls console.log() .
In my case, I made click="onClick" and then defined the following function:
$scope.onClick = function onClick() {
console.log("click");}
solution2
0 2015-03-06 12:13:36
Click Event on google map
i am not know about map api in angular but i had some suggestions
you can use map api with canvas you can give ng-click event on canvas element
code is here
site:
jsfiddle.net/xSPAA/536/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.