Google maps on website for phone browser is too small

Question

I have integrated google maps to my website. I have used Google maps API V3. When my website is viewed on a mobile phone such as an Iphone, the map becomes unusable. It is very hard to see as the font size becomes too small, on further zooming into the map the font size further decreases.

On viewing in desktop computer, the map seems readable but I am still not happy with the font size and it is totally unreadable on an iphone or any mobile phone browser.

What I would like to fix is, 1) Get the map seem bigger in size especially by increasing the font size. 2) I want to my map to just show the street names and nothing else. 3) I want map to load much faster

Or is there any other google map API exclusively for mobile phone websites?

Answer 1

I had the same problem, and I ended up implementing a solution I found here: https://sunpig.com/martin/2012/03/18/goldilocks-and-the-three-device-pixel-ratios/

Basically the article explores the difference between physical pixels and CSS "pixels". There is a scale factor between the two. Its default value on most mobile browsers seems to be the reason why you often see pages designed for desktops looking very "zoomed out" with tiny text on a phone. And it also seems to cause unreadable Google Maps!

My problems went away when I added this HTML snippet into my "head" section:

<meta name="viewport" content="width=device-width">

Answer 2

1. It seems that this is a feature Google Maps API does not support yet, or fails to take into consideration.
   
   The comments in this forum state the same.
   Apparently the street labels are "baked into the map tiles", so there's no way of actually change the font size/styles.
   Broken link #2*.

2. Regarding your second question:
   If you only want the street labels to show, I suggest to read through the Styling section of the Google Maps API. Once you have gone through this document, you'll find you can easily get a JSON from the wizard Broken link #4*, which you can add to your map.
   
   All you'll have to do is to set all the feature labels Visibility to Off except for the "Road".
   Then click on "Show JSON", you should get something similar to this:

Google Maps API v3 Styled Maps JSON:

[
 {
  featureType: "administrative",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "landscape",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "poi",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "transit",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "water",
  elementType: "labels",
  stylers: [
   { visibility: "off" }
  ]
 },
 {
  featureType: "road",
  stylers: [
   { visibility: "on" }
  ]
 }
]

Here is the static image of the resulting map the wizard also provides.

---

* FROM REVIEW:

As of 2017, Links #2 and #4 are broken...