2016-11-28 11 views
1

Googleマップを使用してMeteorウェブアプリを入手しました。ズームコントロールにプラス/マイナス記号が表示されていないGoogleマップ

getCoordinates(mapsArray(), function (coords) { 
    var mapCanvas = document.getElementById('map'); 
    var mapOptions = { 
    center: new google.maps.LatLng(coords[0] + 0.00145, coords[1] + 0.00135), // For some reason it centers off of the address entered. These numbers compensate. 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    scaleControl: false, 
    scrollwheel: false, 
    disableDoubleClickZoom: true, 
    styles: [...styles here...] 
    }; 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
    var marker = new google.maps.Marker({ 
    position: { lat: coords_objLat.f + 0.00145, lng: coords_objLon.b + 0.00135 }, 
    title: mapAddress[0] 
    }); 
    marker.setMap(map); 
}); 

function getCoordinates(address, callback) { 
    var coordinates; 
    geocoder.geocode({ address: address }, function (results) { 
    coords_objLat = results[0].geometry.viewport.f; 
    coords_objLon = results[0].geometry.viewport.b; 
    coordinates = [coords_objLat.f, coords_objLon.b]; 
    callback(coordinates); 
    }) 
} 

地図はマテリアライズカードの中にありますが、私はそれがどのように適切かはわかりません。

<div class="col s12 m6 l6"> 
     <div class="card"> 
      <div class="card-image waves-effect waves-block waves-light" id="map"> 
       <!--<map is here>--> 
      </div> 
. 
. 
. 

CSS:それはどのようなものか

#map { 
height: 200px; 
background-color: #01579b; 
padding: 0; 
} 

。右下のコントロールにプラス記号とマイナス記号と人物が表示されます。

enter image description here

任意のアイデア:前にこれを見て覚えていないのですか? Google Maps Documentationから

+0

Ah。問題が解決しました。それは、犯人であった地図のdivの 'wave-effect'クラスでした。何とかイメージに影響を与えていました。 –

答えて

1

:マップは (200x200px)小さすぎる場合

デフォルトでは、すべてのコントロールが消えます。 コントロールを明示的に表示することによって、この動作を無効にすることができます。マップへのコントロールの追加を参照してください。

マップのサイズを201 pxに変更して、違いがあるかどうかを確認してください。それ以外の場合は、動作をオーバーライドできます。手順はこちら:https://developers.google.com/maps/documentation/javascript/controls#Adding_Controls_to_the_Map

+0

お役立ち情報ありがとうございました。 –

関連する問題