2012-06-23 15 views
16

Sto usando il plugin gmaps.js http://hpneo.github.com/gmaps/Google Maps non mostra Zoom Controls

lo scorrimento di controllo dello zoom e l'InfoWindow non presentarsi e avere alcuni problemi quando si visualizzano. Link: http://bakasura.in/startupsradar/index.html

enter image description here

// JavaScript Document 
$(document).ready(function() { 
    var map = new GMaps({ 
     div: '#map', 
     lat: 13.00487, 
     lng: 77.576729, 
     zoom: 13, 
    }); 

    GMaps.geolocate({ 
     success: function (position) { 
      map.setCenter(position.coords.latitude, position.coords.longitude); 
     }, 
     error: function (error) { 
      alert('Geolocation failed: ' + error.message); 
     }, 
     not_supported: function() { 
      alert("Your browser does not support geolocation"); 
     }, 
     always: function() { 
      //alert("Done!"); 
     } 
    }); 

    map.addControl({ 
     position: 'top_right', 
     text: 'Geolocate', 
     style: { 
      margin: '5px', 
      padding: '1px 6px', 
      border: 'solid 1px #717B87', 
      background: '#fff' 
     }, 
     events: { 
      click: function() { 
       GMaps.geolocate({ 
        success: function (position) { 
         map.setCenter(position.coords.latitude, position.coords.longitude); 
        }, 
        error: function (error) { 
         alert('Geolocation failed: ' + error.message); 
        }, 
        not_supported: function() { 
         alert("Your browser does not support geolocation"); 
        } 
       }); 
      } 
     } 
    }); 

    map.addMarker({ 
     lat: 13.00487, 
     lng: 77.576729, 
     title: 'Lima', 
     icon: "http://i.imgur.com/3YJ8z.png", 
     infoWindow: { 
      content: '<p>HTML Content</p>' 
     } 
    }); 

}); 
+0

Forse alcuni dei tuoi CSS/JavaScript interagiscono con Maps CSS/JavaScript? –

+1

@UweKeim yeah questa è la migliore scommessa. Sto cercando di vedere cos'è. –

+1

@UweKeim rimozione file Bootstrap CSS rende correttamente le mappe :(questo è folle –

risposta

48

Sputafuoco era in conflitto con il rendering delle mappe

L'aggiunta di queste linee di CSS ha fatto il trucco

/* Bootstrap Css Map Fix*/ 
#mainBody #map img { 
    max-width: none; 
} 
/* Bootstrap Css Map Fix*/ 
#mainBody #map label { 
    width: auto; display:inline; 
} 
2

ho avuto questa prima, era un po ' del mio CSS che ha sovrascritto alcuni dei valori nelle mappe. Suggerirei di controllare tutti gli stili applicati ai tag img. Soprattutto i valori di larghezza che sono impostati sulle immagini a livello globale.

Problemi correlati