Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Last active February 13, 2016 15:00
Show Gist options
  • Save feo52/3f861d0fc7aa73a86ee2 to your computer and use it in GitHub Desktop.
Save feo52/3f861d0fc7aa73a86ee2 to your computer and use it in GitHub Desktop.
Download ZIP
AxGmap ( Google Map ) & Masonry
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; margin: 0; }
.axgmap {
width: 100%;
height: 100%;
max-width: 900px;
max-height: 600px;
margin: 0 auto;
box-shadow: 0 0 0 1px #eee;
}
.axgmap .gmaplink {
display: none;
}
.grid {
max-width: 900px; /* 900=(140+40)x5 */
margin: 0 auto;
box-shadow: 0 0 0 1px #eee;
}
.grid .grid-item { width: 140px; }
.grid .grid-item.x2 { width: 320px; }
.grid .grid-item.x3 { width: 500px; }
.grid .grid-item.x4 { width: 680px; }
.grid .grid-item.x5 { width: 860px; }
.grid .grid-item {
margin: 10px;
padding: 10px;
box-shadow: 0 0 0 1px #eee;
}
.grid .grid-prop {
width:100%;
height: 0;
border: 0;
margin: 0;
padding: 0;
box-shadow: 0 0 0 0px rgba(0,0,0,0);
}
.grid .grid-flat {
margin: 0 10px;
padding: 0 10px;
box-shadow: 0 0 0 0px rgba(0,0,0,0);
}
.grid .grid-flat h3 {
margin-bottom: 0;
color: #777777;
}
.grid .grid-item p {
font-size: 12px;
color: #999999;
}
.grid .grid-item h4 {
color: #777777;
}
</style>
</head>
<body>
<!--
<div id="gmap" class="axgmap" data-latlng="39, 138" data-zoom="5">
-->
<div id="gmap" class="grid">
<div class="grid-item grid-flat" data-latlng="90,0"></div>
<div class="grid-item grid-prop" data-latlng="90,0"></div>
<div class="grid-item grid-flat" data-latlng="90,0"><h3>東日本<p><a class="gmaplink" href="?area=12">[地図]</a></p></h3></div>
<div class="grid-item grid-prop" data-latlng="90,0"></div>
<div class="grid-item " data-latlng="43.062083,141.354389" data-title="札幌市 " id="CITY01100"><h4>札幌市 </h4><p>〒060-8611<br />北海道札幌市中央区北1条西2丁目 </p><p><a class="gmaplink" href="?data=CITY01100">[地図]</a></p></div>
<div class="grid-item " data-latlng="38.268222,140.869417" data-title="仙台市 " id="CITY04100"><h4>仙台市 </h4><p>〒980-8671<br />宮城県仙台市青葉区国分町三丁目7番1号 </p><p><a class="gmaplink" href="?data=CITY04100">[地図]</a></p></div>
<div class="grid-item " data-latlng="35.607278,140.106361" data-title="千葉市 " id="CITY12100"><h4>千葉市 </h4><p>〒260-8722<br />千葉県千葉市中央区千葉港1番1号 </p><p><a class="gmaplink" href="?data=CITY12100">[地図]</a></p></div>
<div class="grid-item " data-latlng="35.443972,139.638250" data-title="横浜市 " id="CITY14100"><h4>横浜市 </h4><p>〒231-0017<br />神奈川県横浜市中区港町1丁目1番地 </p><p><a class="gmaplink" href="?data=CITY14100">[地図]</a></p></div>
<div class="grid-item " data-latlng="35.530889,139.703000" data-title="川崎市 " id="CITY14130"><h4>川崎市 </h4><p>〒210-8577<br />神奈川県川崎市川崎区宮本町1番地 </p><p><a class="gmaplink" href="?data=CITY14130">[地図]</a></p></div>
<div class="grid-item x2 " data-latlng="35.181389,136.906389" data-title="名古屋市" id="CITY23100"><h4>名古屋市</h4><p>〒460-8508<br />愛知県名古屋市中区三の丸三丁目1番1号 </p><p><a class="gmaplink" href="?data=CITY23100">[地図]</a></p></div>
<div class="grid-item grid-prop" data-latlng="90,0"></div>
<div class="grid-item grid-flat" data-latlng="90,0"><h3>西日本<p><a class="gmaplink" href="?area=18">[地図]</a></p></h3></div>
<div class="grid-item grid-prop" data-latlng="90,0"></div>
<div class="grid-item x2 " data-latlng="35.011611,135.768111" data-title="京都市 " id="CITY26100"><h4>京都市 </h4><p>〒604-8571<br />京都府京都市中京区寺町通御池上る上本能寺前町488番地</p><p><a class="gmaplink" href="?data=CITY26100">[地図]</a></p></div>
<div class="grid-item " data-latlng="34.693750,135.502111" data-title="大阪市 " id="CITY27100"><h4>大阪市 </h4><p>〒530-8201<br />大阪府大阪市北区中之島一丁目3番20号 </p><p><a class="gmaplink" href="?data=CITY27100">[地図]</a></p></div>
<div class="grid-item " data-latlng="34.690167,135.195444" data-title="神戸市 " id="CITY28100"><h4>神戸市 </h4><p>〒650-8570<br />兵庫県神戸市中央区加納町六丁目5番1号 </p><p><a class="gmaplink" href="?data=CITY28100">[地図]</a></p></div>
<div class="grid-item " data-latlng="34.385250,132.455306" data-title="広島市 " id="CITY34100"><h4>広島市 </h4><p>〒730-8586<br />広島県広島市中区国泰寺町一丁目6番34号</p><p><a class="gmaplink" href="?data=CITY34100">[地図]</a></p></div>
<div class="grid-item x2 " data-latlng="33.883417,130.875194" data-title="北九州市" id="CITY40100"><h4>北九州市</h4><p>〒803-8501<br />福岡県北九州市小倉北区城内1番1号 </p><p><a class="gmaplink" href="?data=CITY40100">[地図]</a></p></div>
<div class="grid-item " data-latlng="33.590139,130.401722" data-title="福岡市 " id="CITY40130"><h4>福岡市 </h4><p>〒810-8620<br />福岡県福岡市中央区天神一丁目8番1号 </p><p><a class="gmaplink" href="?data=CITY40130">[地図]</a></p></div>
</div>
<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<script>
(function(){
//緯度経度縮尺初期値設定
var tmpLat = 39;
var tmpLng = 138;
var tmpZoom = 5;
var tmpArea = null;
var tmpData = null;
//URL取得
var tmp1 = location.href.split("?")[1];
if( tmp1 != null )
{
var tmp2 = tmp1.split("&");
for( i in tmp2 )
{
//URL引数取得
var tmp3 = tmp2[i].split("=");
if( tmp3[0] == "lat" ){ tmpLat = parseFloat( tmp3[1] ); }
if( tmp3[0] == "lng" ){ tmpLng = parseFloat( tmp3[1] ); }
if( tmp3[0] == "zoom" ){ tmpZoom = parseFloat( tmp3[1] ); }
if( tmp3[0] == "area" ){ tmpArea = parseInt ( tmp3[1] ); }
if( tmp3[0] == "data" ){ tmpData = tmp3[1]; }
}
if( tmpArea != null )
{
switch( tmpArea ){
case 1: tmpLat=43.063968; tmpLng=141.347899; tmpZoom=7; break; //北海道
case 2: tmpLat=39.703531; tmpLng=141.152667; tmpZoom=7; break; //東北
case 3: tmpLat=35.689521; tmpLng=139.691704; tmpZoom=9; break; //関東
case 4: tmpLat=36.695290; tmpLng=137.211338; tmpZoom=8; break; //北陸
case 5: tmpLat=34.976978; tmpLng=138.383054; tmpZoom=9; break; //東海
case 6: tmpLat=35.180188; tmpLng=136.906565; tmpZoom=9; break; //中部
case 7: tmpLat=34.686316; tmpLng=135.519711; tmpZoom=9; break; //関西
case 8: tmpLat=34.396560; tmpLng=132.459622; tmpZoom=9; break; //中国
case 9: tmpLat=33.559705; tmpLng=133.531080; tmpZoom=9; break; //四国
case 10: tmpLat=32.789828; tmpLng=130.741667; tmpZoom=8; break; //九州
case 12: tmpLat=39.703531; tmpLng=141.152667; tmpZoom=6; break; //東日本
case 14: tmpLat=36.695290; tmpLng=137.211338; tmpZoom=5; break; //全国
case 16: tmpLat=35.180188; tmpLng=136.906565; tmpZoom=7; break; //中日本
case 18: tmpLat=34.396560; tmpLng=132.459622; tmpZoom=7; break; //西日本
}
}
if( tmpData != null )
{
//ID緯度経度取得
var f = document.getElementById(tmpData);
if( f != null )
{
var tmp4 = f.getAttribute('data-latlng');
var tmp5 = tmp4.split(",");
tmpLat = parseFloat( tmp5[0] );
tmpLng = parseFloat( tmp5[1] );
tmpZoom = 15;
//IDの風船を表示
f.setAttribute('data-window-open', "true");
}
}
//地図中心緯度経度縮尺設定
var e = document.getElementById("gmap");
if( e != null )
{
e.setAttribute('data-latlng', tmpLat + ", " + tmpLng);
e.setAttribute('data-zoom' , tmpZoom);
e.className = 'axgmap';
}
}
}());
</script>
<script>
$(function(){
$('.grid').imagesLoaded(function(){
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
/* columnWidth: 180, */
});
});
});
$(window).resize(function(){
$('.grid').masonry('layout');
});
</script>
<script src="jquery.axgmap.js"></script>
</body>
</html>
Raw
jquery.axgmap.js
/*
* AxGmap version 1.2.1
* (jQuery plugin)
*
* URL : https://github.com/Nouris-Inc/jquery-axgmap/
* Author : tsaeki (http://nouris.jp/)
* Copyright : copyright (c) 2015 Nouris Inc.
* License : licensed under the MIT licenses.
*/
;(function($, window, document, undefined) {
var AxGmap = function (element){
this.element = $(element);
this.gmap;
this.markers = [];
this.infoWindows = [];
this.init();
}
AxGmap.prototype = {
init: function (){
this.createGmap();
this.fin();
},
createGmap: function(){
var options = this.createGmapOption();
var children = this.element.children();
this.gmap = new google.maps.Map(this.element[0], options);
this.createMarker(children);
this.showMapStatus();
},
createMarker: function(elements){
var self = this;
var openWindowSet = null;
elements.each(function(index){
var element = $(this);
var windowOpen = false;
var options = self.createMarkerOption(element);
if (options.windowOpen) {
windowOpen = true;
delete options.windowOpen;
}
var marker = new google.maps.Marker(options);
self.markers.push(marker);
var content = element.html().trim();
if (content.length) {
var infoWindowSet = self.createInfoWindowSet(content, marker);
self.infoWindows.push(infoWindowSet);
if (windowOpen) {
openWindowSet = infoWindowSet;
};
}
});
if (openWindowSet) {
self.openInfoWindow(openWindowSet);
};
},
createInfoWindowSet: function(content, marker){
var self = this;
var infoWindow = new google.maps.InfoWindow({content: content});
google.maps.event.addListener(marker, 'click', function(){
self.openInfoWindow({'infoWindow':infoWindow, 'marker':marker});
});
return {'infoWindow':infoWindow, 'marker':marker};
},
createLatLng: function(element){
var lat = 0;
var lng = 0;
var latlng = element.data('latlng') ? element.data('latlng') : this.element.data('latlng');
if (latlng) {
var split = latlng.split(',');
lat = this.parseNum(split[0].trim());
lng = this.parseNum(split[1].trim());
};
return new google.maps.LatLng(lat, lng);
},
createGmapOption: function(){
var self = this;
var options = {
center: this.createLatLng(this.element),
zoom: 9
};
if (this.element.data("mapType")) {
var mapType = this.element.data("mapType").toUpperCase();
$.extend(options, {'mapTypeId': google.maps.MapTypeId[mapType]});
};
if (this.element.data("mapWidth") != null) {
this.element.width(this.element.data("mapWidth"));
};
if (this.element.data("mapHeight") != null) {
this.element.height(this.element.data("mapHeight"));
};
var properties = ["zoom", "draggable", "scrollwheel", "maxZoom", "minZoom", "mapTypeControl", "overviewMapControl", "panControl", "rotateControl", "scaleControl", "streetViewControl", "zoomControl"];
$.each(properties, function(index, property){
if (self.element.data(property) != null) {
options[property] = self.element.data(property);
}
});
return options;
},
createMarkerOption: function(element){
var options = {
map: this.gmap,
position: this.createLatLng(element)
};
if (element.data('title') != null) {
options['title'] = element.data('title');
}
if (element.data('markerImage') != null) {
options['icon'] = element.data('markerImage');
}
if (element.data('windowOpen')) {
options['windowOpen'] = true;
}
return options;
},
openInfoWindow: function(infoWindowSet){
var self = this;
infoWindowSet.infoWindow.open(self.gmap, infoWindowSet.marker);
$.each(self.infoWindows, function(index, val){
if(val.infoWindow != infoWindowSet.infoWindow){
val.infoWindow.close();
}
});
},
parseNum: function(val){
return (typeof val == null) ? 0.0 : parseFloat(val);
},
showMapStatus: function(){
var self = this;
if (!this.element.data("mapStatus")) {
return;
};
var status = $('<div style="color:#000; background-color:#fff; border:solid 1px #ccc; width:' + self.element.width() + 'px"><dl style="margin:1em;"><dt>Center LatLng</dt><dd class="axgmap-status-latlng"></dd><dt>Zoom</dt><dd class="axgmap-status-zoom"></dd><dt>Right Click LatLng</dt><dd class="axgmap-status-rightclick">none</dd></dl></div>');
status.insertAfter(this.element);
google.maps.event.addListener(this.gmap, 'idle', function(){
$('.axgmap-status-latlng', status).empty().append(self.gmap.getCenter().lat().toFixed(6) + ', ' + self.gmap.getCenter().lng().toFixed(6));
$('.axgmap-status-zoom', status).empty().append(self.gmap.getZoom());
});
google.maps.event.addListener(this.gmap, 'rightclick', function(event){
$('.axgmap-status-rightclick', status).empty().append(event.latLng.lat().toFixed(6) + ', ' + event.latLng.lng().toFixed(6));
});
},
fin: function(){
if (!AxGmap.didCreated) {
AxGmap.didCreated = true;
$('<style>.gm-style img{max-width:inherit;}</style>').appendTo('head');
};
}
};
$.fn.axgmap = function(){
return this.each(function(){
if(!$.data(this, 'AxGmap')){
$.data(this, 'AxGmap', new AxGmap(this));
}
});
};
$(function() {
$('.axgmap').axgmap();
});
})(jQuery, window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment