忍者ブログ

技術メモ

Home > ブログ > > [PR] Home > ブログ > Ajax > 【Asp.netでのGoogle Maps Apiの利用方法】

【Asp.netでのGoogle Maps Apiの利用方法】

1.ライセンスの取得
  以下のURLよりAPIキーを取得する
  http://code.google.com/intl/ja/apis/maps/
  ※利用サイトURLと動作URLが異なると正しく
    動作しないので注意
  ※APIキーは、<script src></script>タグで囲われた
    部分になるので控えていたほうが良い

2.画面の設定
  GoogleMapを表示させたいページに以下のコントロールを
  設置しプロパティを設定する
  ①ScriptManager
    Scriptsにメンバを追加し、PathにAPIキーを設定する
  ②Panel
    Height,Widthに任意の値を設定
    ※設定しないとGoogleMapが表示されない

3.スクリプトの設定
  以下のソースを貼り付け

 [緯度・経度で指定する場合]
  ─────────────────────────────────
    var map = null;

    // ページ・ロード時に呼び出されるイベント・ハンドラ
    function pageLoad() {

      // 使用しているブラウザがGoogleマップに対応しているかを判定
      if (GBrowserIsCompatible) {

        // 「id=gmap」で定義された領域に地図を表示
        //(ナビゲーションや表示位置、種類を定義)
        map = new GMap2($get('pnlMap'));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        var point = new GLatLng(" + latitude + ", " + longitude +
        var marker = new GMarker(point);
        map.setCenter(point, 17);
        map.setMapType(G_NORMAL_MAP);  
        map.addOverlay(marker);  

        var builder = new Sys.StringBuilder();
        builder.append('<a href=""' + result.Url + '"">');
        builder.append(result.Place + '</a><br />');
        builder.append('" + hotelname + "');

        // マーカをクリックした場合に、バルーンを表示
        GEvent.addListener(
          marker,
          'click',
          function(){
            marker.openInfoWindowHtml(builder.toString());
          }
        ); 
      }
    }
  ─────────────────────────────────

 [住所で指定する場合]
--------------------------------------------------------------------------------
    var map = null;
    // ページ・ロード時に呼び出されるイベント・ハンドラ
    function pageLoad() {
      // 使用しているブラウザがGoogleマップに対応しているかを判定
      if (GBrowserIsCompatible) {
        // 「id=gmap」で定義された領域に地図を表示
        //(ナビゲーションや表示位置、種類を定義)
        map = new GMap2($get('pnlMap'));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        var geocoder = new GClientGeocoder();
        geocoder.getLatLng(
            '"+ address +"',
            function(point) {
                if(!point){
                    alert('住所情報が正しくありません。');
                }else{
                    var marker = new GMarker(point);
                    map.setCenter(point, 17);
                    map.setMapType(G_NORMAL_MAP);  
                    map.addOverlay(marker);  
                    var builder = new Sys.StringBuilder();
                    builder.append('" + hotelname + "');
                    // マーカをクリックした場合に、バルーンを表示
                    GEvent.addListener(
                      marker,
                      'click',
                      function(){
                        marker.openInfoWindowHtml(builder.toString());
                      }
                    ); 
                }
            }
        );
      }
    }
--------------------------------------------------------------------------------

 

PR

Comment0 Comment

Comment Form

  • お名前name
  • タイトルtitle
  • メールアドレスmail address
  • URLurl
  • コメントcomment
  • パスワードpassword

PAGE TOP