スポンサードリンク

アイコンが表示されていないただの地図にアイコン（マーカー）を追加する方法

Posted by 管理人 on 2013年4月30日 Leave a comment (0) Go to comments

 

このデモマップに複数のマーカーを表示させることは出来ますか？・・とのコメントを頂きました。出来ます。基本的にもともとのソースは変更せずに、足りないソースを追加していきます。

 

1.アイコンの表示設定

地図にどんなアイコンを表示させましょうか。Google Mapの標準アイコンもあれば、自作アイコンなどもありますよね。ここでは、Googel Mapで使用されている標準アイコンを使うことにします。

表現のソースはコチラのページ ”マーカー（アイコン）の種類、画像、サイズ、位置、影を変更する” の「サンプル4」にしましょう。

var customIcons =
{
	kouen:
	{
	icon: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
	shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png'
	},
	suizokukan:
	{
	icon: 'http://maps.google.co.jp/mapfiles/ms/icons/fishing.png',
	shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/fishing.shadow.png'
	},
	onsen:
	{
	icon: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png',
	shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png'
	}
};

 

2.アイコンの座標指定

アイコンを地図のどの座標に表示させるのか指定しなければなりませんね。

複数のマーカー（アイコン）を表示させる場合に便利と思うのがこの記述。ご参照下さい。”外部XMLファイルでなく内部ソースにマーカー用の配列を記述する”

 

3.マーカー座標の読み込み

表示するアイコン画像を選んで、そのアイコンをどの座標に表示させるのか決定したら、それを地図上に表示させなければなりません。つまり各マーカーの座標を読み込む必要があります。

	var markers = [
	['公園1', 35.760191,140.061629,'kouen'],
	['公園2', 35.643033,139.860592,'kouen'],
	['公園3', 35.596286,140.141172,'kouen'],
	['温泉1', 35.805307,140.16651,'onsen'],
	['温泉2',35.717602,139.980167,'onsen'],
	['温泉3', 35.42295,139.89739,'onsen'],
	['水族館1',36.333294,140.593817,'suizokukan'],
	['水族館2', 35.442851,139.644607,'suizokukan'],
	['水族館3', 35.728681,139.719765,'suizokukan']
	];

	for (var i = 0; i < markers.length; i++)
	{
	var marker = markers[i];
	var name = marker[0];
	var latlng = new google.maps.LatLng(marker[1], marker[2]);
	var category =  marker[3];
	var html = '<div style="height: 100px; width: 200px"><b>'+name+'</b>'  ;
	createMarker(latlng,html,map,category,name)
	}

marker[0]には、名前を。

marker[1]と[2]には、座標を。

marker[3]にはカテゴリ、つまり表示させるアイコンの画像を指定します。

地図にアイコンを表示させたら、インフォウィンドウを開きたいですよね。var htmlで、”name”を表示するように指定します。

最後に関数createMarkerを実行します。

以上を最初に走らせる関数function initialize()の中に収納します。

 

4.関数createMarker

ここでは受け取った変数によりマーカーを表示させます。

var marker = new google.maps.Marker(
	{
	map: map,
	position: latlng,
	icon: icon.icon,
	shadow: icon.shadow,
	title: name
	});

つづいて、マーカーをクリックしたらインフォウィンドウが開くようにします。

	google.maps.event.addListener(marker, 'click', function()
	{
	infoWindow.setContent(html);
	infoWindow.open(map,marker);
	});

以上で準備は終わりです。

 さて、「100%画面表示用ドライブルート検索」のデモマップのソースに追加していきます。　下記ソースで赤字が追加したところです。

お試し下さい。もともとのソースもいじっていません。ただ上記を追加しただけです。

 

————————————————————————————————————————–

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>マップ（地図）内にHTMLを表示させる。ドライブルート検索/Google Maps JavaScript API V3</title>
<meta name="keywords" content="マップ,HTML,表示,透明,Google Maps API V3" />
<meta name="description" content="マップ内HTML表示部を半透明にする。Google Maps JavaScript API V3" />
<!--ここからGoogle Maps v3用-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" />
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/util.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://waox.main.jp/maps/common/localsearch-v3/jGoogleBarV3.js"></script>

<script type="text/javascript">
    var center = new google.maps.LatLng(35.71976, 139.69666);
    var zoom = 10;
    var mapTypeId = google.maps.MapTypeId.ROADMAP
</script>
<script type="text/javascript">
//<![CDATA[

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var origin = null;
var destination = null;
var waypoints = [];
var directionmarkers = [];
var directionsVisible = false;

google.load('search','1'); //◆ローカルサーチ用

var infoWindow = new google.maps.InfoWindow();

var customIcons =
{
 kouen:
 {
 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
 shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png'
 },
 suizokukan:
 {
 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/fishing.png',
 shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/fishing.shadow.png'
 },
 onsen:
 {
 icon: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png',
 shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png'
 }
};

function createMarker(latlng,html,map,category,name)
{
 var icon = customIcons[category] || {};
 var marker = new google.maps.Marker(
 {
 map: map,
 position: latlng,
 icon: icon.icon,
 shadow: icon.shadow,
 title: name
 });
 google.maps.event.addListener(marker, 'click', function()
 {
 infoWindow.setContent(html);
 infoWindow.open(map,marker);
 });
} 

function initialize() 
{
	var myOptions = 
	{
	navigationControl: true,
        	navigationControlOptions: 
		{
		style: google.maps.NavigationControlStyle.DEFAULT,
		position: google.maps.ControlPosition.LEFT_TOP
		},
		mapTypeControl: true,
		mapTypeControlOptions: 
		{
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
		position: google.maps.ControlPosition.TOP_RIGHT
		},
		scaleControl: true,
		scaleControlOptions: 
		{
		//◆指定無しの場合左下になる
		},
　　　　	zoom: zoom,
　　　　	center: center,
　　　　	mapTypeId: mapTypeId
	};

	//◆ローカルサーチ用
	gbarOptions={};

	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var gbar=new window.jeremy.jGoogleBar(map,gbarOptions) //◆ローカルサーチ用
	map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(gbar.container); //◆ローカルサーチ用

        directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});
　　　　directionsDisplay.setMap(map);
　　　　directionsDisplay.setPanel(document.getElementById("directionsPanel"));

　　　　google.maps.event.addListener(directionsDisplay, 'directions_changed', function() 
　　　　{//◆総距離合計
　　　　computeTotalDistance(directionsDisplay.directions);
　　　　});

　　　　google.maps.event.addListener(map, 'click', function(event) 
　　　　{
　　　　　　　　if (origin == null) 
　　　　　　　　{
		origin = event.latLng;
　　　　　　　　addMarker(origin);
　　　　　　　　} 
　　　　　　　　else if (destination == null) 
　　　　　　　　{
　　　　　　　　destination = event.latLng;
　　　　　　　　addMarker(destination);
　　　　　　　　} 
　　　　　　　　else 
　　　　　　　　{
　　　　　　　　　　　　if (waypoints.length < 9) 
　　　　　　　　　　　　{
　　　　　　　　　　　　waypoints.push({ location: destination, stopover: true });
　　　　　　　　　　　　destination = event.latLng;
　　　　　　　　　　　　addMarker(destination);

　　　　　　　　　　　　} 
　　　　　　　　　　　　else 
　　　　　　　　　　　　{
　　　　　　　　　　　　alert("Way Pointは、これ以上設定できません。");
　　　　　　　　　　　　}
　　　　　　　　}
　　　　});

 var markers = [
 ['公園1', 35.760191,140.061629,'kouen'],
 ['公園2', 35.643033,139.860592,'kouen'],
 ['公園3', 35.596286,140.141172,'kouen'],
 ['温泉1', 35.805307,140.16651,'onsen'],
 ['温泉2',35.717602,139.980167,'onsen'],
 ['温泉3', 35.42295,139.89739,'onsen'],
 ['水族館1',36.333294,140.593817,'suizokukan'],
 ['水族館2', 35.442851,139.644607,'suizokukan'],
 ['水族館3', 35.728681,139.719765,'suizokukan']
 ];

 for (var i = 0; i < markers.length; i++)
 {
 var marker = markers[i];
 var name = marker[0];
 var latlng = new google.maps.LatLng(marker[1], marker[2]);
 var category = marker[3];
 var html = '<div style="height: 100px; width: 200px"><b>'+name+'</b>' ;
 createMarker(latlng,html,map,category,name)
 }
}

function addMarker(latlng) 
{
　　　　directionmarkers.push(new google.maps.Marker(
　　　　{
　　　　position: latlng, 
　　　　map: map,
　　　　draggable: false,//◆追加
　　　　title: '追加できます（最大9箇所）。',//◆追加
　　　　icon: "http://maps.google.com/mapfiles/marker" + String.fromCharCode(directionmarkers.length + 65) + ".png"
　　　　}));    
}

function calcRoute() 
{
　　　　if (origin == null) 
　　　　{
　　　　alert("スタート地点をクリックして下さい。");
　　　　return;
　　　　}

　　　　if (destination == null) 
　　　　{
　　　　alert("終点をクリックして下さい。");
　　　　return;
　　　　}

　　　　var mode;
　　　　switch (document.getElementById("mode").value) 
　　　　{
　　　　case "driving":
　　　　mode = google.maps.DirectionsTravelMode.DRIVING;
　　　　break;
　　　　case "walking":
　　　　mode = google.maps.DirectionsTravelMode.WALKING;
　　　　break;
　　　　}

　　　　var request = 
　　　　{
　　　　origin: origin,
　　　　destination: destination,
　　　　waypoints: waypoints,
　　　　travelMode: mode,
　　　　optimizeWaypoints: document.getElementById('optimize').checked,
　　　　avoidHighways: document.getElementById('highways').checked,
　　　　avoidTolls: document.getElementById('tolls').checked
　　　　};

　　　　directionsService.route(request, function(response, status) 
　　　　{
　　　　　　　　if (status == google.maps.DirectionsStatus.OK) 
　　　　　　　　{
　　　　　　　　directionsDisplay.setDirections(response);
　　　　　　　　}
　　　　});

　　　　clearMarkers();
　　　　directionsVisible = true;
}

function updateMode() 
{
　　　　if (directionsVisible) 
　　　　{
　　　　calcRoute();
　　　　}
}

function clearMarkers() 
{
　　　　for (var i = 0; i < directionmarkers.length; i++) 
　　　　{
　　　　directionmarkers[i].setMap(null);
　　　　}
}

function clearWaypoints() 
{
	directionmarkers = [];
	origin = null;
	destination = null;
	waypoints = [];
	directionsVisible = true;
}

//◆総距離合計
function computeTotalDistance(result) 
{
	var total = 0;
	var myroute = result.routes[0];
　　　　for (i = 0; i < myroute.legs.length; i++) 
　　　　{
　　　　total += myroute.legs[i].distance.value;
　　　　}
　　　　total = total / 1000.
　　　　document.getElementById("total").innerHTML = total + " km";
}   

function reset() 
{
clearMarkers();
clearWaypoints();
directionsDisplay.setMap(null);
directionsDisplay.setPanel(null);
directionsDisplay = new google.maps.DirectionsRenderer({draggable: true});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
　　　　//◆総距離合計リセット
　　　　google.maps.event.addListener(directionsDisplay, 'directions_changed', function()
　　　　{
　　　　computeTotalDistance(directionsDisplay.directions);
　　　　});
}
google.setOnLoadCallback(initialize);//◆ローカルサーチ用
//]]>
</script>
<style>
#map_canvas {
 height: 100% ;
}

html{
height:100%;
}

body{
height:100%;
margin:0px;
font-family: Helvetica,Arial;
}

#distance{
position: fixed;
z-index:100;
top: 30px;
left:500px;
padding:10px;
background:#fff;
}

#inside{
color : black;
position: fixed;
z-index:100;
top: 10px; 
left:100px;
padding:10px;
background-color:#fff; /* 背景色 */
filter:alpha(opacity=85); 
-moz-opacity:0.8;
opacity:0.8; 
}
</style>
</head>
<body >
<div id="distance" style="font-size : 12px;">トータル距離：<span id="total"></span>
</div>
<div id="inside" style="font-size : 12px;">
<table style="width: 320px"> 
    <tr>
<td width="130">ルート最適化<input type="checkbox" id="optimize" checked="checked" /></td>
<td width="130">一般道優先<input type="checkbox" id="highways"  /></td>
<td width="150">有料道路を避ける<input type="checkbox" id="tolls" /></td>
</tr><tr>
<td width="130"><select id="mode" onchange="updateMode()"> 
          <option value="driving">Car</option> 
          <option value="walking">Walk</option> 
        </select></td>
<td width="130"><input type="button" value="リセット" onclick="reset()" /></td>
<td width="150"><input type="button" value="ルート検索" onclick="calcRoute()" /></td>
</tr></table> 
</div>
<div id="map_canvas"></div>
</body> 
</html>

 

◆ アイコンが表示されていないただの地図にアイコン（マーカー）を追加する方法のサンプルデモ


◆Google Maps JavaScript API V3

関連記事一覧

スポンサードリンク

関連記事一覧

  1. 目的地アイコン（マーカー）をクリックして、ルート検索結果と距離を表示させる方法の続き
  2. マーカー（アイコン）の種類、画像、サイズ、位置、影を変更する／Google Maps API V3 （new google.maps.Marker / new google.maps.MarkerImage)
  3. 地図をクリックして、マーカー（アイコン）を追加／全てのマーカー（アイコン）を一括で削除する方法
  4. マウスドラッグでアイコン（マーカー）をスライドして移動可能にする。google.maps.MarkerのraiseOnDragの指定方法
  5. アイコン（マーカー）+インフォウィンドウ地図に表示／Google Maps JavaScript API V3
Related Posts
Google Maps API v3, Google Maps API v3 アイコン＆マーカー, ,

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">