Dimensione marker e controlli in GoogleMaps v3 su smartphone

[xGioweb]

Ciao, volevo chiedere una cosa che non mi è chiara. Con la nuova versione delle mappe di google ho letto che i controlli mappa non sono più da personalizzare in quanto googlemaps li adatta automaticamente al dispositivo e alla dimensione del monitor. Infatti quando rimpicciolisco la finestra ad un certo punto i controlli cambiano, si riducono ma sono sempre utilizzabili.

Sono partito da questa pagina http://google-maps-utility-library-v...e_example.html

e ho ingrandito la mappa a tutto schermo inpostanto altezza e larghezza a 100% nel css style. In un qualunque browser tutti i controlli sono sempre utilizzabili, ma quando visualizzo la mappa su un browser di uno smartphone che sia iOS o Android, tutto lo stesso funziona ma i controlli sono minuscoli e ci vuole un ditino piccolissimo per controllarli. E anche i marker e i cluster marker con i numeri sono minuscoli.

Secondo voi devo aggiungere dei controlli personalizzati? Grazie!!

[Vindav]

prova ad impostare il parametro scale a 2

[xGioweb]

Per Scale 2 intendi ScaleControlStyle?

Ho provato a impostare manualmente i controlli che adesso posso spostare dove meglio credo... ma il parametro Scale 2 dove devo impostarlo?

   <script type="text/javascript">
      var script = '<script type="text/javascript" src="markerclusterer';
      if (document.location.search.indexOf('compiled') !== -1) {
        script += '_compiled';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>

    <script type="text/javascript">
      function initialize() {
        var center = new google.maps.LatLng(42.26, 11.34);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: center,
          
          mapTypeControl: true,
          mapTypeControlOptions: {
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
          position: google.maps.ControlPosition.TOP_RIGHT
          },
          panControl: true,
          panControlOptions: {
          position: google.maps.ControlPosition.LEFT_TOP
          },
          zoomControl: true,
          zoomControlOptions: {
          style: google.maps.ZoomControlStyle.LARGE,
          position: google.maps.ControlPosition.LEFT_TOP
          },
          scaleControl: true,
          scaleControlOptions: {
          position: google.maps.ControlPosition.BOTTOM_LEFT
          },
          streetViewControl: true,
          streetViewControlOptions: {
          position: google.maps.ControlPosition.LEFT_TOP
          },
      
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < data.Store.length ; i++) {
          var dataStore = data.Store[i];
          var latLng = new google.maps.LatLng(
            dataStore.lat,
            dataStore.lng);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script> 

Questo esempio viene invece visualizzato correttamente anche su cellulare
http://code.google.com/intl/it-IT/ap...ple-async.html e non mi sembra sia impostato niente di manuale

[xGioweb]

non riesco proprio a capire... non penso sia un problema di settaggio manuale dei controlli... ho rimosso tutto e ho modificato il css che fa visualizzare la mappa a tutto schermo:

    <style type="text/css">
      body {
	  height: 100%;
      margin: 0;
      padding: 0;
      }

      #map-container {
        border-width: 0px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
      }

      #map {
		height: 100%;
      }

    </style>

ma ancora niente... il comportamento è perfetto nel browser del pc nel senso che quando rimpicciolisco la finestra si ridimenionano i controlli ma non nello schermo dello smartphone..