I've encountered this strange phenomenon, but first let's take a look at the code:
HTML
<div ng-app='maptesting'>
<div ng-controller="MapCtrl">
<div id="map_canvas" ui-map="myMap"
style="height:300px;width:400px;border:2px solid #777777;margin:3px;
border:1px solid"
ui-options="mapOptions"
ui-event="{'map-idle' : 'onMapIdle()'}"
>
</div>
JavaScript
angular.module('maptesting', ['ui.map','ui.event']);
function MapCtrl($scope) {
var ll = new google.maps.LatLng(30.9000, 40.2740);
$scope.mapOptions = {
center: ll,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var geocoder= new google.maps.Geocoder();
var map = new window.google.maps.Map(document.getElementById("map_canvas"),
$scope.mapOptions);
var address='los angeles';
geocoder.geocode({'address':address},function(results,status){
if (status == google.maps.GeocoderStatus.OK){
alert(address);
alert(results[0].geometry.location);
alert($scope.myMap);
map.setCenter(results[0].geometry.location);
test=results[0].geometry.location;
var marker=new google.maps.Marker({
map: map,
position: results[0].geometry.location
}else{
alert(status);
}
});
$scope.onMapIdle = function() {
if ($scope.myMarkers === undefined){
var marker = new google.maps.Marker({
map: $scope.myMap,
position: ll
});
$scope.myMarkers = [marker, ];
}
};
$scope.markerClicked = function(m) {
window.alert("clicked");
};
}
Everything appears to be functioning correctly - markers, zoom, drag - except for the map.setCenter which always defaults to the coordinates of ll. Can anyone offer some guidance?
You can view a fiddle here. As you'll notice, the center is not in California as expected, but rather in Iraq. Additionally, if you zoom quickly, it seems like there are two maps overlapping.