Googleマップイベント
マークをクリックしてマップをズームします
前の記事で使用したイギリスのロンドンの地図を引き続き使用しています。
ユーザーがマークをクリックすると、マップをズームする機能が実現されます（マークがクリックされたときにマップズームイベントがバインドされます）。
コードは次のとおりです。
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </</</< Google.maps.latlng（51.508742、-0.120850）; function initialize（）{bar mapprop = {mycenter：mycenter、zoom：5、maptypeid：google.maps.maptypeid.roadmap}; var map = new google.maps.map（documentelementbyid）; var emermap "）; google.maps.marker（{position：mycenter、title： 'click to zoom'}）; marker.setmap（map）; // markergoogle.maps.event.addlistener（マーカー、 'click'、function（）{map.setzoom（9）; map.setcenter（marker.getpositition（）; }）;} google.maps.event.adddomilistener（window、 'load'、initialize）; </script> </head> <body> <div div = "googlemap"> </div> </body> </html>addListener（）イベントハンドラーを使用して、イベントのリスニングを登録します。この方法では、オブジェクトとイベントを使用してリッスンします。指定されたイベントが発生したときに関数が呼び出されます。
マークをリセットします
イベントハンドラーをマップに追加することにより、「センター」属性を変更します。次のコードでは、Center_Changedイベントを使用して、3秒後にセンターポイントをマークします。
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </</</< Google.maps.latlng（51.508742、-0.120850）; function initialize（）{bar mapprop = {mycenter：mycenter、zoom：5、maptypeid：google.maps.maptypeid.roadmap}; var map = new google.maps.map（documentelementbyid）; var emermap "）; google.maps.marker（{position：mycenter、title： 'click to zoom'}）; marker.setmap（map）; // markergoogle.maps.event.addlistener（マーカー、 'click'、function（）{map.setzoom（9）; map.setcenter（marker.getpositition（）; google.maps.event.addlistener（マップ、 'center_changed'、function（）{//マップの中心が変更されてから3秒後、マーカーwindow.settimeout（）{map.panto（）{marker.getposition（）;}、3000）;} initialize）; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>マークをクリックすると、メッセージウィンドウが開きます。
タグをクリックして、情報ウィンドウにテキスト情報を表示します。
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </</</< Google.maps.latlng（51.508742、-0.120850）; function initialize（）{bar mapprop = {mycenter：mycenter、zoom：5、maptypeid：google.maps.maptypeid.roadmap}; var map = new google.maps.map（documentelementbyid）; var emermap "）; Google.maps.marker（{position：mycenter、}）; marker.setmap（map）; var infowindow = new google.maps.infowindow（{content： "hello world！"}）; google.addlistener（marker、 'click'、function（）{infowindow.open（Map、marker）; }）;} google.maps.event.adddomilistener（window、 'load'、initialize）; </script> </head> <body> <div div = "googlemap"> </div> </body> </html>マークを設定し、各マークの情報ウィンドウを開く
ユーザーがマップをクリックしたときにウィンドウを実行します
ユーザーがマップ上の場所をクリックしたら、PlaceMarker（）関数を使用して、指定された位置にマークを配置し、メッセージウィンドウがポップアップします。
例
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym＆sensor = false"> </script> </<script> var mycenter = new google.maps.latlng（51.508742、-0.120850）; function initialize（）{var mapprop = {center：mycenter：mycenter、zoom：5、maptypeid：google.maptypeid.oadmap}; map = new Google.maps.map（document.getElementById（ "googlemap"）、mapprop）; google.maps.event.addlistener（map、 'click'、function（event）{placemarker（event.latlng）;}）;} function placemarker（location）{var marker = new google.maps.marker（{position：location、map：map、}）; var infowindow = new google.maps.infowindow（{content： 'latitude：' + location.lat（） + '<br>経度：' + location.lng（）}）; infowindow.open（map、marker）;} google.maps.event.adddomlistener（window、 'load'、initialize）; </scripize> </head> <body> <div id = "googlemap"> </div> </body> </html>上記は、Googleマップイベントの基本的な知識を編集しています。将来、関連する知識を追加し続けます。このサイトへのご支援ありがとうございます！