I have a google map on a page. User's can click on this map and it will drop a marker at that point. How can I simulate this in Capybara? It doesn't matter where they click as long as it's somewhere on the map.
I think you can use ActionBuilder if you use Selenium driver. It will be something like:
within_frame(locator_of_frame_with_map) do
map = find(locator_of_map).native
page.driver.browser.action.move_to(map, x, y).click.perform
end
Code above is a draft. Obviously I can't provide working code without a demo.
Capybara itself doesn't have a cross-driver API for clicking at specific coordinates.
with webkit driver in Capybara, I've used this:
javascript_to_trigger_click = <<-JS
$('#map > div > div:nth-child(1) > div:nth-child(4) > div:nth-child(1)').click();
JS
page.evaluate_script(javascript_to_trigger_click)
where #map is my element containing the google map.
Side note but I've lost so much time on this, be sure to enable whichever url capybara thread is running its test server into google console for your app. (you can see the url by setting config.debug = true for capybara)
Related
I want to embed "my maps" to my website using iframe, but I want to let my clients to open that map in a new window and see their location on it.
If I open my map in edit mode on my phone: www.google.com/maps/d/edit?mid=*** I see my position, if I change the mode to "view" it stops tracking my location.
Is there a way to open the big map and to see the current position? It's very useful... Maybe there is another way to embed it...
Based on the documentation
url: https://developers.google.com/maps/documentation/staticmaps/intro?hl=en
it seems that it is not possible to get the current location (position of the client) using the parameters which go along with the url. This means that you can not use iframe and embed google maps inside it to get your current position.
However, you can still use geolocation and program it to get the user current position on the map,
url (code included in the link): https://developers.google.com/maps/documentation/javascript/examples/map-geolocation
Bare in mind that the google map API will always ask you the permission to access data in order to locate you.
In my web page code, I used to have a link to open a new window with Google Maps initialized like this:
http://maps.google.com/maps?q=loc:{{lat}},{{long}}&z=14
and it was showing a marker.
With the new google maps, this syntax does not work completely, as the zoom level is not taken into account. So I found out that this was working:
http://maps.google.com/maps/#{{lat}},{{long}},14z
But in this case I don't have a marker anymore.
Question: With the new syntax, how to get a marker at the specified position? Also, I could not find a Google web page documenting the syntax. Is there one?
Thank you
Try this is in the format you need. The first with marker the second without
https://www.google.com/maps/place//#46.090271,6.657248,16z
https://www.google.com/maps/#46.090271,6.657248,16z
you must add the place/ between maps/ and /#
is it possible to activate the keyboard bindings of Google Maps (StreetView) immediately after page load? I found a working example here, unfortunately it uses the Google Maps API v2 which is no longer supported. If you embed a normal Google Maps StreetView, keyboard bindings works not before you click on the map initially (see here).
Is there a possibility to do this in v3? I already tried this and this without success because thats not working for streetview.
Update: with keyboard bindings I have especially the arrow keys in mind to move around the map
Thanks
Greetings
Ok, found a solution and created a Gist for that.
The solution proposed by #ChristianB did not work for me. Maybe because it works for an older version of the Google Maps API (mine is v3), or it uses a different rendering mode (mine is webgl, which uses a canvas).
What I did is wait for the position_changed event to trigger, then set a tabIndex attribute on the canvas element, and then trigger the focus() on the canvas element. After that the keyboard bindings work.
The code:
var panorama = new google.maps.StreetViewPanorama({
...
//forcing webgl
mode: 'webgl'
});
//Set an event listener for position_changed,
//this will be triggered the first time the panorama is loaded,
//and every time the position changes
google.maps.event.addListener(panorama, 'position_changed', function() {
//This is how to get the canvas in my current version of the Google Maps API,
//note that this might change in the future.
var canvas = document.querySelector('canvas.widget-scene-canvas');
//first set a tabindex on the canvas,
//without it focus will not make the canvas the active element
canvas.setAttribute("tabindex", "-1");
canvas.focus();
//To test that it worked you can check that document.activeElement is the canvas
console.log(document.activeElement);
});
You might want to put the code in a separate function and call it any time the canvas loses focus.
Code tested in Google Chrome v55.
What I do is I go to a location in Google Maps (either by searching or just by dragging the map). Now I enter another URL in the addressbar and hit return to go to that site.
When I use the browser Back-Button, google Maps automatically switches back to the location I was last in.
How is this done if I dragged the map and didn't use some kind of "POST" on the Google Maps site? I would like to have the same behaviour in my own google Google Maps App.
I'm using Google Maps API for JavaScript v3
I don't know if GMaps has convenience method for this, but generally such functionality is based on HTML5 history.pushState() which lets you add custom steps to navigation history and observe when user navigates back:
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history
If you want to handle more advanced application states this way, there are several frameworks built on top of it, e.g. Backbone router, LeviRoutes.
In HTML4 browsers pushState can be emulated with fragment identifiers (hash URLs).
First of all you just look for an event called 'dragend' on your map
google.maps.event.addListener(map, 'dragend', function() {
});
Then you need to get your coordinates using getCenter() and redirect your browser to '#coordinates' it won't reload your window as you use hash, but it will save it in history.
coords = map.getCenter();
window.location = '#' + encodeURI(coords);
Now you need to add listener to check for any 'hash' changes in an URL (assuming you have jQuery)
$(window).bind('hashchange', function () {
var hash = window.location.hash.slice(1);
});
At the end you need to tell your map to change coordinates and decode url
hash = decodeURL(hash);
map.panTo(hash);
Instead of panTo() you could use setCenter(), but it add some nice animation while clicking Back button.
It is very easy to change this code to work with your searched place, you can use event 'center_changed' instead of 'dragend' and it will handle everything.
Everything I wrote about is covered here:
https://developers.google.com/maps/documentation/javascript/reference#Map
Hope this helps you.
I am working on Web Application that uses Google map. I need to verify balloons present on map. After some Google, i came across this link Automating Google Earth .But this isn't helped lot.Does anybody has idea to work with maps in QTP?
I want to test this in IE8. When clicked on balloons, description is displayed.Need to test this description.Image for info
Any help ?
This seems to be browser specific (and I'm sure it will change with changes in Google Maps) but I see in firefox that when there's a balloon then area and map elements are added to the DOM. You can create a WebElement with this html tag and see if it exists.
I don't really understand what problem you're facing. I can easily learn the DIV element which hosts a Wikipedia bubble and the elements under it with QTP.
you can try html dom if it is java application by using getElementById method from html dom ,
open firebug check the element of the pointer and get the id from it. use the id in getElementById method.
or
check this
Sub PostGPSLocation
Call Mobile.SetCurrent("Nexus 7")
' Obtain location data
Longt = Mobile.Device.GPS.Location.Longitude
Lat = Mobile.Device.GPS.Location.Latitude
' Output the location data
Call Log.Message("The device location is:")
Call Log.Message("Longitude: "&Longt)
Call Log.Message("Latitude: "&Lat)
Call Log.Message("Altitude: "&Mobile.Device.GPS.Location.Altitude)
Call Log.Message("Accuracy: "&Mobile.Device.GPS.Location.Accuracy)
' Open Google Maps in the browser and pass the coordinates as URL parameters
Call Browsers.Item(Browsers.btIExplorer).Run("http://maps.google.com/maps?q=loc:"&Lat&","&Longt)
End Sub