I am using protractor to test my angularjs application built with ng-map for google maps directive.
In the test, I could zoom in/out but clicking on +/- visible in the maps.
However, to pan the map, there are no controls in Google Maps Javascript API v3.
So I thought of sending a right arrow key event to the browser to simulate the panning towards East direction.
browser.actions().sendKeys(protractor.Key.ARROW_RIGHT).perform();
browser.sleep(5000); // To hold the browser to notice the change.
However, when I run it, I do not see any change in the view of the Map.
Solved this in the comments above -- I tried manually on our app which uses google maps, sending a right arrow should work after giving the map focus. So my suggestion is to try clicking on the map first before performing the right arrow.
var map = element(by.css('div.google-map'));
map.click(); // give the map focus
browser.actions().sendKeys(protractor.Key.ARROW_RIGHT).perform(); // move map
browser.sleep(5000); // To hold the browser to notice the change.
Related
I am trying to build a web application that has true multi touch capabilities. For example, I want to be able to drag a container around the screen while also zooming/panning on a google map at the same time. The problem that I am having is that if I am touching somewhere else on the page (not on the map) and then I touch on the map with another finger, the map acts as if both fingers were touching the map. This results in trying to pan on the google map with one finger turning into zooming in/out of the map because I am touching somewhere else on the page.
I am using Hammer.js for my other multi touch events on the page. I have tried putting an overlay over the top of the map and manually calling google maps api functions to move the map, which worked okay, but there are many features of the map that I will be missing if I use an overlay and manually pan and zoom.
I know that there is a list of all the different touch events that occur on the webpage, but I am not sure how to implement that list to solve this issue, if it is even possible.
EDIT: For more reference, you can recreate my problem by going to the google maps documentation. https://developers.google.com/maps/documentation/javascript/examples/map-simple
If you are on a touchscreen device, touch the map to start panning like normal, then touch some white-space on the page with another finger. If you remove your finger that was on the map, you can still control the position with the finger that is not even touching it.
Someone asked for code for reference, this is as close as I got to finding where the issue was. This prints out 'not correct' if I first touch in the map with one finger then off the map with another, but I am not sure where to go from there. Also, it does not print out if I touch outside of the map first, then in the map.
this.map.addListener('mousedown', function(e) {
if(e.va.target.className == 'company-header') {
console.log('not correct')
}
});
My current implementation is, when I open the html via browser it zooms to North America map with 4 markers. On click of the markers, the maps is zoomed to that location with few more markers added. Now I would like to add a back button so when the button is clicked it should take me to the initial maps page with 4 markers.
Your help is much appreciated.
Thanks,
Chitra
The features of Google Maps API that you will need to use are bounds. For a rough understanding, imagine providing a top left corner point and a bottom right corner point and just telling the viewport to zoom and track to fit them in. There is a good answer here: Google Map API v3 — set bounds and center
As for how you implement the actual button to trigger the feature, that is a separate question and there are many potential solutions. Again, it has already been discussed here: Put a button on top of a google map
I am using the following google map and everything looks perfect:
Google map
The only problem is that when a person zoom in to the street level and wants to zoom out he needs to have a mouse and use mouse wheel and if he does not have mouse working with this map is a pain.
So I need to put zooming bar for example at left side of my map like this:
Is it possible to do that and how can I do that?(I appreciate any help)
You need to add the control to your map, like this:
map.addControl(new GSmallZoomControl());
You can find more information about GMaps controls here: https://developers.google.com/maps/documentation/javascript/v2/controls
This quote is from the above mentioned documentation
GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.
Not sure if anyone is familiar with this leaflet map on the leaflet site found here:
http://leafletjs.com/examples/choropleth.html
It is a really cool map, just one thing. Is there a way to get the choropleth to disappear upon a certain zoom level? I know you can use map.getZoom() to detect zoom level. Essentially, I am trying to reset the styles that are invoked on page load within the function getColor(d).
Not sure how though. Any ideas?
Thanks in advance.
L.geoJson(statesData) returns an object with the method removeLayer. If you pass that object to a variable (let's just call it data) and call an anonymous function on zoomend you can capture the map's zoom level with map.getZoom(), you can match it to any arbitrary zoom level and then call data.removeLayer().
If you open up dev tools (aka your web inspector) in your browser and input the following line into your JavaScript console, you'll be able to see more methods and information that's fired whenever you zoom in and out of the map.
map.on('zoomend', function(e) { console.log(e); })
I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.