I have created an Ionic 2 / Angular 2 App. I have integrated Google Maps and it works fine. However the second time the Google Maps appears completely gray. I have searched the internet and tried different solutions to solve it. However, none of the solutions below work:
- google.maps.event.trigger(this.map, 'resize');
- google.maps.event.clearInstanceListeners / this.map.detach(); / this.marker.setMap(null);
When I resize the view in chrome then the maps which appeared in gray is suddenly shown. So how can I trigger this resize manually. I hope you can help.
My code can be found here https://github.com/marinusgeuze/metjekindnaarbuiten.
Best regards,
Marinus Geuze
===========================================
Issue is solved by adding next line of code:
setTimeout(() => google.maps.event.trigger(this.map, 'resize'), 600);
I didn't have exactly the same issue, but something similar happen when using LeafletJS in my Ionic 2 app, and a call to their invalidateSize function on a small timeout fixed the issue for my app. Here's an example:
ionViewLoaded() {
console.log('ObservationDetails.ionViewLoaded');
// Leaflet setup calls here
...
// invalidateSize must be called because the page hasn't been drawn, only loaded,
// and the map div will get resized causing the "gray block/unloaded map tile"
// problem. Invalidating the map will fix that, but the call needs a slight
// delay before firing...
setTimeout(() => this.map.invalidateSize(), 600);
}
Solution for map, Use Below code of line to resolve the issue :
// you must use "map" variable name, or you can use your defined variable name
// Example : var map = (new google.maps.Map(...));
setTimeout(function() { google.maps.event.trigger(map, 'resize') }, 600);
Related
I'm trying to draw polygon on my map using ngmap. The map is displayed correctly as this example is showing, but when I finish the draw, this is what I'm getting:
ng-map.min.js:25 Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined
I used the same code of the example.
My questions:
1- How can I solve this error?
2- If I want to let the user draw only polygon form, I have tried to set the value of drawingMode to "polygon" but I'm always having the other draw options (circle...). How can let only the polygon draw?
3- How can I let the user clear the drawn polygon?
4- Is it possible to detect the action of putting (drawing) every points. I mean that to draw a line in the polygon for example I need at least two points. Can I detect when the user draw the first point then the second and get its coordinates?
Edit
This is the whole error that I see when I include ng-map.js instead of ng-map.min.js :
Uncaught TypeError: Cannot read property 'onMapOverlayCompleted' of undefined
at index (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2690:44)
at Array.reduce (native)
at Uw.<anonymous> (http://localhost:8080/bower_components/ngmap/build/scripts/ng-map.js:2691:39)
at P4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
at P4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
at C4._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
at C4.<anonymous> (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:37:81)
at Object._.z.trigger (https://maps.google.com/maps/api/js?key=MY_API_KEY&libraries=placeses,visualization,drawing,geometry,places:99:121)
at F4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:7:70)
at G4 (https://maps.google.com/maps-api-v3/api/js/28/14/drawing_impl.js:4:249)
Edit 2
I solved the first question:
My problem was that I'm using routes in the app.js. So the html and the controller are linked in it. To solve the problem, I put $scope.onMapOverlayCompleted instead of
var vm = this;
vm.onMapOverlayCompleted because I don't write the the ng-controller="DrawingManagerCtrl as vm" in my HTML. Then in the HTML I put on-overlaycomplete="onMapOverlayCompleted()" and it works.
I solved also the second question by using:
drawing-control-options="{position: 'TOP_CENTER',drawingModes:['polygon']}"
I'm want now to solve the other problems.
Any help please?
3
As the example you referenced shows, the overlaycomplete callback function receives e (Event) as the first parameter. This OverlayCompleteEvent object contains reference to the drawn overlay at Event.overlay (see docs of the original Google Maps JS API more info, since ng-map is only wrapper of the original API after all, specifically "OverlayCompleteEvent object specification" section).
Using that you can get the reference to the created overlay, store it and then later call .setMap(null) on it to delete it from map. E.g:
$scope.myDrawnOverlays = []; //array where you store drawn overlays
$scope.onMapOverlayCompleted(e){
...
myDrawnOverlays.push(e.overlay); //store reference to the drawn overlay after it's drawn
}
$scope.deleteAllDrawnOverlays(){
for(var i = 0; i < myDrawnOverlays.length; i++){
myDrawnOverlays[i].setMap(null); //remove overlays from map one by one
}
myDrawnOverlays = [];
}
Then whenever you want to delete all overlays, just call the function $scope.deleteAllDrawnOverlays (you can tie it to some button using ng-click or do whatever you want with it).
4
This is NOT possible using google.maps.drawing.DrawingManager which is used in your example. The reason is that DrawingManager doesn't support events for clicking at the map while drawing (see docs again for possible events, section "DrawingManager class").
So except hacky workarounds which could break any time with new api release, the only possible solution is to implement drawing of polygon yourself and not use DrawingManager. Check for example this SO answer, specifically the referenced example (right-clicks on map). They don't use ng-map, but basically what would you have to do is to add on-click="mapClickHandler" to your ng-map, in the mapClickHandler get position where you clicked on map, draw Marker there which would look like a dot and if you have more dots connect them with lines.
This is however too much for one question, you would have to probably read up on ng-map and relevant sections of Google Maps Js Api yourself.
This one is getting tricky for me.I have the google map in my page which is working properly ,above it lies a canvas. I need to make the google map clickable .i.e when i click on the canvas ,the map should behave normally .I have added pointer-events:none;attribute.It works properly in Firefox ,chrome and IE11.
However my requirement is I need to make it clickable in IE9 on wards,which am unable to replicate. How to do that?
If any one can replicate the behavior in a fiddle ,that will be really helpful to me.
There's an old jQuery hack that simulates pointer-events:
Listen for a click event on the canvas and in the click handler:
Hide the canvas: $(this).hide();
Ask the document to get the element at the clicked xy: var $map=$(document.elementFromPoint(event.clientX,event.clientY); (Adjust clientX/Y by any offset to the map/canvas elements) If the map is the only element under your canvas, you could define $map at the start of your app and avoid this step.
trigger the same event on the google map: $map.trigger(event);
redisplay the canvas: $(this).show();
I'am trying to display multiple image in a single infowindows. there is 3 image. i just want to make a slider work in info window google maps. but may be i lost the main idea. i try to use some of jquery slider and javascript slider, but still not work, the image not display and in other case is only work for the first click infowindows.
i think some missing, can somebody help me to the right direction of this case. i try to search an example, but the result is still nothing.
many thanks.
You're missing the event name you should be listening for in the addListener call where you initiate the slider:
google.maps.event.addListener(infowindow, function(){ /*..initiate anythingslider..*/ });
It should listen for the content_changed event on the infoWindow, so it should look like:
google.maps.event.addListener(infowindow, 'content_changed', function(){ /*..initiate anythingslider..*/ });
I have events working fine in Chrome and IE10 for Google Maps (APIv3) and RichMarkers. Problem is, the same code borks on Firefox19 with event undefined. So, this code works on Chrome and IE10...
google.maps.event.addListener( marker, 'mouseover', function(event) {
console.log(event);
});
But not on Firefox. Interestingly, attaching a CLICK event to the map object does work as you'd expect. The event object is visible within the called function in all browsers. So, does anyone have any idea as to how to fix this? I really need to pass the event object onwards as I have funcs that use it for positioning and so on.
Normally, I'd get around this using jQuery to attach the events, but this is not an option here.
Cheers
CT
There is no mouseover-event : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
Apply the mouseover-event to the content of the marker(the content must be a node)
I am having problems with centering the map using the panTo() method - as well as making the directions (from/to) to work like tabs.
Here is my code:
http://dpaste.com/76251/
I'm not too sure what you want the map to do, but there is one big problem with your panTo() function. You placed it inside of the function markerClickHandler() which is called when the markers are created, which happens on page load. So you are calling panTo() three times when the page is loaded.
If you want it to be called when the marker is clicked, place it in the function which is returned by markerClickHandler().
Keep in mind, however, that the movement will likely be interrupted by the opening of the Info Window (which moves the map). The best solution I can think of to that problem is to move the map after the window has opened. You can pass onOpenFn as a GInfoWindowOptions parameter:
map.openInfoWindowTabsHtml(marker.getLatLng(), tabs, {
onOpenFn: function() {
map.panTo(marker.getLatLng());
}
});
Note: for some reason, this only worked if I called openInfoWindowTabsHtml() on the map object instead of the marker - I don't know why.
The example snippet you're linking to is no longer available, but assuming from the answer by Chris, I'm assuming you want to center the marker whose info window was opened. I had the same problem and solved it like this:
GEvent.addListener(marker, 'infowindowopen', function() {
map.panTo(marker.getLatLng());
});