jQuery Tabs and Google Maps, pin not at center - javascript

I am using jQuery Tabs to show different <div> contents in tabs. My tabs are:
Description | Amenities | Pricing | Images | Location Map
The problem happens when I switch to the Location Map tab, in which I am using Google Maps. The pin is not showing at the center of the map. But when I use the same Google Map script without jQuery Tabs, then it works fine. Is there a way to have the Tabs, but still have the pin at the center of the map?

It is showing dead centre for me, which browser are you using?
Here is a screenshot of it working in Chrome 17 on Mac: http://d.pr/UNiS

Actually it is showing there as well, but the problem is that you have a higher zoom level for your map. You can reduce the zoom level in your map to show the pin at center.

Related

Pinch to zoom on mapboxgl zooms in entire chrome window. How to prevent this?

I am using mapboxgl as a mapping inside of my website. When users attempt to zoom in using two fingers on a touchscreen, the map zooms in, but then the entire website zooms in too. How do I make it such that if user uses two fingers to zoom in on map, that it does not zoom in the entire webpage?
I had the same issue when developing mapbox app for a windows10 kiosk. This can be fixed my specifying touch-action as none for mapbox container div.
#map{
touch-action:none;
}

Google Map: not change size in fullscreen

I have a application using Google Maps API and I have developed a controller to set full screen when user click in a button using this:
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode#Non-standard_methods
But the problem is in full screen show more map than in normal screen. And the application must show excactly the same part of the map in both views.
Is it possible to do this?
Thanks in advance!

Zooming in google map api 3 [ios]

According to Google Map documentation. In IPhone
Zooming is accomplished by a two finger pinch.
So when i tap my fingers on screen and move then map getting zoomed but after that when i release fingers from screen then zoom that i see before the map reloads is a lot more than the actual zoom that renders.
Currently, I am testing that on IPhone 5 with ios 7.1.2 and IPhone 4S with ios 8
I am using JQuery Mobile Framework in my app and the map is generated dynamically.
(when i create map with fixed values then it works fine)
I created fiddle in which you can see same problem.
Link
Some picture of my issue
First picture map opens
Second picture when i try to zoom my map with finger pinch.
Third picture when i released my finger from screen.
So it cannot maintain its zoom level that show in second picture. How to solve this problem
Please try replacing:
google.maps.event.addListener(mapClass.map, 'zoom_changed', function() {
mapClass.map.panTo(myLatlng);
});
with :
google.maps.event.addListener(mapClass.map, 'zoom_changed', function() {
mapClass.map.panTo(mapClass.map.center);
});
Hope it helps.
I resolved this issue (or possibly a very similar one) buy throttling the work I did in the zoom_changed listener. I used lodash throttle.
Replace this
google.maps.event.addListener(mapClass.map, 'zoom_changed', myFunction);
With this
google.maps.event.addListener(mapClass.map, 'zoom_changed', _.throttle(myFunction,100));

OpenLayers 3, Markers appear in different places when viewing with iPad

I have an OpenLayers3 map showing static map image an ontop of that a vector layer containing markers (features). The features display nicely when viewing the map on a laptop or a pc, but when viewing the map on an iPad the markers markers appear to have a some kind of offset (so that they dont't align correctly with the map). I am using pixel projection. Does anybody have any idea why this is happening? I've tested on multiple different browser (Safari and Chrome on the iPad), and I have came to a conclusion that it is not a browser issue.

"Focus" and activate Google Map Embed Programmatically

I'm pretty new to the Google Maps API.
I'm building a simple Maps App for our TV platform here at work, the TV uses a custom webkit browser and I've confirmed that the Maps API works well on it.
Currently when you load a simple app like this on our TV (Code is given in below links):
http://markpaul.name/dont-delete/other/sample-maps-app.html
You first need to use the mouse to "click" on the screen to "focus" the map. Only after this, the map embed "activates" and you can use the up, down, left, right keys to navigate the map.
The problem I have is this; on a TV you dont have a mouse so you cant "click" to "focus"!
Is there anyway you can programatically "focus" the Google Map so I can use the arrow keys on the remote (which usually map to the keyboard up, down, left, right keys) to navigate the map?
Thanks in advance,
Mark
UPDATE:
My code can be seen here - http://codepen.io/newbreedofgeek/pen/EaugH
The full screen app in codepen is here - http://codepen.io/newbreedofgeek/full/EaugH
The hosted full screen app (minus autogenerated CodePen markup in full screen codepen view) is here - http://markpaul.name/dont-delete/other/sample-maps-app.html
I checked you source code and my feel is that somewhere the map's position is getting changed. So by triggering the Google map's resize it would fix your problem.
google.maps.event.trigger(map, 'resize');
Add the above code after initializing the Google maps. This would fix the problem.

Categories

Resources