0
  • This is my first hybrid app.
  • I am targeting android(ver. 4 +) and iOS(ver. 7+) platform.
  • I am developing on windows platform.
  • I am using phonegap build.

I have developed a hybrid mobile application on apache cordova. I am implementing map feature in it using google map javascript API. I am facing an issue on high density devices such as xhdpi and xxhdpi where map font and other imaged are shrunk. when I increase zoom to 200% of div of map, the marker becomes non-clickable.

Please help me to optimize view of map in xhdpi and xxhdpi android devices.

In Android xhdpi devices devices : (Map is not clearly visible)

enter image description here

In Android devices where map div zoom = 200% (Map Marker click is not working in this case)

enter image description here

*Note : The same code is working fine on iOS devices as I think iOS is scaling it by itself.

Shahbaz Khan
  • 133
  • 1
  • 10
  • @shabaz, what does your portview look like? Can you add that information to your original post? Please **answer the following questions in your post**. Since this appears to be your first post on this subject. Is this your first hybrid App? What is your target platform and their target versions? Android 4,5,6? iOS 7,8,9? What platform are you developing on? Windows, MacOS? Are you using [CLI, SDK or Build](https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md#001) ? Please do not assume the answer, please read the link. Respond in the comments so I know. –  Feb 03 '16 at 01:44
  • @Jesse I don't know about portview. This is my first hybrid app. I am targeting android(ver. 4 +) and iOS(ver. 7+) platform. I am developing on windows platform. I am using phonegap build. – Shahbaz Khan Feb 03 '16 at 06:40
  • Hmm.... Your biggest issue right now is not being able to follow directions. Even so, here a tutorial. Read the Tutorial and the [README.md](https://github.com/jessemonroy650/Phonegap--Generic-Boilerplate/README.md) in the source code. TUTORIAL: [An HTML Boilerplate for Phonegap](http://codesnippets.altervista.org/blog/2015/BLOG.2015-06-10.jssnippets.html) Your issue is with viewport. IT is in the README.md -- This FAQ should also help. [Top Mistakes by Developers new to Cordova/Phonegap](https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md) - Best of Luck –  Feb 03 '16 at 06:55
  • I have gone through the documentation, but i am not able to understand my issue in any of the article. My point is, how I make map more readable and markers clickable on high density android devices. I am developing the app for first time but I am developing since 3 months and I know all basics of hybrid app development using phonegap build. – Shahbaz Khan Feb 03 '16 at 08:09
  • Your issue is *viewport*. This is the first thing that is taught in classes. But you don't know viewport and so your three (3) months is for nothing. [Wikipedia](https://en.wikipedia.org/wiki/Viewport), [w3schools](http://www.w3schools.com/css/css_rwd_viewport.asp), Google [Android](https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=en), Apple [iOS](https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html) Best of Luck –  Feb 03 '16 at 09:46
  • Like I said, your biggest issue is not being able to follow directions. Everything else is not important. FWIW: use the example in the tutorial and it will fix your problem. –  Feb 03 '16 at 09:47
  • using viewport scale as per the devicepixelratio solved my issue. I was not aware of the viewport so i wrote different css for different density devices. Thanks for the help. – Shahbaz Khan Feb 03 '16 at 15:05
  • whatever works for you is best. I do maps also, but I ignore most other parameters of viewport. I use just the minimum. As for different CSS for different density devices, you want to use make sure you use the new [media query](https://www.google.com/search?q=css+media+query) Here is a good article by [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) - Best of Luck –  Feb 03 '16 at 19:25

2 Answers2

0

You can control the scaledSize property for the icon. Check this link reference#Icon

Banik
  • 911
  • 6
  • 10
  • Actually the marker scaled size is not helping. Please check my edited post. I tried scaling marker icon size but it's not working. – Shahbaz Khan Feb 02 '16 at 15:02
0

The is resolved now by using viewport property and media query. Just use initial scale property for respective high density devices.

Shahbaz Khan
  • 133
  • 1
  • 10