Last active
December 18, 2015 01:58
-
-
Save tyoshikawa1106/5707278 to your computer and use it in GitHub Desktop.
VisualforceとGoogleMap
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <apex:page standardController="Account" showHeader="false" sidebar="false"> | |
| <head> | |
| <base target="_blank"/> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8"/> | |
| <script type="text/javascript" | |
| src="https://maps.google.com/maps/api/js?sensor=false"></script> | |
| <script type="text/javascript"> | |
| function initialize() { | |
| // 緯度・経度取得 | |
| var latlng = new google.maps.LatLng({!account.LatLngTt__c}); | |
| // マップ設定情報 | |
| var opts = { | |
| zoom: 15, | |
| center: latlng, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP | |
| }; | |
| // マップ情報 | |
| var myMap = new google.maps.Map(document.getElementById("myMap"), opts); | |
| // マーカーの表示 | |
| var marker = new google.maps.Marker({ | |
| position: latlng, | |
| map: myMap, | |
| title:'{!account.Name}' | |
| }); | |
| // 吹き出しの内容 | |
| var contentStr = '<p><a href="{!account.Website}"><font size="3" color="blue">{!account.Name}</font></a><br/><br/>〒{!account.BillingPostalCode}<br/>{!account.BillingState}{!account.BillingCity}{!account.BillingStreet}</p>'; | |
| // 吹き出しの表示 | |
| var infowindow = new google.maps.InfoWindow({ | |
| content: contentStr, | |
| size: new google.maps.Size(200,30) | |
| }); | |
| // マーカークリック時の処理 | |
| google.maps.event.addListener(marker, 'click', function() { | |
| infowindow.open(myMap, marker); | |
| myMap.setZoom(15); | |
| myMap.panTo(latlng); | |
| }); | |
| // マーカークリック処理呼び出し | |
| google.maps.event.trigger(marker, 'click'); | |
| // マーカー追加 | |
| var latlng2 = new google.maps.LatLng(35.681382,139.766084); | |
| // マーカーの表示 | |
| var marker2 = new google.maps.Marker({ | |
| position: latlng2, | |
| map: myMap, | |
| }); | |
| // マーカークリック時の処理 | |
| google.maps.event.addListener(marker2, 'click', function() { | |
| myMap.setZoom(15); | |
| myMap.panTo(latlng2); | |
| }); | |
| new google.maps.Circle({ | |
| center: latlng2, // 中心点(google.maps.LatLng) | |
| fillColor: '#ff0000', // 塗りつぶし色 | |
| fillOpacity: 0.1, // 塗りつぶし透過度（0: 透明 ⇔ 1:不透明） | |
| map: myMap, // 表示させる地図（google.maps.Map） | |
| radius: 12000, // 半径（ｍ） | |
| strokeColor: '#ff0000', // 外周色 | |
| strokeOpacity: 1, // 外周透過度（0: 透明 ⇔ 1:不透明） | |
| strokeWeight: 1 // 外周太さ（ピクセル） | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body onload="initialize()"> | |
| <div id="myMap" style="width:auto; height:500px"></div> | |
| </body> | |
| </apex:page> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment