サンプル

画像サイズは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>