Google Mapsの画像をホームページに切り貼りすると、著作権上問題とされる場合があるので、APIを使って動的に画像を作成してしまえばよい。
■ Google Static Maps API （JavaScriptを使わない方法）
公式ページ ： Static Maps API V2 デベロッパー ガイド
表示例
コード
<html>
<body>
<img src="http://maps.google.com/maps/api/staticmap?center=34.699425,135.496273&zoom=14&size=400x400&maptype=roadmap&sensor=false&markers=color:blue|label:S|34.691327,135.512449&markers=34.69325,135.502213&markers=color:red|label:G|34.693956,135.495948&path=color:0x0000ff|weight:5|34.691327,135.512449|34.691221,135.510603|34.692792,135.505754|34.693321,135.501097|34.694238,135.501055|34.693956,135.495948" height="400" width="400" />
</body>
</html>
<body>
<img src="http://maps.google.com/maps/api/staticmap?center=34.699425,135.496273&zoom=14&size=400x400&maptype=roadmap&sensor=false&markers=color:blue|label:S|34.691327,135.512449&markers=34.69325,135.502213&markers=color:red|label:G|34.693956,135.495948&path=color:0x0000ff|weight:5|34.691327,135.512449|34.691221,135.510603|34.692792,135.505754|34.693321,135.501097|34.694238,135.501055|34.693956,135.495948" height="400" width="400" />
</body>
</html>
■ Google Maps JavaScript API V3
公式ページ ： Google Maps JavaScript API V3 スタート ガイド
表示例
コード
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = initialize;
function initialize() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(34.700554,135.496223),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker1 = new google.maps.Marker({
map: myMap,
position: new google.maps.LatLng(34.691327,135.512449),
icon: "http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png",
title: "中之島公園 剣先",
});
var marker2 = new google.maps.Marker({
map: myMap,
position: new google.maps.LatLng(34.69325,135.502213),
icon: "http://maps.google.co.jp/mapfiles/ms/icons/red-pushpin.png",
title: "大阪市役所",
});
var marker3 = new google.maps.Marker({
map: myMap,
position: new google.maps.LatLng(34.693956,135.495948),
icon: "http://maps.google.co.jp/mapfiles/ms/icons/red.png",
title: "渡辺橋 南詰",
});
var infowindow3 = new google.maps.InfoWindow({
content: "渡辺橋<br/><a href='http://ja.wikipedia.org/wiki/%E6%B8%A1%E8%BE%BA%E6%A9%8B'>Wikipedia</a>",
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(myMap, marker3);
});
var polyline1 = new google.maps.Polyline({
map: myMap,
path: [
new google.maps.LatLng(34.691327,135.512449),
new google.maps.LatLng(34.691221,135.510603),
new google.maps.LatLng(34.692792,135.505754),
new google.maps.LatLng(34.693321,135.501097),
new google.maps.LatLng(34.694238,135.501055),
new google.maps.LatLng(34.693956,135.495948)
],
strokeColor: "blue",
strokeOpacity: 0.5,
strokeWeight: 5,
});
}
</script>
</head>
<body>
<div id="map_canvas" style="float:left;width:400px; height:400px;"></div>
</body>
</html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
window.onload = initialize;
function initialize() {
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(34.700554,135.496223),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker1 = new google.maps.Marker({
map: myMap,
position: new google.maps.LatLng(34.691327,135.512449),
icon: "http://maps.google.co.jp/mapfiles/ms/icons/blue-dot.png",
title: "中之島公園 剣先",
});
var marker2 = new google.maps.Marker({
map: myMap,
position: new google.maps.LatLng(34.69325,135.502213),
icon: "http://maps.google.co.jp/mapfiles/ms/icons/red-pushpin.png",
title: "大阪市役所",
});
var marker3 = new google.maps.Marker({
map: myMap,
position: new google.maps.LatLng(34.693956,135.495948),
icon: "http://maps.google.co.jp/mapfiles/ms/icons/red.png",
title: "渡辺橋 南詰",
});
var infowindow3 = new google.maps.InfoWindow({
content: "渡辺橋<br/><a href='http://ja.wikipedia.org/wiki/%E6%B8%A1%E8%BE%BA%E6%A9%8B'>Wikipedia</a>",
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(myMap, marker3);
});
var polyline1 = new google.maps.Polyline({
map: myMap,
path: [
new google.maps.LatLng(34.691327,135.512449),
new google.maps.LatLng(34.691221,135.510603),
new google.maps.LatLng(34.692792,135.505754),
new google.maps.LatLng(34.693321,135.501097),
new google.maps.LatLng(34.694238,135.501055),
new google.maps.LatLng(34.693956,135.495948)
],
strokeColor: "blue",
strokeOpacity: 0.5,
strokeWeight: 5,
});
}
</script>
</head>
<body>
<div id="map_canvas" style="float:left;width:400px; height:400px;"></div>
</body>
</html>
マーカーで使える画像の一覧は、たとえば、『 アイコンとマーカーのサンプル一覧表（影付き） 』などの個人のホームページを参考にすればよい。
