[master] Documentation is unclear on how to set refresh

[ChickenFur]

In the master branch example it shows how if you have the map set to hidden you can get it to display properly when it is displayed using the attr: refresh="!isMapElementHidden"

I am using r1-dev and my map element is hidden until a button click. The google map only fills the top left corner of the div until I resize the window.

From the new example I was hoping I could do the following:

<div class="google-map span9"
             center="map.center"
             zoom="map.zoom"
             draggable="true"
             dragging="map.dragging"
             bounds="map.bounds"
             refresh="!map.isMapElementHidden">
</div>

but this doesn't work. How do I set it so it expands to fill the div on display?

[ChickenFur]

Another Question:

If I tie the refresh attribute to a value and then set it to true it now blanks the map out.

     <div class="google-map span9"
                 center="map.center"
                 zoom="map.zoom"
                 draggable="true"
                 dragging="map.dragging"
                 bounds="map.bounds"
                 refresh="refreshMap">
       </div>

    $scope.onClickShowMapButton = function(){
      $scope.refreshMap = true;
    }

In my controller I setup the map in the same way the example shows:

    angular.extend($scope, {
        map: {
            showTraffic: true,
            showBicycling: false,
            showWeather: false,
            center: {
                latitude: 45,
                longitude: 0
            },
            options: {
              streetViewControl: true,
              panControl: true
            },
            zoom: 3,
            dragging: false,
            bounds: {}
      }

But now when I click the show map button I get a blank square. Should I reset all the $scope.map variables?

[ChickenFur]

I would like to call the function talked about in this post: http://www.mail-archive.com/google-maps-api@googlegroups.com/msg59953.html

        map.checkResize()

But I am unsure as to where the map object is located.

Thanks!

[ChickenFur]

I see this might be a duplicate of this issue: #114

And the solution is to set the height on all the attributes? I will give it a try and see if that solves it.

[ChickenFur]

I have set the height attribute on all the elements and it still doesn't fill the div unless I resize the window.

[ChickenFur]

My hack to make this work for now was to assign the hidden _map to a global window variable and when the map is shown call:

google.maps.event.trigger(window.themap, "resize");

I tried changing the watch on the refresh option to add in the line but it didn't seem to be working.

[nmccready]

whoa let me catch up :)

[nmccready]

@ChickenFur without using the hack you should be able to attach to any map event in the controller.
In the example

 events: {
                click: function (mapModel, eventName, originalEventArgs) {
                    // 'this' is the directive's scope
                    $log.log("user defined event: " + eventName, mapModel, originalEventArgs);

                    var e = originalEventArgs[0];

                    if (!$scope.map.clickedMarker) {
                        $scope.map.clickedMarker = {
                            title: 'You clicked here',
                            latitude: e.latLng.lat(),
                            longitude: e.latLng.lng()
                        };
                    }
                    else {
                        $scope.map.clickedMarker.latitude = e.latLng.lat();
                        $scope.map.clickedMarker.longitude = e.latLng.lng();
                    }

                    $scope.$apply();
                }

mapModel is the map itself, so there is a cleaner hook to the map. Therefore you do not need a global variable and it is only used in the controller's scope.

[nmccready]

That events hook come from map.js at

   if (angular.isDefined(scope.events) &&
                    scope.events !== null &&
                    angular.isObject(scope.events)) {

                    var getEventHandler = function (eventName) {
                        return function () {
                            scope.events[eventName].apply(scope, [_m, eventName, arguments ]);
                        };
                    };

                    for (var eventName in scope.events) {

                        if (scope.events.hasOwnProperty(eventName) && angular.isFunction(scope.events[eventName])) {
                            google.maps.event.addListener(_m, eventName, getEventHandler(eventName));
                        }
                    }
                }

[nmccready]

This might be related to the other issue where the maps size has to be statically defined in css or html as well. So the trigger resize actually may be a clue into fixing this issue. Thanks.

[nlaplante]

The refresh attribute will be properly documented when gh-pages-new2 becomes the official website for this lib

[ChickenFur]

@nmccready - Thanks for the feedback.

I am new to angular as well so I am figuring things out as I go and I appreciate your patience and spelling things out for me.

So if I wanted to fire the

google.maps.event.trigger(window.themap, "resize");  

When the map is displayed. What type of event would I tie that into? It isn't a click event as shown in your example.

Looking at the docs https://developers.google.com/maps/documentation/javascript/events#MarkerEvents
It looks like there is a load event

google.maps.event.addDomListener(window, 'load', initialize);

But I am unsure how I would hook that up in the angular way.

This is an great library and I really appreciate your help.

[tomoyuki28jp]

@ChickenFur I had the same issue. I've solved it by wrapping the map by <div ng-if="showMap">...</div>.
#76

[sp90]

it could be the old issue that if you have max-width on your element the map breaks - for more follow the link
https://www.google.dk/search?q=google+maps+maxwidth&oq=max-width+googlem&aqs=chrome.1.69i57j0l5.3991j0j7&sourceid=chrome&espv=210&es_sm=91&ie=UTF-8#q=google+maps+max+width&spell=1

[xcambar]

@tomoyuki28jp Your ng-if trick saved me. Thanks a lot.

Yet I think it's because I didn't know/follow Angular best practices.

[StudentJoeyJMStudios]

I am having this issue, ng-if surrounding the map directive didn't fix my issue, any ideas?
here is my .js code

$scope.map =
{
center:
{
latitude: 6, longitude: 6
},
zoom: 8
};
$scope.lostPetCoordinates =
{
point:
{
latitude: 6,
longitude:6
}
};
$scope.viewOnMap = function(lastKnowLocation)
{
var geocoder;
$scope.showMap = true;

    geocoder = new google.maps.Geocoder();

    geocoder.geocode({ 'address': lastKnowLocation },
        function (results, status)
        {
            if (status == google.maps.GeocoderStatus.OK)
            {
                $scope.map.center.latitude = results[0].geometry.location.B;
                $scope.map.center.longitude = results[0].geometry.location.k;

                $scope.lostPetCoordinates.point.latitude = results[0].geometry.location.B;
                $scope.lostPetCoordinates.point.longitude = results[0].geometry.location.k;

            }
        }
    );
};

----------------------- here is my html code

when i put this code in loading html file it works but when I try to load the map from directive I get this issue.

[gitnik]

Open a plunker

[StudentJoeyJMStudios]

Too much other configuration for a plunker. I can provide github link to project:

https://github.com/StudentJoeyJMStudios/PetPinterest.git

[StudentJoeyJMStudios]

If you do pull and want to get to the issue I am having you can sign into project with username: helpMeThankYou
password: 12345678

[StudentJoeyJMStudios]

Once you log in if you do then there are lost posts at the bottom of the page if you click on the button with the address or the image it should bring up the map content. The map code is in the viewPostModal.html file.

[cthrax]

@StudentJoeyJMStudios you have to understand that most times, by taking the effort to boil the issue down to a plnkr, the real issue is resolved and even if it's not, we're (the folks you're asking help from) able to isolate the issue much more quickly. There are 7 of us (with wonderful sporadic help from others, which is always welcome) that donate our time to this project and we do our best to help everyone, but there are upwards of 10,000 users of this library and 7 people only go so far divided that many ways.

So, while we'll do our best to help you, we do need effort on your part to reduce the time we spend helping you. I'm sure you have your own deadlines, but creating a plnkr goes a long way towards us being able to actually help you in your problem.

[StudentJoeyJMStudios]

I am trying to boil it down to just a plunker but there are a lot of directives, modules and dependencies that I can't filter through right now. I understand it would be easier to isolate the issue. Unless I am way over thinking it I don't have the time to make the plunker for that I am sorry and I understand. Thank you anyhow. I will try and make a plunker throughout the day wish me luck.

[cthrax]

Good luck! Thanks for the effort and I hope the endeavor allows you to rubber duck the problem!

[jjbskir]

I see this issue was resolved awhile ago, but in case any one had the same issue as @StudentJoeyJMStudios it is b/c the $scope was updated outside of the Angular context and in the google call back function. Same issue as here - http://stackoverflow.com/questions/27995864/scope-is-not-accessible-from-callback-function-after-following-google-docs - Within the call back function $scope.$apply(); needs to get called.

[spieIbug]

I've fixed this problem with a minimum manipulation, as i've seen in your messages. The map get refreshed when resize is triggered. So i've done it with gmap api's. Here is a plunker demo
http://plnkr.co/edit/jOydFAdVlNuPKO1qjSY7?p=preview

[nmccready]

@meyacine thank you. If you want to copy this and PR it to the examples directory I will surely accept it. Thanks again.

[hillaryskye]

Is there a way to refresh without the ng-click on a redirect in an a tag?

[nmccready]

Use $timeout which is triggered when your ng-show, or whatever the trigger bound property changes.

[hillaryskye]

My issue is that I am using Google maps without the UI Angular, just pure Angular and Google Maps and when I redirect to a new page, the Google Maps doesn't appear unless I refresh the page. I'm not sure what I need to put $timeout on. I have an init function upon loading on the page, should I put it there? Thanks, Hillary

[svkmedia]

I fix this problem with CSS visibility.
My map is in modal but modal has display: block and visibility: hidden.
When you click button to open modal just set visibility: visible