画像サイズは32×32が適頃。

ピンの画像はこれ → （/note/wp-content/uploads/2012/01/NeedleLeftYellow.png）

ソース

		<!-- GoogleMaps v3 -->

		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript"> 
			var map;
			var infowindow;
			var gmapmark = './common/img/sumu/icon_map_pin_sumu.png';

			function initialize() {
				//例：新宿駅
				var myLatLng = new google.maps.LatLng(35.689921,139.699558);
				var myOptions = {
					zoom: 16,
					center: myLatLng,
					scrollwheel: false,
					mapTypeId: google.maps.MapTypeId.ROADMAP,
					streetViewControl: true
				};
				map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
				var image = new google.maps.MarkerImage( gmapmark , new google.maps.Size(44,41));
				var marker = new google.maps.Marker({
					position: myLatLng, 
					map: map,
					icon: image
				});
			}
			function placeInfoWindow(location) {
				infowindow.setPosition(location);
				infowindow.open(map);
			}
		</script>

		<script type="text/javascript">
			window.onload = function() {
				initialize();
			}
		</script>

		<style type="text/css">
		<!--
		#content #map_canvas img {
			margin: 0;
			height: auto;
			max-width: none;
			width: auto;
		}
		-->
		</style>
		<div class="map_canvas" id="map_canvas" style="border:1px solid #979797; background-color:#e5e3df; width:100%; height:340px; z-index:1">
			<div style="padding:1em; color:gray;">Loading...</div>
		</div>

Twitterウィジェットで要らない要素を消しながら表示する

HTMLソース

<!-- Twitter Widget --> 
<script type="text/javascript" src="http://twitter.com/javascripts/widgets/widget.js"></script> 
 
<script type="text/javascript"> 
new TWTR.Widget({
version: 2,
type: 'search',
rpp: 100,
search: "キーワード -外すキーワード -外すキーワード",
interval: 2000,
title: '',
subject: '',
width: 223,
height: 580,
theme: {
shell: {
//background: '#FFFFEE',
//color: '#FFFFEE'
background: '#FFFFFF',
color: 'none'
},
tweets: {
background: '#FFFFFF',
color: '#333333',
links: '#048091'
}
},
features: {
//scrollbar: false,
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
//behavior: 'default'
behavior: 'all'
}
}).render().start();
</script> 
<!-- /Twitter Widget --> 

CSSソース

/* /Twitter Badge */
.twtr-doc{/*cursor: url(../img/tweet_cursor.png), pointer;*/}/*全体の枠*/
.twtr-bd{}/*メイン部の枠*/

.twtr-profile-img{}
.twtr-profile-img-anchor{}
.twtr-widget{}
.twtr-hyperlink{}
.twtr-atreply{}
.twtr-hashtag{}
.twtr-img{}
.twtr-tweet-wrap{}/*各セルの背景*/
.twtr-avatar{}/*アバター*/
	.twtr-avatar img{}/*アバター*/
.twtr-tweet-text{}/*テキスト部*/
.twtr-user{}/*ユーザ名*/
.twtr-join-conv{}
.twtr-new-results{}
.twtr-results-inner{display:none;}
.twtr-results-hr{display:none;}
.twtr-timestamp{}
.twtr-reply{}
.twtr-tweet{}
.twtr-spinner{}
.twtr-scroll{}
.twtr-fullscreen{}
.twtr-inactive{}
.twtr-reference-tweet{}

.twtr-paused{}
.twtr-hd{display:none;}/*ヘッダ*/
.twtr-ft{display:none;}/*フッタ*/

/* /Twitter Badge */

表示サンプル

引っ掛けるキーワードは「鎌倉」と設定しています。

GoogleMapAPIをこねくり回す程でもなく、座標を入力も手間かけず、APIキーも不要。そんなものぐさ仕様。

また、画像なので軽い、おまけにマウスホイールでページをスクロールすると、
GoogleMapでいきなり拡大に切り替わるのも防げる。そんなメリット。

大雑把にしか出ない場合があるのはご愛嬌。

表示例

東京都現代美術館：〒135-0022 東京都江東区三好4-1-1

ソース

パラメータについてはこちらを参照

<a href="http://maps.google.co.jp/maps?q=【ここに住所】(半角スペース)【施設名など】&hl=ja&ie=UTF8&oe=utf-8" target="_blank">
<img src="http://maps.google.com/maps/api/staticmap?center=【ここに住所】&markers=【ここに住所】&zoom=16&size=480x360&mobile=true&sensor=false" border="0" alt="【施設名など】" />
</a>