I am currently developing a project using AngularJs, where I am displaying information on a Google Maps interface. You can check out my example on this plunker link.
My goal is to retrieve the 'city' and 'desc' fields by clicking on the map markers.
Here is a snippet of the controller code:
var cities = [{
city: 'mourouj5',
desc: 'This is the best city in the world!'
}, {
city: 'New York',
desc: 'This city is aiiiiite!'
}, {
city: 'tokyo',
desc: 'This is the second best city in the world!'
}, {
city: 'Paris',
desc: 'This city is live!'
}, {
city: 'barcelone',
desc: 'Sin City...\'nuff said!',
}];
angular.module('mapsApp', [])
.controller('MapCtrl', function($scope) {
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: new google.maps.LatLng(40.0000, -98.0000),
zoom: 2
});
var createMarker = function(info) {
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': info.city
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: info.city
});
marker.content = '<div class="infoWindowContent">' + info.desc + '</div>';
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
});
}
for (var i = 0; i < cities.length; i++) {
createMarker(cities[i]);
}
});