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 API V3 使用)

PHPやPerlなどで動的に出力されるページにGoogle Mapsを埋め込む場合、

「住所を入力して地図を表示」→「埋め込みコードを取得」→「ページに貼り付け」

をやっていたのでは面倒な場合があります。

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

(ただしWindowsIE6は未対応なので対応したい場合はV2を使用します。)

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

google_map.js

var my_google_map;
var my_google_geo;

function googlemap_init( id_name, addr_name ) {
	var latlng = new google.maps.LatLng(41, 133);
	var opts = {
		zoom: 15,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	my_google_map = new google.maps.Map(document.getElementById(id_name), opts);

	my_google_geo = new google.maps.Geocoder();
	var req = {
		address: addr_name ,
	};
	my_google_geo.geocode(req, geoResultCallback);
}


function geoResultCallback(result, status) {
	if (status != google.maps.GeocoderStatus.OK) {
		alert(status);
	return;
	}
	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());
	});
}

これを読み込んで

html

<script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript" charset="UTF-8"></script>
<script src="googlemap.js" type="text/javascript" charset="UTF-8"></script>
<script>
$(document).ready(function(){
	googlemap_init('google_map', '■表示させたい住所■');
});
</script>

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

で起動します。

■表示させたい住所■を任意の住所に書き換えればOK。

サイズは

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

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


jqueryプラグインはこちら

http://blog.bumberboom.net/archives/monthly/2010_09/google-maps-api-v3-jquery.php

※ なおGoogle Maps APIのバージョン3からAPIコードは必要なくなりました。

添付ファイル1
No.824
09/20 10:54

edit

添付ファイル

jQuery
Google