LoginSignup
9

More than 5 years have passed since last update.

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

Last updated at Posted 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]

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9