I am trying to display multiple markers on a map using ui-google-maps library for angular but it is showing only one marker.
<div id="map_canvas" ng-controller="mainCtrl">
<h1 align="center">Maps</h1>
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-markers models="rmarkers" coords="'self'" fit='true' icon="'icon'">
</ui-map-markers>
</ui-gmap-google-map>
</div>
<script>
angular.module('main', ['google-maps'.ns()])
.controller('mainCtrl', function($scope,$http) {
$scope.map = {center: {latitude: 42.3349940452867, longitude: -71.0353168884369 }, zoom: 14 };
//$scope.marker={id: 1, coords: {latitude: 42.3349940452867, longitude: -71.0353168884369 }};
$scope.options = {scrollwheel: false};
$scope.rmarkers=[{id: 101, latitude: 42.3349940452867, longitude: -71.0353168884369},
{id: 102,latitide: 42.35114190333,longitude: -71.0662789402048},
{id: 103,latitide: 43.35114190333,longitude: -72.0662789402048},
{id: 104,latitide: 44.35114190333,longitude: -73.0662789402048}];});
if by 'ui-google-maps library for angular' you mean
https://github.com/angular-ui/angular-google-maps
then this shows multiple markers on a map, adapting dome of your code to show running in a fiddle
http://jsfiddle.net/nigeljvm/duabubeo/9/
html layer
<div ng-app="main" ng-controller="mainCtrl">
<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
<ui-gmap-marker ng-repeat="m in map.markersr"
coords="m" icon="m.icon" idkey="m.id">
</ui-gmap-marker>
</ui-gmap-google-map>
</div>
javascript layer
angular.module('main', ['uiGmapgoogle-maps'])
.controller('mainCtrl', function ($scope) {
angular.extend($scope, {
map: {
center: {
latitude: 42.3349940452867,
longitude:-71.0353168884369
},
zoom: 11,
markersr: [
{
id: 101,
latitude: 42.3349940452867,
longitude:-71.0363168884369
},
{
id: 102,
latitude: 42.3563941755867,
longitude:-71.0466168884469
}, {
id: 103,
latitude: 42.3753940755867,
longitude:-71.0853168884369
}, {
id: 104,
latitude: 42.3684940856867,
longitude:-71.1273168884369
}],
dynamicMarkers: []
}
});
});
css .angular-google-map-container { height: 400px; }
based on the angular-ui source
https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/scripts/controllers/issue-74-markers-events.js
You have a typo. Replace "Latitide" with "latitude"
Related
<script>
var app = angular.module("myApp", ['ngRoute']);
app.controller("myCtrl", function($scope) {
$scope.srch = [{
name: "Rani",
phno:"145365463"
},
{
name: "Raj",
phno:"989365463"
},
{
name: "Sai",
phno:"782144635"
},
{
name: "roja",
phno:"5365463889"
},
{
name: "Priya",
phno:"321565463"
}
]
</script>
<html>
<head>
<title>Sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<div>
<input type="text" ng-model="search" placeholder="Search for name or email" style="width:200px;"></input>
<table class="table table-striped" ng-show="search">
<tr ng-repeat="y in srch | filter: search">
<td>{{y.name}}</td>
<td>{{y.phno}}</td>
</tr>
</table>
</div>
</body>
</html>
First point, input tag has no end tag.
Then, your AngularJS script is false. Controller code is never closed.
var app = angular.module("myApp", ['ngRoute']);
app.controller("myCtrl", function($scope) {
$scope.srch = [{
name: "Rani",
phno:"145365463"
},
{
name: "Raj",
phno:"989365463"
},
{
name: "Sai",
phno:"782144635"
},
{
name: "roja",
phno:"5365463889"
},
{
name: "Priya",
phno:"321565463"
}
];
}); // Don't forget to close
Avoid declaring ngApp and ngController on same element.
See this Plunkr working: https://plnkr.co/edit/n1lJ4uSdM5Nc7xZxM7XB?p=preview
You have to type some chars to make your list appear. What I can recommend to you is to filter your ngRepeat with a function instead of variable.
im working on a google map thing where i need to access the setZoom method when clicking on a custom button. The problem is that setZoom() gets undefined. I have loaded all dependencies(the map renders and my $scope.zoom runs). I have tested that. Anyone knows how to do?
html:
<div ng-app="app" ng-controller="MapController">
<ui-gmap-google-map center="map.center" zoom="map.zoom">
<ui-gmap-map-control template="../pages/partials/map-controls.html" controller="MapController" position="RIGHT_BOTTOM">
</ui-gmap-map-control>
</ui-gmap-google-map>
</div>
js:
$scope.map = {
center: {
latitude: 67.855800,
longitude: 20.225282
},
zoom: 13,
options: {
scrollwheel: false,
disableDefaultUI: true,
streetViewControl: false,
backgroundColor: '#f2f2f2'
}
};
$scope.zoom = function($event) {
$event.preventDefault();
//the problem is here. $scope.map.setZoom() gets undefined.
$scope.map.setZoom(9);
};
I think you want to call
$scope.map.control.getGMap().setZoom(9);
instead of
$scope.map.setZoom(9);
See the example controller for more info - https://github.com/angular-ui/angular-google-maps/blob/cbd17a3a225dfe543faa124eb295e66db566f27c/example/assets/scripts/controllers/example.js
--- updating example
html:
<div ng-app="app" ng-controller="MapController">
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
options="map.options"
control="map.control>
<ui-gmap-map-control
template="../pages/partials/map-controls.html"
controller="MapController"
position="RIGHT_BOTTOM">
</ui-gmap-map-control>
</ui-gmap-google-map>
</div>
js:
scope.map = {
center: {
latitude: 67.855800,
longitude: 20.225282
},
control: {},
zoom: 13,
options: {
scrollwheel: false,
disableDefaultUI: true,
streetViewControl: false,
backgroundColor: '#f2f2f2'
}
};
$scope.zoom = function($event) {
$event.preventDefault();
//the problem is here. $scope.map.setZoom() gets undefined.
$scope.map.setZoom(9);
};
--- adding example
angular
.module('app', ['uiGmapgoogle-maps'])
.controller('MapController', mapController)
mapController.$inject = ['$scope', 'uiGmapIsReady'];
function mapController($scope, uiGmapIsReady) {
$scope.map = {
center: {
latitude: 67.855800,
longitude: 20.225282
},
control: {},
zoom: 13,
options: {
scrollwheel: false,
disableDefaultUI: true,
streetViewControl: false,
backgroundColor: '#f2f2f2'
}
};
$scope.zoom = function($event) {
$scope.map.control.getGMap().setZoom(9);
};
uiGmapIsReady
.promise()
.then(function (maps) {
// ready to manip map
});
};
html, body, #map_canvas {
height: 200px;
width: 200px;
margin: 0px;
}
#map_canvas {
position: relative;
}
.angular-google-map-container {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
}
<!DOCTYPE html>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<script type='text/javascript' src='script.js'></script>
<div ng-app='app' id='map_canvas' ng-controller='MapController'>
<button ng-click='zoom()'>Set Zoom</button>
<ui-gmap-google-map
center="map.center"
zoom="map.zoom"
control="map.control">
</ui-gmap-google-map>
</div>
I have this code for showing a info-window in google maps . The problem is that it always shows the same data in the info window. For the markers it is no problem to use the $scope.result array.
<div id="allesMap">
<ng-map zoom="9" center="[51.2132822,4.4304089]" >
<marker ng-repeat-start="x in result" position="{{x.point_lat}},{{x.point_lng}}" icon="images/wifi.png" on-click="showInfoWindow('myInfoWindow')">
<info-window id="myInfoWindow">
<div class="infoWindowTekst"> gemeente: {{x.gemeente}}<br>
straat: {{x.straat}} {{x.huisnr}} <br>
</div>
</info-window>
</marker>
<marker ng-repeat-end ></marker>
</ng-map>
</div>
From performance perspective it always a better option to create a single instance of info window and display information depending on the selected marker. The following example demonstrates how to accomplish it:
angular.module('mapApp', ['ngMap'])
.controller('mapController', 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.showCity = function(event, city) {
$scope.selectedCity = city;
$scope.map.showInfoWindow('myInfoWindow', this);
};
});
<script src="https://maps.google.com/maps/api/js"></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="5" center="59.339025, 18.065818">
<info-window id="myInfoWindow">
<div ng-non-bindable>
<h4>{{selectedCity.name}}</h4>
</div>
</info-window>
<marker ng-repeat="c in cities"
position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)">
</marker>
</ng-map>
</div>
JSFiddle
so if I loop my markers with info-window, info-window show all info about all markers,no separately.I tried also use filter and filtered loop in info-window but not worked..
And sorry for my english i am not a native speaker..
info-window and marker image how look like my problem
my code here
<div class="googleMaps">
<ng-map id="map" style="height: 224px" zoom="14" center="currentLocation()" ng-init="currentLocation()">
<marker animation="DROP"
position="currentLocation()"
icon="../img/tagGoogle.png" >
</marker>
<marker animation="DROP"
ng-repeat="results in xResult"
value="{{results.name}}"
position="{{results.lat +','+ results.lng}}"
on-click="showInfoWindow(1)">
</marker>
<info-window id="1">
<div ng-non-bindable="">
<div ng-repeat="results in xResult">
<div>
shop id:{{ results.id }} name:{{results.name}}<br>
</div>
</div>
</div>
</info-window>
</ng-map>
</div>
If I understood you properly, you would like to display info window with information that corresponds to the clicked marker. If so, the following example demonstrates how to accomplish it:
angular.module('mapApp', ['ngMap'])
.controller('mapController', 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.showCity = function(event, city) {
$scope.selectedCity = city;
$scope.map.showInfoWindow('myInfoWindow', this);
};
});
<script src="https://maps.google.com/maps/api/js"></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>
<script src="app.js"></script>
<div ng-app="mapApp" ng-controller="mapController">
<ng-map default-style="true" zoom="5" center="59.339025, 18.065818">
<info-window id="myInfoWindow">
<div ng-non-bindable>
<h4>{{selectedCity.name}}</h4>
</div>
</info-window>
<marker ng-repeat="c in cities"
position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showCity(event, c)">
</marker>
</ng-map>
</div>
Thx for answer...I already fix it too..
So my solution..
<div class="googleMaps">
<div id="map" ng-init="currentLocation()"></div>
</div>
<form id="coffeForm" ng-submit="submitForm()">
<div class="textField" ng-repeat="marker in markers | orderBy : 'title'" ng-class="{ 'selected-class-name': $index == selectedIndex }"
ng-click="itemClicked($index)">
<div flex id="class" class="text-center">
<label flex href="#" class="text-center" ng-click="openInfoWindow($event, marker)">{{marker.title}}
<input flex id="Id" type="radio" name="Id" ng-model="form.Id" value="{{marker.id}}" /></label>
</div>
</div>
<a class="coffGoBtn text-center" href="#/orderCoffe" ng-click="submitForm()">Pokracuj</a>
</form>
$scope.currentLocation = function() {
var options = {
enableHighAccuracy: true
};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (pos) {
$scope.position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
$scope.Lat = pos.coords.latitude;
$scope.Long = pos.coords.longitude;
var postData = $.param({
arr1: JSON.stringify({
latit: $scope.Lat
}),
arr2: JSON.stringify({
longit: $scope.Long
})
});
console.log(postData);
$http({
method: 'POST',
url: 'range.php',
data: postData,
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
dataType: JSON
}).success(function (res) {
$scope.xResult = [];
$scope.xResult = res;
var setPosition = $scope.position;
var mapOptions = {
zoom: 15,
center: $scope.position,
disableDefaultUI:true,
//scrollwheel: false,
//navigationControl: false,
//mapTypeControl: false,
//scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
icon: ourMarker
};
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
var ourMarker = new google.maps.Marker({
position: setPosition,
map: $scope.map,
title: 'its me',
icon: 'img/tagGoogle.png'
});
ourMarker.setMap($scope.map);
$scope.markers = [];
$scope.logos= [];
$scope.names =[];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function(info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.lng),
title: info.name,
logo: info.img,
id: info.id,
icon: "img/Place.png"
});
marker.content = '<div class="infoWindowContent">' + info.name + ", " +"<br>"+ "vzdialenost: " + info.distance * 1000 + "m" +'</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h6>' + marker.title + '</h6>' + marker.content);
infoWindow.open($scope.map, marker);
$log.info(infoWindow);
});
$scope.markers.push(marker);
};
for (var i = 0; i < res.length; i++){
createMarker(res[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
google.maps.event.trigger(selectedMarker, 'click');
};
}).error(function (error) {
console.log(error);
});
},
function (error) {
alert('Unable to get location: ' + error.message);
}, options);
}
else {
alert("Please reload page or click on the Set Position button or your browser does not support geolocation services.");
}
in one of my client project I'm using ngMap (http://ngmap.github.io/), but I have problem with this "directive": how to user marker cluster and a map like this:
<div ng-controller="MyCtrl">
<map center="41,-87" zoom="3">
<info-window id="foo2">
<div ng-non-bindable="">
Lat/Lng: {{this.getPosition()}}<br/>
<ul>
<li ng-repeat='item in store.items'>{{item}}</li>
</ul>
</div>
</info-window>
<marker ng-repeat="(id, store) in stores" id="{{id}}"
position="{{store.position}}"
on-click="showStore(event, id)"
></marker>
</map>
</div>
I have searched in the example pages and codes, but there is no documentation about how to use marker cluster in my situation.
Does someone use this ngmap ? Or do I need to change google map angularjs directive ?
Thanks.
MarkerClusterer is a separate library for the Google Maps JavaScript API v3, here is a working example that demonstrates how to utilize MarkerClusterer with ng-map:
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.createMarkerForCity(city);
});
var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' };
return new MarkerClusterer($scope.map, markers, mcOptions);
};
$scope.createMarkerForCity = 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.selectedCity = city;
$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>{{selectedCity.name}}</h4>
</div>
</info-window>
</ng-map>
</div>