Google Maps instant zoom-out on marker click - javascript

I have a map with multiple pins representing store locations. I zoom in until I see fewer locations and when I click on one of the red pins I get an instant zoom-out. No errors are popping up in the browser's console (Chrome and Firefox - latest versions).
Have a quick look at the screecast below:
https://monosnap.com/file/FEIB5YdvbSaQd5iiFZ363bfCXJryOt
Has anybody encountered this issue?

No I haven't encountered this because whenever I use google maps markers, I add an eventListener to them that controls the zoom. For instance:
marker.addEventListener("click", function(){
//zooms in on the location you clicked
map.setZoom(18);
map.setCenter(data.location);
});
I'm not positive but google maps api probably as a default value set whenever you click on a marker. If you edit your question with your code I might be able to answer a bit better.

Related

How can we test the display of marker/ markers on Google map using Cypress.io?

How can we test the display of marker/ markers on Google map using Cypress.io?
I have no idea what method to use to find a marker displayed on Google map.
describe('Display of marker on Google map', function(){
it.only('Check the display of marker on Google map', function(){
cy.visit('https://www.google.co.nz/maps/#-36.9139788,174.8740846,15z?hl=en')
cy.get('#searchboxinput').type('gold coast')
//don't know how to select Gold Coast from the populated search items
//How to find a marker displayed on Google Map ?
})
})
If markers are created with optimized: false option, then you can check if they are in DOM by just using cy.get(). That way you could check how many markers are displayed but it could be problematic if you would like to check if a particular marker is drawn as you have no controll over marker class.
There is dirty workaround for this problem - check for DOM element by icon url which is totally fine for one marker but dirty when having multiple markers with the same icon. Then you would need to add different get param for every marker icon url (like myicon.png?num=1).
Have in mind that then, most probably your browser won't be able to download icon just once but multiple times. Another drawback is that optimized: false flag will make your map slow for big amount of markers.
If optimized: true was used, then markers are drawn on canvas (no markers in DOM) and you will need to do visual testing, which I recommend, using one of the cypress plugin https://docs.cypress.io/guides/tooling/visual-testing

Google Maps Markers in wrong location, but lat/lon appears correct

I am using custom markers to show a semi-live view of the location and orientation (heading) of certain vehicles of interest overlayed on Google Maps. (In my case, I'm depicting aircraft, the same way Uber does for cars, or how FlightAware does for commercial flights).
The coordinates for the markers are being broadcast in JSON format to participating browsers from a server that I control. The JSON data is processed by a JavaScript function at the browser to create / update the markers on the Google map. The refresh (broadcast) rate can sometimes be as fast as once every 2-seconds, or as slow as once every 30 seconds, depending on the particular user's needs of the moment.
Sometimes, it is possible (and valid) for two markers to be thousands of miles apart from each other. For example, one marker could be in Montana, and the other could be somewhere in Africa, and this is a valid condition.
However, sometimes, when I am zoomed into a region of the world so I can look more closely at one marker, a "ghost" marker appears nearby that "isn't really located there". The ghost marker is labeled as one of the other markers that may be hundreds or thousands of miles away, but it's showing up in my zoomed in view for some strange reason. If I momentarily zoom in our out, the ghost disappears, but it may re-appear again.
Interestingly, the ghost image has the proper orientation for the vehicle it represents, but it's just located in the wrong part of the world.
Are there any special things I should be doing when I'm updating multiple markers separated by large distances so they don't show up like this in the wrong place?
I have traced this as far as putting console messages in the browser so I can see the lat/lon of each marker being depicted. I output the latLng object just before it's applied to each marker, and the lat/lon I see in the console log is correct, even when the actual marker shows up in the wrong place.
I don't know if this is a contributor to the problem, but the marker images I'm using are custom PNG files, not standard Google makers. Has anybody run into this before?
As I can see there are a couple of issues reported in the Google issue tracker very similar to the one you described here.
Have a look at them:
https://issuetracker.google.com/issues/74225068
https://issuetracker.google.com/issues/73864685
Feel free to add your comments and star the issues to subscribe to further notifications from Google.
Please note that these issues were reported for the experimental version of Google Maps JavaScript API. Double check which version of the API you are using. Probably loading the release or frozen version will work as a temporary workaround for you.
For more details about versioning model of Google Maps JavaScript API please refer to the documentation:
https://developers.google.com/maps/documentation/javascript/versions
I hope this helps!

Place Google maps Info window below marker (with pixeloffset?)

Currently, I'm working on a website where it is wanted to place the info window below the marker.
By default, when you have a map and click a marker, the info window will show above that marker, with the arrow point it to the marker. I would like to switch that around.
In the google maps api there is a section about pixelOffset that might work But I just don't get it.
This pixel offset, where would completely 0 be? And what if you zoom out.
I can't seem to figure out how this pixelOffset works and if it is really the thing I need to place the infowindow below the marker.
So my question in general is: Does someone know how to place the google map infoWindow below the marker ? Do I need pixelOffset for it or is this something completely diffrent?
Thanks!
It's possible to adjust offset using pixelOffset property, but I don't think that's what you want, because the arrow would always point downwards, not upwards to the marker.
What you want is more control over infowindow, and you won't get that using google.maps.InfoWindow class. There is a library called InfoBox which supports the same functinality as infowindow but have couple of more features, which allow for better customization.
Check this tutorial, the author is demonstrating very similar functionality to what you want to achieve. Basically you will create your own structure for the info infowindow, including the arrow yourself. Just using HTML and CSS. More in the tutorial.
One more thing, the link to infobox library is broken on the blogpost, because it has been moved recently to github, you can find it here. Download it to your project from there (either as infobox.js or infobox_packed.js which is the minified version).

Animate zoom to google map location on click(custom google maps controls)

I want to have google map displaying whole planet(zoomed out maximally). Then, I would like to put overlay over map with button. When user click on button the overlay is removed and google map is automatically animating to the location i want.
So, I am not asking for complete solution, I just want you to tell me if it's possible to do that using google map js api, and if you can give me some direction, that would be awesome. I have searched a lot but found nothing on this subject.
Thanks.
I've noticed, that if difference between current zoom level and new zoom level more that 2, google maps won't make smooth zooming.
You can take a look at same question: How to zoom in smoothly on a marker in Google Maps?
map.setCenter(new google.maps.LatLng(theLatitude, theLongitude));
map.setZoom(yourZoomLevel);
See also: change location to preset coordinates and zoom with click of a button

Customer interactive vector map

I'm sure this isn't going to be straight forward, however..I have a custom vector map of the UK and it's an animated map. It shows different locations all over the country and I need to be able to allow the user to click on a certain location on the map. So the user will get a pop up about the location they've selected. Something like this - http://jqvmap.com/ However like i said the map has charactertures on it.
I'm wondering how simple it would be to change the co-ordinates in the Javascript to locate the positions on the map. Is there a tool I can get so it tells you your current co-ords on hover to help?
Any suggestions would be much appreciated! It needs to work on all major browsers including IE 8/9 (7 if possible).
Thanks,
Josh
I've found something that seems to have done the trick - http://www.outsharked.com/imagemapster/default.aspx?demos.html#frog
I've implemeted the code onto my page and it's worked. I've managed to get the co-ordinates from the web developer tool bar.
However, I'd like to implement a zoom in feature, where you can zoom and move around the image as if you were using google maps. So you can scroll with the house. My worry is will that lose the co-ordinates on the image? As I still want users to be able to click on the locations on the map.

Categories

Resources