🏢 👩🏾‍🍳 🙏🏽 カスタムGoogleマップスイッチ 🦊 🚵🏻 😋

Googleマップコントロールのスタイリングに関する明確な説明がウェブ上で見つかりませんでした。 Google Maps API v3に基づくマップを使用したサイトの大まかな調査により、開発者はデフォルトコントロールのカスタマイズを避けているという印象を受けました。結局のところ、カスタマイズは非常に簡単なプロセスです。 catの下で、私のjquery実装。

この例では、jquery map uiを使用しています。ところで、Jquery UIから必要なのは3Kbウィジェットモジュールだけです。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ru"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/tags/3.0-alpha/ui/jquery.ui.map.js"></script>

典型的な例は、トップインデントです。

必要な属性を持つ要素を見つけて、cssを割り当てます。

 $(function () { //    #map_canvas $('#map_canvas').gmap({panControl: false}); //      controlwidth=32 $('div.gmnoprint[controlwidth=32]').css({'margin-top': '20px'}); //        font-weight $('div[style*="font-weight"]').css({'margin-top': '20px'}); });

しかし、それだけではなく、マップが完全にロードされた後に限ります。

 $(function () { $('#map_canvas').gmap({panControl: false}); var map = $('#map_canvas').gmap('get', 'map'); google.maps.event.addDomListener(map, 'tilesloaded', function(){ $('div.gmnoprint[controlwidth=32]').css({'margin-top': '20px'}); $('div[style*="font-weight"]').css({'margin-top': '20px'}); }); });

しかし、これだけではありません。親要素を移動することを確認する必要があります。そうしないと、誤って表示されます。

 $('div[style*="font-weight"]').parent().parent().css({'margin-top': '20px'});

より複雑な例は、ズームとマップタイプの切り替えです。まず、すべてのコントロールを非表示にします。

 $(function () { $('#map_canvas').gmap({disableDefaultUI: true}); });

ズームボタンとマップボタンを追加する

 <img id=zoomOut src=images/out.png /><img id=zoomIn src=images/in.png /><img id=map src=map.png /><img id=sat src=sat.png />

二重の増加を達成するとき、「次へ」ボタンをオフにするとよいでしょう：最小の増加で大陸を繰り返し増加させた-見苦しい光景。

 $(function () { $('#map_canvas').gmap({disableDefaultUI: true}); var map = $('#map_canvas').gmap('get', 'map'); $('#zoomIn').click(function() { map.setZoom(map.getZoom()+1); if(map.getZoom()==3) $('#zoomOut').show(); }); $('#zoomOut').click(function() { map.setZoom(map.getZoom()-1); if(map.getZoom()==2) $(this).hide(); }); $('#sat').click(function() { map.setMapTypeId(google.maps.MapTypeId.SATELLITE) }); $('#map').click(function() { map.setMapTypeId(google.maps.MapTypeId.ROADMAP) }); });

ご覧のとおり、かなりうまくいきました。

ソースはYandex Diskからダウンロードできます。

それだけです素材が興味深いと思われる場合-マップの操作について公開し続けます。

PSコメントをありがとう、フォーマットを修正

カスタムGoogleマップスイッチ

More articles: