地図上のアイコンがタップされたタイミングでダイアログを表示する

Monaca

※地図上にアイコンを表示する方法に関しては、ここを参考にして下さい。


<完成イメージ>


<作成手順概要>
1.ダイアログを表示するファンクションを作成する
2.アイコンにイベントハンドラを登録する<作成手順詳細>
1.ダイアログを表示するファンクションを作成する

function markerClick(){
    var ll = this.getLatLng();
    alert("マーカークリック：" + ll.toString());
}

2.アイコンにイベントハンドラを登録する

marker.bind('click', markerClick);      //イベントハンドラの登録


index.html 全体

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript"
            charset="utf-8"
            src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=アプリケーションID">
    </script>

    <script type="text/javascript">
        function init(){
            var ymap = new Y.Map("map");
            ymap.drawMap(new Y.LatLng(35.66572, 139.73100), 17, Y.LayerSetId.NORMAL);
                    
            var marker = new Y.Marker(new Y.LatLng(35.66582,139.73110));
            ymap.addFeature(marker);
            
            marker.bind('click', markerClick);      //イベントハンドラの登録
        }
        
        function markerClick(){
            var ll = this.getLatLng();
            alert("マーカークリック：" + ll.toString());
        }
    </script> 
</head>

<body onload="init()">
    <div id="map" style="width:300px; height:300px"></div>
</body>
</html>

お勧め書籍