I am trying to use checkboxes in angular controller to show some places on google maps v3, but when I click the checkboxes, they are not working. It seems that the problem lies in onclick and performSearch function cannot be executed. I am new to angularjs, so I am not sure how to change the code in angular method. What should I do to make checkboxes effective? Any help is appreciated. Thanks in advance !
Here is what I want to achieve, but the code only works when not in angular controller.
Here is part of code I tried in angular controller.
var infowindow;
var service;
var transportMap;
var markersArray = [];
var options = ['train_station', 'bus_station', 'subway_station', 'transit_station', 'airport',
'grocery_or_supermarket', 'hospital', 'movie_theater', 'restaurant', 'shopping_center', 'park', 'night_club', 'pharmacy', 'police', 'embassy', 'shopping_mall'
];
$(document).ready(function() {
initializeTransportMap();
});
function getLetteredIcon (letter) {
return "http://ift.tt/JWeld1" + letter + ".png";
}
function initializeTransportMap() {
var transportLatLng = {
lat: $scope.result[1].data[0].Latitude,
lng: $scope.result[1].data[0].Longitude
};
transportMap = new google.maps.Map(document.getElementById('transportMap'), {
center: transportLatLng,
scrollwheel: false,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true,
disableDefaultUI: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
});
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(transportMap);
var defaultMarker = 'http://ift.tt/2am256n';
var marker = new google.maps.Marker({
position: transportLatLng,
map: transportMap,
icon: defaultMarker,
title: 'Hello World!'
});
google.maps.event.addListenerOnce(transportMap, 'bounds_changed', function() {
$scope.performSearch
});
for (var i = 0; i < options.length; i++) {
document.getElementById('options').innerHTML += '<input type="checkbox" id="' + options[i] + '" ng-click="performSearch()"> <img src=' + getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)) + ' height="20" /> ' + options[i] + '<br>';
}
}
$scope.performSearch = function() {
clearMaps();
var clickedOptions = [];
for (var i = 0; i < options.length; i++) {
if (document.getElementById(options[i]).checked) {
performTypeSearch(options[i], getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)));
}
}
}
$scope.performTypeSearch = function(type, icon) {
var request = {
// bounds: transportMap.getBounds(),
location: transportLatLng,
radius: 5000,
types: [type]
};
service.radarSearch(request, function(results, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(type + ":" + status);
return;
}
for (var i = 0, result; result = results[i]; i++) {
createMarker(result, icon);
}
});
}
$scope.createMarker = function(place, icon) {
var marker = new google.maps.Marker({
map: transportMap,
position: place.geometry.location,
icon: icon
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
service.getDetails(place, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
infoWindow.setContent(result.name);
infoWindow.open(transportMap, marker);
});
});
}
$scope.clearMaps = function() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
Aucun commentaire:
Enregistrer un commentaire