グーグルマップを2個以上表示される方法

taka_oj
|
2015年10月5日
| コメントはまだありません
| JavaScript

グーグルマップを２個以上表示させてる場合のサンプルです。
tableタグの場合の表示も合わせて記載しています。

今回使用したjquery.min.jsは、ver2.0.3です。

↓以下が実際のソースサンプルです。

▼JavaScript

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

▼CSS

<style>
*{
	margin:0;
	padding:0;
}
#wrapper {
	width:610px;
}
h4,th {
	width:55px;
}
h4{
	float:left;
	height:300px;
	line-height:200px;
	margin-bottom:3px;

}
#map_canvas1,#map_canvas2{
	float:right;
	margin-bottom:3px;
}
.map_canvas {
	width:550px;
	height:300px;
	border:2px solid #000;
}
table{
	clear:both;
}
</style>

▼HTML

	

		
地図１

		

		
地図２

		

		

			

				地図３
				

			

			

				地図４

デモページは、こちら

JavaScript