CODEWITHSUNDEEP
javascriptangularjsgoogle-mapsgoogle-maps-api-3angular-ui
mautrok
mautrok

Reputation: 961

google map geocode and setCenter

i have this strange phenomenon but first 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 seems to be ok, marker, zoom, drag, the only things that doesn't go well is the map.setCenter, the map always sets his center in the ll coordinates, can anyone help me?

here you can find a fiddle http://jsfiddle.net/eb8Fd/1/ and as you can see the center isn't in California, instead is in Iraq, and if you zoom rapidly it seems there are two maps.

Upvotes: 1

Views: 2010

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117354

You have 2 google.maps.Map-instances there(1 created via ui.map and another created in MapCtrl).

Remove the creation of the 2nd instance and use this code:

//Markers should be added after map is loaded
    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);
            $scope.myMap.setCenter(results[0].geometry.location);
            test=results[0].geometry.location;
            var marker=new google.maps.Marker({
              map: $scope.myMap,
              position: results[0].geometry.location
        });
        }else{
            alert(status);
        }   
    });

http://jsfiddle.net/doktormolle/eb8Fd/6/

Upvotes: 3

Related Questions