TOPIC: Makers don't show on iphone

Hi Daniel,

I installed HotSpot on my website Wheels and Places 2 Go
We use the Joomlart ja_teline_iii template.
The problem is that the markers don't show on my iphone IOS 6.1.1
Also when i center the markers the map doesn't show/build anymore.

Hope you can help me out?

I use hotspot for many years and it's getting better and better.

Regards Ton

I don't have an iphone to test it and in FF it seems to work fine. (no js errors). Could you disable the jcemediabox plugin on the hotspots page? And test again in iphone?
Regards,
Daniel

Hi daniel,

Thank you for your fast respons.
I did disable jcemediabox and tried it
on my iphone and ipad.
Unfortunately it gives no improvement.
The problem is the same on the iphone
as on the ipad.
I send you an image from my ipad for
a better judgement.

Hope you can help me out.
I like to make it usable on
mobile telephones so it can be
used by people that are disabled
and quick and easy find thre way
to parking places and more...

Regards Ton

Daniel i noticed the Compojoom demosite works
perfect on the iphone and ipad.
Maybe it's a solution to use the same template?
Or an template alike?

Ton

Hi Daniel,

I did another try at the demosite and i found
that the first time i could select an
address the infobuble appeared.
After i closed safari (on ipad) i couldn't
recall it.
I like to give any and as much help if i can
to make HotSpot work for iphone/ipad!

Ton

Hey Ton,
I found that: browsers.about.com/od/allaboutwebbrowsers/ss/iphonedebugger.htm

Can you enable the console and let me know what the js error message there is?
Daniel

Hey Daniel,

I couldn't find the option to set the developer
debug console on in my iphone.
It isn't there.
So i connect my iphone to my iMac and
started Xcode and use u virtual iphone simulator.
When i started safari on the simulator and
went to www.whap2go.nl/route-2-go#!/catid=1
i got some errors.
I made a printscreen and hope this gives you a first
impression.

Let me know if i can do more.
If the images are not clear enough than i perhaps can
send them by mail.

Ton

Hey Daniel,

I used Safari yo check my website and discovered that
the errors that appears on my iphone and ipad
are the same on my imac.

I realy hope we can solve this

Ton

Go to the hotspots menu and change the center type to startPosition/start zoom.
Is it working then?
Daniel

Hey Daniel,

My default setting were already startPosition/start zoom.
I changed it to By category marker bounds and then it shows
more then before although the markers are not visible and the
infobuble doesn't point/direct with an arrow.
Same here on the iphone and ipad.

There's still an error.


Its getting better

Ton

Hey Daniel,

I made an HTML webdump with webinspector (iphone)
maybe it gives some help to?

I can mail it to you if you want.

Ton

Hey Daniel,

As far as i can see and check now it seems
fixed after i added another category and some
hotspots.
I am very glad it works in Firefox/iMac, iphone and ipad

Thank you very much for your help

Regards Ton

So you didn't have any markers published in your categories or how should I understand this?

Hey Daniel,

Yes sure i did! But i had only one category and a few markers/locations.
After i added the second category with an marker/location then
it worked.
My hotspots have other markers then the categories.

Thanks, for your time

I wrote a review in joomla.org

Hm, I need to investigate that. Thank you very much for letting me know what exactly you did!

Hi Daniel,

After adding several hotspots/locations i can't select (from my ipad/iphone) from the
list/tab. When i select one sometimes it shows the location
and infobuble but after then no more.

I can help you finding the error if you want.
Just let me know.

Regards Ton

I also noticed that at under some markers/icons black dots appear.
This didn't happend before i added locations.

Ton

Hey Ton,
We won't be able to debug that thing this way. I'll need to have access to the device. I spoke with a friend and next week (march) I'll be able to debug it directly on his ipad mini for a day. If 1 day is not enough, then I'll have to purchase a mac...

The black dots - read the documentation (scaling for large dbs). You've enabled the custom tiles option, but you haven't set a color for the dots (you do this in the category settings). Once you set a different color than black -> clear the tiles cache and it should be fine.

Regards,
Daniel

Hi Daniel,

I realy appreciate your great help
I have search google for the weekend trying to
find an answer or clue for the problem.
There were several items that mentioned jquery and
some problems particularly with ipad and iphone?
Great that you can have the ipad, that gives you
probably a better look at the problem.

And next time i will read the docomentation
a bit closer

Have a nice day,

Regards Ton

Hey Ton,
I had the chance to look at our demo site with an ipad last week and yesterday.
Last week I tested it for around 2-3 minutes & yesterday for around 20.
Everything was working! Yea! Imagine that! click on a hotspot in the menu -> bam the map loads it. What a great day I thought - what was initially thought to be a whole day of debugging turned out a 20min test! Now I could work on something else...

After thinking that everything is fine I decided to give it one last chance by looking at your site. I went on it and it was really not working. So I thought to myself - hm, maybe a setting was crashing it. Since you had the "read more" button turned off I decided to turn it off on the demo site as well.
Voila! It was not working anymore. Then I turned it on and it was still not working? Häää?
Then the whole component started to behave so strange that I was about to go mental.

Then I switched to safari on the ipad - it was working! Then I switched to chrome again - no it is not working. Ok I thought - so it has something to do with chrome. Switched back to safari - it was not working there as well now. WTF????

That continued from around 9AM until 3PM... until I suddenly realized what was going on!

If you open the page -> and you have the map in view with the menu -> one is able to scroll and click on the hotspots. If you go in full screen - one is able to click on the hotspots. When I was testing it I was testing it always in fullscreen as I find that the screen size of 10'' is a little small...

So - when the page loads and you see the map (even if it is only half of the map) you could use the menu and everything would be fine. If you go in fullscreen -> it will also be fine. But the second you decide to scroll the page - even with a cm, then the menu stops working.

So it has something to do with the scroll on the page. I couldn't find a satisfying solution though.
One could make it work by setting position: fixed on the hotspots div -> then the menu works, but the component is not on the correct place. One could add -webkit-overflow-scrolling: touch to the menu -> then you have a nice scroll on the ipad, but you need to click twice on a hotspot to open the menu.
If I change the click event on the div to touchstart, then it is working, but when you are scrolling each hotspot is clicked each time. And by using such an event the hotspots are not working properly in the desktop version...

It seems to be a bug in the ipad. (both chrome and safari on the ipad use the webkit engine) I would report this bug, but the problem is that I was not able to create a test case with simple code that reproduces the bug...

For now I'll leave this as it is... I'm planning to purchase a mac in the next days and once I have it I will be able to debug further.

Regards,
Daniel