Skip to content

Instantly share code, notes, and snippets.

@hakopako

hakopako/SpotDrawer.js

Last active August 29, 2015 14:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hakopako/cf59aa124241dd762781 to your computer and use it in GitHub Desktop.
Save hakopako/cf59aa124241dd762781 to your computer and use it in GitHub Desktop.
Download ZIP
googlemapに点を打つ
Raw
sample.html
<html>
<head>
<title></title>
<!-- google map api -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="SpotDrawer.js"></script>
</head>
<body>
<div id="canvas" style="width:600px; height:400px"></div>
<script type="text/javascript">
var spots = [
['spot1', 35.630442, 139.882951],
['spot2', 35.630442, 139.882951]
];
SpotDrawer.loadMap(spots, "canvas");
</script>
</body>
</html>
Raw
SpotDrawer.js
/**
* Description :
* 緯度経度の配列から地図上に場所を描画する
* SpotDrawer.load(markers, elementID) を呼べばおｋ
*
* Author :
* shi-man
*/
var SpotDrawer = {
initialize: function(markers, elementId){
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP ,
zoom: 1
};
/* 地図を表示 */
var map = new google.maps.Map(document.getElementById(elementId), mapOptions);
/* 描画する点 */
for (var i = 0; i < markers.length; i++) {
var name = markers[i][0];
var latlng = new google.maps.LatLng(markers[i][1],markers[i][2]);
this.createMarker(latlng,name,map)
}
/* 拡大率調整 */
var lats = this.getMaxMinLat(markers);
var lngs = this.getMaxMinLng(markers);
var sw = new google.maps.LatLng(lats["max"], lngs["min"]);
var ne = new google.maps.LatLng(lats["min"], lngs["max"]);
var bounds = new google.maps.LatLngBounds(sw, ne);
map.fitBounds(bounds);
},
/* 引数で渡された値を変数に代入し｛｝内の処理を実行 */
createMarker: function(latlng,name,map){
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({position: latlng,map: map});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(name);
infoWindow.open(map,marker);
});
},
/**
* 描画する点の散らばりから地図の中心を計算
* @param array markers
* @return float
*/
getMaxMinLat: function(markers){
maxLat = Math.max.apply(Math, markers.map(function(o){return o[1]}));
minLat = Math.min.apply(Math, markers.map(function(o){return o[1]}));
return {"max": maxLat, "min": minLat};
},
/**
* 描画する点の散らばりから地図の中心を計算
* @param array markers
* @return float
*/
getMaxMinLng: function(markers){
maxLng = Math.max.apply(Math, markers.map(function(o){return o[2]}));
minLng = Math.min.apply(Math, markers.map(function(o){return o[2]}));
return {"max": maxLng, "min": minLng};
},
/**
* @param Array markers [[スポット名, 緯度, 経度], .....] みたいな感じで
* @param String elementId 地図を表示させる要素ID名
*/
loadMap: function(markers, elementId){
google.maps.event.addDomListener(window, 'load', this.initialize(markers, elementId));
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment