I am currently facing an issue with displaying a Google map for addresses in my Angular application. The problem seems to be related to the asynchronous nature of HTML and JS, but I am struggling to find a solution. The issue is that even though the map visually loads under the first customer address, it actually points to the last address in the list.
For example:
123 test drive
#Map gets inserted here, but is for 789 test drive
456 test drive
789 test drive
The directive code is as shown below:
app.directive('addressBasedGoogleMap', function() {
var linkFunction = function(scope, element, attrs) {
var googleAddress = scope.$eval(attrs.address);
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': googleAddress}, function (results, status){
if (status == google.maps.GeocoderStatus.OK) {
var mapOptions = { zoom: 16, center:results[0].geometry.location, mapTypeId:google.maps.MapTypeId.ROADMAP}
var map = new google.maps.Map(document.getElementById('addressMap'), mapOptions);
var marker1 = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: googleAddress
});
}
else{
alert(status)
}
})
};
return {
template : "<div id='addressMap' style='width: 500px; height:500px;'></div>",
link: linkFunction
};
});
This is how I have implemented it in my HTML code:
<tbody>
<tr ng-repeat-start = "customerOrder in CustomerOrders | orderBy: '-timeEntered'">
<td>{{customerOrder.timeEntered | date:'MM/dd/yyyy @ h:mma'}}</td>
<td>{{customerOrder.address}}</td>
</tr>
<tr ng-show="$first">
<td colspan="6" address-based-google-map address="'{{customer.address}}'"></td>
<tr ng-repeat-end></tr>
</tr>
</tbody>