Google Maps API V3 Marker複数表示

ここではGoogle Maps API V3のMarkerを複数作成する方法について解説しています。

GoogleMap

デモはこちら
http://office-goto.info/demo/marker-plurality/

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    var arrData = new Array();
    arrData[0] = new google.maps.LatLng(35.671277, 139.718489);
    arrData[1] = new google.maps.LatLng(35.66991, 139.715291);

    // Markerオブジェクト複数
    for (i = 0; i < arrData.length; i++) {
        var marker = new google.maps.Marker({
            position: arrData[i],
            map: map,
            title: "ツールチップ" + (i + 1),
            icon: "icon.png"
        });
    }
});

Google Maps API V3 Markerオブジェクトで解説したMarkerオブジェクトをfor文で回すだけで複数作成されます。

Google Maps API V3 Markerオブジェクト

ここではGoogle Maps API V3のMarkerオブジェクトについて解説しています。

GoogleMap

デモはこちら
http://office-goto.info/demo/marker/

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    // Markerオブジェクト
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: "ツールチップ",
        icon: "icon.png"
    });
});

サンプルソースではマーカーのアイコンを変更し、ツールチップを表示しています。

Google Maps API V3

ここではGoogle Maps API V3について解説していきます。

GoogleMap

デモはこちら
http://office-goto.info/demo/map/

headで読み込み

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

GPS機能を使う場合sensor=trueに
GPS機能を使わない場合はsensor=falseにしてください。

html

<div id="gmap"></div>

地図を表示させるためターゲット指定してください。

サンプルソース

google.maps.event.addDomListener(window, 'load', function() {
    var latlng = new google.maps.LatLng(35.671277, 139.718489);
    var options = {
        zoom: 16,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("gmap"), options);

    // InfoWindowオブジェクト
    var infowindow = new google.maps.InfoWindow();

    // マーカーオブジェクト
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    // マーカクーリック時
    google.maps.event.addListener(marker, 'click', function (e) {
        infowindow.setContent('Hello World');
        infowindow.open(map, marker);
    });

    google.maps.event.addListener(map, 'drag', dispLatLng);
    function dispLatLng(){
        var center = map.getCenter();
        $('#centerLat').attr('value', center.lat());
        $('#centerLng').attr('value', center.lng());
    }
});

解説

new google.maps.LatLng(35.671277, 139.718489); (2行目)
緯度経度の取得です。

var options = {} (3~7行目)
ズームレベルや地図の中心、表示タイプなどを指定します。

new google.maps.Map(document.getElementById(“gmap”), options); (8行目)
idとoptionsを指定してMapオブジェクトを作成しています。

new google.maps.InfoWindow(); (11行目)
マーカークリックでウィンドウを出すためオブジェクトを作成しています。

new google.maps.Marker({}); (14行目)
マーカーを置く位置を緯度経度で指定してMapオブジェクトに追加します。

google.maps.event.addListener({}); (20行目)
マーカーをクリックすることでHello Worldと出力させています。

addListener(map, ‘drag’, dispLatLng); (25行目)
このように定義すると独自で設定したメソッドが利用できます。
例では地図の中心の緯度経度を隠しフィールドに持たせています。

jQuery 郵便番号から住所を自動入力 AjaxZip3.0

ここでは郵便番号から住所を自動入力してくれるAjaxZip3.0の紹介をしていきます。

ajaxzip2

デモはこちら
http://office-goto.info/demo/ajaxzip3/

AjaxZip3.0の公式サイト
https://code.google.com/p/ajaxzip3/

head内で読み込み

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>

jQueryを読み込まなくても大丈夫でした。
また、2.0と違い、ファイルをダウンロードして、読み込ませる必要がなくなりました。

html

