googleMapのapiを利用して、地図を表示することは多いと思います。
弊社でもアクセス情報を載せる時は、かなりの確率で利用させてもらっています。
（最近では、apiではなく、googlemapの埋め込み用コードを使うことも多いですが・・・）
ふと、このmapを横幅一杯に表示されたらなんかかっこいいんじゃないかと思って、
試してみました。
なんかデザイン次第じゃかっこ良くなるんじゃあないでしょうか？？
ただ、横幅一杯にした場合、地図をスクロールやマウスのホイールで動くようにしてしまうと
若干めんどくさいですね。。。
DEMOでは動かないようにしています。
方法は、ただcssでwidthを100%に設定するだけで、
googlemapの設定は通常の設定でOKです。
一応、googlemapのソースを載せておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> google.maps.event.addDomListener(window, 'load', function() { var mapdiv = document.getElementById("mapArea"); var myOptions = { zoom: 17, center: new google.maps.LatLng(35.712271,139.706734), mapTypeId: google.maps.MapTypeId.ROADMAP, scaleControl: true, panControl:true, scrollwheel: false }; var map = new google.maps.Map(mapdiv, myOptions); //インフォウィンドウの設定 var infoWindow = new google.maps.InfoWindow({ content: "<a style='color: #000; font-size: 14px;' href='/' target='_blank'>スターフィールド株式会社</a>" }); //アイコンの画像設定 var image = new google.maps.MarkerImage( "http://maps.google.co.jp/mapfiles/ms/icons/orange-dot.png", new google.maps.Size(32, 32) ); //アイコンの影の画像設定 var shadow = new google.maps.MarkerImage( "http://maps.google.co.jp/mapfiles/ms/icons/msmarker.shadow.png", new google.maps.Size(48, 32) ); //マーカーの設定 var marker = new google.maps.Marker({ position: new google.maps.LatLng(35.712271,139.706734), map: map, icon: image, shadow: shadow, zIndex: 99 }); //マーカーをクリックした時の設定 google.maps.event.addListener(marker, 'click', function(event) { // center map map.panTo(marker.getPosition()); infoWindow.open(map, marker); }); }); </script> |
ちなみに、アイコンを違うものに設定したい場合、
下記サイトをご覧ください。いろんなアイコンが用意してあります。
