NIFCLOUD-mbaas / UserCommunity

ニフクラ mobile backend ユーザーコミュニティ
https://mbaas.nifcloud.com/
81 stars 18 forks source link

How to use google map on mbaas and monaco bases? #73

Open itodakou opened 9 years ago

ykokw commented 9 years ago

こちらの記事にある 地図を表示させる、の章以降は実装されましたか?

もし記事どおりに実装してうまく動かないところがあれば、「エラーメッセージがでていない」「地図が表示されない」等教えていただきたいです。

itodakou commented 9 years ago

ありがとうございました。なんとか表示できるようになりました。 ただし、記事のとおりでは表示されず、MAPのスタイル指定を style="width:360px; height:360px;" とすると表示できました。 style="width:100%; height:100%;" では表示されません。 何か設定の仕方に問題があるのでしょうか?

ykokw commented 9 years ago

記事に不足があり失礼しました。

styleでwidthやheightを100%で指定すると、親要素のスタイルのwidth/heightを継承することになります。 そのため親要素にwidht/heightの指定がされていないと「表示しているけどwidth:0px, height:0pxで見えていない状態」になります。

<div id="map_canvas"></div>

が書かれている親要素のwidth/heightを確認するか、 OnsenUIを使用している場合であればスタイルの確認がちょっと大変なので ご指摘いただいたとおり、width/heightをpxで指定することで確実に表示ができるようになります。