郵便番号
<input type="text" name="pos1" style="width:50px; ime-mode:disabled;" />
&nbsp;-&nbsp;
<input type="text" name="pos2" style="width:50px; ime-mode:disabled;" onKeyUp="AjaxZip3.zip2addr('pos1','pos2','pref','city');"/>
都道府県
<select name="pref">
    <option value="">--</option>
    <option value='北海道'>北海道</option><option value='青森県'>青森県</option>
    <option value='岩手県'>岩手県</option><option value='宮城県'>宮城県</option>
    <option value='秋田県'>秋田県</option><option value='山形県'>山形県</option>
    <option value='福島県'>福島県</option><option value='茨城県'>茨城県</option>
    <option value='栃木県'>栃木県</option><option value='群馬県'>群馬県</option>
    <option value='埼玉県'>埼玉県</option><option value='千葉県'>千葉県</option>
    <option value='東京都'>東京都</option><option value='神奈川県'>神奈川県</option>
    <option value='新潟県'>新潟県</option><option value='富山県'>富山県</option>
    <option value='石川県'>石川県</option><option value='福井県'>福井県</option>
    <option value='山梨県'>山梨県</option><option value='長野県'>長野県</option>
    <option value='岐阜県'>岐阜県</option><option value='静岡県'>静岡県</option>
    <option value='愛知県'>愛知県</option><option value='三重県'>三重県</option>
    <option value='滋賀県'>滋賀県</option><option value='京都府'>京都府</option>
    <option value='大阪府'>大阪府</option><option value='兵庫県'>兵庫県</option>
    <option value='奈良県'>奈良県</option><option value='和歌山県'>和歌山県</option>
    <option value='鳥取県'>鳥取県</option><option value='島根県'>島根県</option>
    <option value='岡山県'>岡山県</option><option value='広島県'>広島県</option>
    <option value='山口県'>山口県</option><option value='徳島県'>徳島県</option>
    <option value='香川県'>香川県</option><option value='愛媛県'>愛媛県</option>
    <option value='高知県'>高知県</option><option value='福岡県'>福岡県</option>
    <option value='佐賀県'>佐賀県</option><option value='長崎県'>長崎県</option>
    <option value='熊本県'>熊本県</option><option value='大分県'>大分県</option>
    <option value='宮崎県'>宮崎県</option><option value='鹿児島県'>鹿児島県</option>
    <option value='沖縄県'>沖縄県</option>
</select>
市区町村
<input type="text" name="city" />
番地等
<input type="text" name="address" />

解説

onKeyUp=”…” (4行目)
表示させるinputタグのnameで指定します。

関連記事
jQuery 郵便番号から住所を自動入力 AjaxZip2.0
http://office-goto.info/javascript-jquery/ajaxzip2-0/

jQuery Camera 画像スライドショー

ここではjQuery 画像スライドショーを簡単に実装するCameraプラグインの紹介をしていきます。

camera

デモはこちら
http://office-goto.info/demo/camera/

ダウンロードはこちら
http://www.pixedelic.com/plugins/camera/

headで読み込み

<link href="camera/css/camera.css" rel="stylesheet" type="text/css">
<script src="camera/scripts/jquery.min.js"></script>
<script src="camera/scripts/jquery.mobile.customized.min.js"></script>
<script src="camera/scripts/jquery.easing.1.3.js"></script>
<script src="camera/scripts/camera.min.js"></script>

パラメーターの設定

jQuery(function(){
    jQuery('.camera_wrap').camera({
        autoAdvance: true,        // スライド
        fx: 'simpleFade',         // エフェクト
        loader: 'none',           // ローダータイプ
        loaderColor: '#eeeeee',   // 色
        loaderBgColor: '#222222', // 背景色
        loaderOpacity: .5,        // 透明度
        loaderStroke: 5,          // ストローク
        navigation: false,        // ←→画像
        pagination: true,         // ページネーション
        playPause: false,         // 再生停止切り替え
        time: 3000                // 画像切り替え秒数
    });
});

body

<div class="camera_wrap">
    <div data-src="images1.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption1</em>
        </div>
    </div>
    <div data-src="images2.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption2</em>
        </div>
    </div>
    <div data-src="images3.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption3</em>
        </div>
    </div>
    <div data-src="images4.jpg">
        <div class="camera_caption fadeFromBottom">
            <em>Caption4</em>
        </div>
    </div>
</div>

画像の読み込みにはdata-src=”images1.jpg”を指定して
キャプションを表示させる際はclass=”camera_caption fadeFromBottom”で囲んでください。

fx
‘random’,’simpleFade’, ‘curtainTopLeft’, ‘curtainTopRight’, ‘curtainBottomLeft’, ‘curtainBottomRight’, ‘curtainSliceLeft’, ‘curtainSliceRight’, ‘blindCurtainTopLeft’, ‘blindCurtainTopRight’, ‘blindCurtainBottomLeft’, ‘blindCurtainBottomRight’, ‘blindCurtainSliceBottom’, ‘blindCurtainSliceTop’, ‘stampede’, ‘mosaic’, ‘mosaicReverse’, ‘mosaicRandom’, ‘mosaicSpiral’, ‘mosaicSpiralReverse’, ‘topLeftBottomRight’, ‘bottomRightTopLeft’, ‘bottomLeftTopRight’, ‘bottomLeftTopRight’, ‘scrollLeft’, ‘scrollRight’, ‘scrollHorz’, ‘scrollBottom’, ‘scrollTop’
沢山のエフェクトがあるのでいろいろ試してみてください。