More than 5 years have passed since last update.

1ページに複数のGoogle mapを表示

GoogleMap

Last updated at 2016-02-15Posted at 2016-02-15

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>1ページに複数のGoogle mapを表示</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>

<body>

<div id="map_canvas_01"></div>
<div id="map_canvas_02"></div>
<div id="map_canvas_03"></div>


  <script type="text/javascript">
  (function(){
    var latlng = new google.maps.LatLng(34.687298, 135.526226);
    var myOptions = {
        zoom: 15
      , center: latlng
      , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_01 = new google.maps.Map(
        document.getElementById("map_canvas_01")
      , myOptions
    );
	var marker = new google.maps.Marker({ 
		position: latlng, 
		map: map_01
	});
	

    var latlng = new google.maps.LatLng(34.651312, 135.510388);
    var myOptions = {
        zoom: 15
      , center: latlng
      , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_02 = new google.maps.Map(
        document.getElementById("map_canvas_02")
      , myOptions
    );
	var marker = new google.maps.Marker({ 
		position: latlng, 
		map: map_02
	});
	
	
    var latlng = new google.maps.LatLng(34.809425, 135.532477);
    var myOptions = {
        zoom: 12
      , center: latlng
      , mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map_03 = new google.maps.Map(
        document.getElementById("map_canvas_03")
      , myOptions
    );
	var marker = new google.maps.Marker({ 
		position: latlng, 
		map: map_03
	});

  }());
  </script>

</body>
</html>

CSS

#map_canvas_01,
#map_canvas_02,
#map_canvas_03 {
	width:500px;
	min-height: 250px;
}

参考にさせていただいたサイト

[http://temping-amagramer.blogspot.jp/2010/09/google-map-v3.html]

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up