JavaScriptプログラムに関する各種メモ書き:タグ「Google」での検索

GoogleによるJavaScriptホスティング(CDN)を使用する

2009年からGoogleが有名なJavaScript(jQuery , prototype.js 等)のホスティングを開始しています。

もちろん運用で使用してもいいのですが、ちょっとしたテスト等には確実に使えます。

使用方法( 最新のjQueryを呼び出す )

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

使用方法(jQuery UI を呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>


使用方法(swfobjectを呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

使用方法(prototype.jsを呼び出す)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>

その他貼りつけソースコードをコピーするサイト

http://scriptsrc.net/

No.795
04/05 17:35

edit

Google
jQuery
prototype.js

Google Maps を住所から自動生成するサンプル ( Google Maps Platform API 使用)

● Google Maps を住所から自動生成するサンプル ( Google Maps Platform API 使用)

PHPや.Net などで動的に出力されるページにGoogle Mapsを埋め込む場合、 「住所を入力して地図を表示」→「埋め込みコードを取得」→「ページに貼り付け」 をやっていたのでは面倒な場合があります。

そこでGoogle Maps API を使用して簡単に地図表示を行います。

● 1. Google Maps PlatformでAPIキーを作成する

アカウント作成(GoogleアカウントがあればOK)が必要です。 ここにログインし、APIキーを作成します。

* APIキーの作成

・新しいプロジェクトを作成する
・作成したプロジェクトで「Maps JavaScript API」「Geo Coding API」を有効にする
・「API」→「Google Maps Platform」を選択し「認証情報」タブを選択する
・「API とサービスの認証情報にアクセスして行います」のリンクをクリックしてAPIキーを作成する
・「認証情報を作成」→「APIキー」を選択すると新しいAPIキーが作成されます。
・「キーの制限」を適宜設定します。

● 2. Google Maps を住所から自動生成するサンプル

html内に Google Map を表示するDIV タグをセット

<div id="my_map" style="width: 600px; height: 600px"></div>

JavaScriptから呼び出す

<script src="https://maps.googleapis.com/maps/api/js?key=<YOUR-API-KEY>&callback=initMapWithAddress" async defer></script>
<script>
var _my_address = '表示させたい地図の住所';
function initMapWithAddress() {
    var opts = {
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    var my_google_map = new google.maps.Map(document.getElementById('my_map'), opts);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode(
      {
        'address': _my_address,
        'region': 'jp'
      },
      function(result, status){
        if(status==google.maps.GeocoderStatus.OK){
            var latlng = result[0].geometry.location;
            my_google_map.setCenter(latlng);
            var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
            google.maps.event.addListener(marker, 'dragend', function(event){
                marker.setTitle(event.latLng.toString());
            });

        }
      }
    );
  }
</script>

なお、地図のサイズは

<div id="google_map" style="width: 600px; height: 600px"></div>

をスタイルで書き換えます。

添付ファイル1
No.824
01/30 12:06

edit

添付ファイル

jQuery
Google