I'm trying to know if a given marker is inside a circle radius. And I want to know if the marker is clicked so it will show an alert about the marker's position. I'm using ng-map.
Sample map image
My HTML :
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAHmXV5zem_Py_aFHAwPixEyjW1cV-gJ00&callback=initMap"type="text/javascript"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>
<body ng-controller="MyController as vm">
<br/>
<br/>
<br/>
<ng-map zoom="11" center="{{vm.latlng}}" on-click="vm.setCenter(event)" tilt="0">
<marker position="[-6.5829106488490865, 106.87462984179683]" on-click="vm.foo(2,3)" draggable="true"></marker>
<shape name="circle" stroke-color='#FF0000' stroke-weight="2"
center="{{vm.latlng}}" radius="{{vm.radius}}"
on-click="vm.getRadius()"
draggable="true"
on-dragstart="vm.dragStart()"
on-drag="vm.drag()"
on-dragend="vm.dragEnd()"
editable="true">
</shape>
<traffic-layer></traffic-layer>
</ng-map>
</body>
</html>
My Controller :
var app = angular.module('myApp', ['ngMap']);
app.controller('MyController', function(NgMap) {
var map;
var vm = this;
NgMap.getMap().then(function(evtMap) {
map = evtMap;
});
vm.latlng = [-6.584957, 106.804592];
vm.radius = 5000;
vm.getRadius = function(event) {
alert('this circle has radius ' + this.getRadius());
alert('Titik Tengah : ' + this.getCenter());
}
vm.setCenter = function(event) {
console.log('event', event);
map.setCenter(event.latLng);
}
vm.foo = function(event, arg1, arg2) {
alert('this is at '+ this.getPosition());
}
vm.dragStart = function(event) {
console.log("drag started");
}
vm.drag = function(event) {
console.log("dragging");
}
vm.dragEnd = function(event) {
console.log("drag ended");
}
});
Thank you
To determine whether a marker within a circle there is google.maps.geometry.spherical.computeDistanceBetween function from geometry library
Prerequisites
load geometry library, for example:
https://maps.google.com/maps/api/js?key=--YOUR KEY GOES HERE--&libraries=geometry
The example demonstrates how to determine whether a marker is within a area(circle) and renders it with different icon:
angular.module('mapApp', ['ngMap'])
.controller('mapController', function ($scope, NgMap) {
NgMap.getMap().then(function (map) {
$scope.map = map;
});
$scope.center = [59.339025, 18.065818];
$scope.radius = 500 * 1000; //in meters
$scope.locations = [
{ id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
{ id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
{ id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
{ id: 4, name: 'Berlin', pos: [52.521248, 13.399038], },
{ id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
];
let centerLatLng = new google.maps.LatLng($scope.center[0],$scope.center[1]);
$scope.locations.forEach((loc,i) => {
let pos = new google.maps.LatLng(loc.pos[0],loc.pos[1]);
if (google.maps.geometry.spherical.computeDistanceBetween(pos, centerLatLng) <= $scope.radius) {
loc.icon = {"url": "http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png"};
}
});
});
<script src="https://maps.google.com/maps/api/js?libraries=geometry"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="4" center="{{center}}">
<marker ng-repeat="l in locations" icon='{{l.icon}}' position="{{l.pos}}" title="{{l.name}}" id="{{l.id}}">
</marker>
<shape name="circle" stroke-color='#FF0000' stroke-weight="2" center="{{center}}" radius="{{radius}}" >
</shape>
</ng-map>
</div>
Related
I have a list of names from the model that are listed on the page when the page loads. When i click the name, the corresponding image from the model appears on the page. Is there a way within this to load an initial
image [0]when the page loads? This could be a random image or the first image in the model data set.
<!DOCTYPE html>
<html ng-app = "myApp"><head>
<meta charset="UTF-8">
<title>Cat Clicker</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel ="stylesheet" type "text/css" href ="clicker.css">
<script type = "text/javascript" src="Libs/angular.js"></script>
<script type = "text/javascript" src="js/CatClickerMe.js"></script>
<body>
<div ng-controller = "MainController as vm">
<div ng-repeat = "cat in vm.options.catList">
<h3 ng-click = "vm.selectCat(cat)">{{cat.name}}</h3>
</div>
<hr>
<h3>{{vm.selectedCat.name}}</h3>
<img ng-src ="{{vm.selectedCat.images}}">
</div>
</div>
</div>
</body>
</html>
JS
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCat=selectCat;
vm.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg'
}
],
};
function selectCat(pos) {
vm.selectedCat = pos;
};
});
Load first image by setting vm.selectedCat just below vm.options
vm.selectedCat = vm.options.catList[0];
Below is the jsfiddle link for your reference
jsfiddle : https://jsfiddle.net/Lpaudwf8/21/
Can you Try this :-
"use strict";
angular.module('myApp',[]);
angular.module('myApp').controller('MainController', function($scope) {
var vm = this;
vm.selectCat=selectCat;
vm.options = {
catList:[
{
name: 'Fluffy',
images: 'images/Fluffy.jpeg'
},
{
name: 'Blacky',
images: 'images/blacky.jpeg'
},
{
name: 'Tabby',
images: 'images/tabby.jpeg'
},
{
name: 'Cleo',
images: 'images/Cleo.jpeg'
}
],
};
function selectCat(pos) {
vm.selectedCat = pos;
};
function Init(){
vm.selectedCat = vm.options.catList[0];
}
Init();
});
I'm trying to display infowindow on clusters. My problem is that the infowindow is display far than the cluster and not on it.
This is how I have added the click event to the cluster:
$scope.markerCluster = new MarkerClusterer(map, markers);
google.maps.event.addListener($scope.markerCluster, 'clusterclick', function(cluster) {
$scope.map.showInfoWindow('bar', $scope.markerCluster);
console.log("cluster click");
});
To position info window over marker cluster setPosition function needs to be explicitly invoked, for example:
google.maps.event.addListener($scope.markerCluster, 'clusterclick', function (cluster) {
var infoWindow = $scope.map.infoWindows["myInfoWindow"]; //get infoWindow instance
infoWindow.setPosition(cluster.getCenter()); //<-set position
$scope.map.showInfoWindow('myInfoWindow', cluster);
});
Example
angular.module('mapApp', ['ngMap'])
.controller('mapController', function ($scope, NgMap) {
NgMap.getMap().then(function (map) {
$scope.map = map;
$scope.initMarkerClusterer();
});
$scope.cities = [
{ id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
{ id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
{ id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
{ id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
{ id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
];
$scope.initMarkerClusterer = function () {
var markers = $scope.cities.map(function (city) {
return $scope.createMarker(city);
});
var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' , zoomOnClick: false };
$scope.markerCluster = new MarkerClusterer($scope.map, markers, mcOptions);
google.maps.event.addListener($scope.markerCluster, 'clusterclick', function (cluster) {
//generate infoWindow content
var cities = cluster.getMarkers().map(function(m){
return m.title;
});
$scope.content = cities.join(",");
var infoWindow = $scope.map.infoWindows["myInfoWindow"]; //get infoWindow instance
infoWindow.setPosition(cluster.getCenter());
$scope.map.showInfoWindow('myInfoWindow', cluster);
});
};
$scope.createMarker = function (city) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(city.pos[0], city.pos[1]),
title: city.name
});
google.maps.event.addListener(marker, 'click', function () {
$scope.content = marker.title;
$scope.map.showInfoWindow('myInfoWindow', this);
});
return marker;
}
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/src/markerclusterer.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="3" center="59.339025, 18.065818">
<info-window id="myInfoWindow">
<div ng-non-bindable>
<h4>{{content}}</h4>
</div>
</info-window>
</ng-map>
</div>
Using markers in ng-map with angular JS
<ng-map zoom-to-include-markers="auto" default-style="false" class="myMap">
<marker ng-repeat="Customer in ListForDisplay" position="{{Customer.location.lat}},{{Customer.location.lng}}" icon="{{Customer.icon}}" clickedaddress="{{Customer.address}}" clickedextras="{{Customer.extrasString}}" data="{{Customer}}" on-click="markerSingleClick($event)" on-dblclick="markerDoubleClick($event)"></marker>
</ng-map>
I can access the string variables in the controller, but the object data still stays undefined in debugging sessions:
$scope.markerSingleClick = function (event) {
var clickedaddress = this.clickedaddress;
var clickedextras = this.clickedextras;
var data = this.data;
Is there a way to pass an entire object as part of the marker, rather than single string properties
To pass current object as a parameter via marker on-click event, replace
on-click="markerSingleClick($event)"
with
on-click="markerSingleClick({{Customer}})"
and then update markerSingleClick function:
$scope.markerSingleClick= function (event,customer) {
//...
};
Working example
angular.module('mapApp', ['ngMap'])
.controller('mapCtrl', function ($scope, NgMap) {
NgMap.getMap().then(function (map) {
$scope.map = map;
});
$scope.cities = [
{ id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
{ id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
{ id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
{ id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
{ id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
];
$scope.showInfo = function (event,city) {
alert(JSON.stringify(city));
//console.log(city);
};
});
<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key="></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCtrl">
<ng-map zoom="5" center="59.339025, 18.065818">
<marker ng-repeat="c in cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showInfo({{c}})">
</marker>
</ng-map>
</div>
Another option would be to pass object identifier as a parameter, for example its index:
<marker ng-repeat="c in cities" on-click="showInfo($index)" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}">
</marker>
Then current object could be determined like this:
$scope.showInfo = function (event,index) {
var currentCity = $scope.cities[index];
//console.log(currentCity);
};
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>
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");}
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/
Does anyone have an example of a working search box like the one the angular-google-maps-team is showing under 'search-box' on this site: https://angular-ui.github.io/angular-google-maps/#!/api
If you write something it sure does find it in a dropdown, but when you press enter, the map doesn't respond. - How can you make the map move to the correct location when you hit enter?
html:
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
<ui-gmap-search-box template="searchbox.template" events="searchbox.events" position="BOTTOM_RIGHT"></ui-gmap-search-box>
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-google-map>
js controller:
$scope.map = {
"center": {
"latitude": 52.47491894326404,
"longitude": -1.8684210293371217
},
"zoom": 15
}; //TODO: set location based on users current gps location
$scope.marker = {
id: 0,
coords: {
latitude: 52.47491894326404,
longitude: -1.8684210293371217
},
options: { draggable: true },
events: {
dragend: function (marker, eventName, args) {
$scope.marker.options = {
draggable: true,
labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude,
labelAnchor: "100 0",
labelClass: "marker-labels"
};
}
}
};
var events = {
places_changed: function (searchBox) {
var place = searchBox.getPlaces();
if (!place || place == 'undefined' || place.length == 0) {
console.log('no place data :(');
return;
}
$scope.map = {
"center": {
"latitude": place[0].geometry.location.lat(),
"longitude": place[0].geometry.location.lng()
},
"zoom": 18
};
$scope.marker = {
id: 0,
coords: {
latitude: place[0].geometry.location.lat(),
longitude: place[0].geometry.location.lng()
}
};
}
};
$scope.searchbox = { template: 'searchbox.tpl.html', events: events };
I suggest you look at examples sent to angular-google-maps github.
There's a piece of JavaScript lacking in 123Tax response which is found at https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/scripts/controllers/search-box.js
And this snippet is loaded in https://github.com/angular-ui/angular-google-maps/blob/master/example/search-box.html
// the following controls the map in your Controller
$scope.map = { control: {}, center: { latitude: 37.70, longitude: -122.344 }, zoom: 9, refresh: {}};
function placeToMarker(searchBox, id) {
var place = searchBox.getPlaces();
if (!place || place == 'undefined' || place.length == 0) {
return;
}
var marker = {
id: id,
place_id: place[0].place_id,
name: place[0].name,
address: place[0].formatted_address,
latitude: place[0].geometry.location.lat(),
longitude: place[0].geometry.location.lng(),
latlng: place[0].geometry.location.lat() + ',' + place[0].geometry.location.lng()
};
// push your markers into the $scope.map.markers array
if (!$scope.map.markers) {
$scope.map.markers = [];
}
// THIS IS THE KEY TO RECENTER/REFRESH THE MAP, to your question
$scope.map.control.refresh({latitude: marker.latitude, longitude: marker.longitude});
// the following defines the SearchBox on your Controller; events call placeToMarker function above
var searchBoxEvents = {
places_changed: function (searchBox) {
placeToMarker(searchBox, id);
}
};
// this is defined on the Controller, as well. This specifies which template searchBoxEvents should match to; note the parentdiv
$scope.searchBox = { template:'searchBox.template.html', events:searchBoxEvents, parentdiv: 'searchBoxParent'};
// in your HTML, declare where you want the searchBox. parentdiv: 'searchBoxParent' above looks for the id="searchBoxParent" in HTML
<div class="col-xs-12 col-md-12" id="searchBoxParent">
<script type="text/ng-template" id="searchBox.template.html">
<input type="text" ng-model="address" placeholder="Search Address" required />
</script>
</div>
//Lastly, in HTML, make sure you wrap ui-gmap-search-box & ui-gmap-markers in ui-gmap-google-map
<ui-gmap-google-map id="map-canvas" center="map.center" zoom="map.zoom" draggable="true" options="options" control="map.control">
<ui-gmap-search-box template="searchBox.template" events="searchBox.events" parentdiv="searchBox.parentdiv"></ui-gmap-search-box>
<ui-gmap-markers idkey="map.idkey" models="map.markers" coords="'self'" icon="'icon'" click="'onClicked'" fit="true"></ui-gmap-markers>
</ui-gmap-google-map>
Gavin's answer is correct,just some more details about the 'searchbox.tpl.html of his example.
It has to be placed outside of the directive like this:
<body>
<div id="searchBoxParent"></div>
<div id="map_canvas" ng-controller="mainCtrl">
<script type="text/ng-template" id="searchbox.tpl.html">
<input type="text" placeholder="Search Box">
</script>
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-search-box template="searchbox.template" events="searchbox.events" parentdiv="searchbox.parentdiv"></ui-gmap-search-box>
</ui-gmap-google-map>
</div>
<!--example-->
</body>
Working plunkr: http://embed.plnkr.co/1rpXQhcZqwJ7rv0tyK9P/ (for some reason the plunkr only worked in chrome for me but not in firefox)
I could not comment on Gavin's answer because of lack of repution, this is why I add the info as additional answer.