下記のコードで、GoogoleMapを同じページ上に2つ置く方法が知りたいです。
<div id="container">〜<div>を複製しようとしましたが、片方のMAPだけ空白の表示になってしまします。JavaScriptで緯度などを指定しているので、そもそもJavaScriptのコードが2種類必要だと思うんですが、記述方法がわかりません。よろしくお願いします。
html
1<!DOCTYPE html> 2<html> 3<head lang="ja"> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6 <title>GoogleMap 2個表示</title> 7 <link rel="stylesheet" href="css/style.css"/> 8 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 9 <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 10</head> 11<body> 12 13 14<div id="container"> 15 <header> 16 <h1>ACCESS<small>アクセス</small></h1> 17 </header> 18 19 <div id="map"></div> 20 21 <div class="btn-container"> 22 <a class="btn" target="_blank" href="https://www.google.co.jp/maps/place/KTZ+Ruby+Hill+Securities+Company+Limited/@16.7744006,96.1654695,17z/data=!4m5!3m4!1s0x0:0x46e56a91ce35a02e!8m2!3d16.7743962!4d96.1676632"> 23 大きい地図で見る 24 <i class="fa fa-external-link"></i> 25 </a> 26 </div> 27 28 <footer> 29 <div class="copy"> 30 <p>© hoge inc.</p> 31 </div> 32 </footer> 33</div> 34 35 36<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&v=3.9"></script> 37<script type="text/javascript" src="js/script.js"></script> 38</body> 39</html>
css
1* { 2 margin: 0; 3 padding: 0; 4} 5body{ 6 font-family: 'Open Sans', sans-serif; 7 background: #fafafa; 8} 9a{ 10 text-decoration: none; 11} 12h1{ 13 margin: 35px 0; 14 letter-spacing: .1em; 15} 16h1 small{ 17 display: block; 18 font-size: 16px; 19} 20 21#container{ 22 width: 100%; 23 max-width: 1000px; 24 margin: 0 auto; 25 padding: 0 12px; 26 box-sizing: border-box; 27} 28 29#map { 30 width: 100%; 31 height: 360px; 32} 33 34.copy{ 35 border-top: 1px solid #000; 36 padding: 20px 0; 37 text-align: center; 38} 39 40.btn-container{ 41 text-align: right; 42 margin: 10px 0 100px; 43} 44.btn{ 45 display: inline-block; 46 width: 200px; 47 height: 40px; 48 line-height: 40px; 49 text-align: center; 50 color: #000; 51 border: 1px solid #000; 52 transition-property: color,background-color; 53 transition-duration: 0.3s; 54 transition-timing-function: ease; 55} 56.btn:hover{ 57 background-color: #000; 58 color: #fafafa; 59} 60.btn .fa{ 61 vertical-align: middle; 62 margin: -1px 1px 0; 63} 64 65.info{ 66 width: 300px; 67} 68.info-title{ 69 font-size: 16px; 70 font-weight: bold; 71 margin: 0 0 10px; 72} 73.info-detail{ 74 line-height: 1.7; 75 margin: 0 0 5px; 76} 77.info-footer{ 78 float: right; 79}
javascript
1;(function(){ 2 3 var LATITUDE = 16.774334; // 緯度 6 4 var LONGITUDE = 96.1676; // 経度 4 5 var $map = document.getElementById('map'); 6 7 // Googleマップの表示 8 var map = new google.maps.Map($map,{ 9 center: new google.maps.LatLng(LATITUDE,LONGITUDE), // 地図の中心点 10 mapTypeId: google.maps.MapTypeId.ROADMAP, // 地図の表示タイプ 11 zoom: 18 // 地図のズームレベル 12 }); 13 14 // カスタムマップタイプを設定 15 var myStyledMapType = new google.maps.StyledMapType( 16 [ 17 { 18 "stylers": [ 19 {"hue": "#ff1a00"}, 20 {"invert_lightness": true}, 21 {"saturation": -100}, 22 {"lightness": 33}, 23 {"gamma": 0.5} 24 ] 25 }, 26 { 27 "featureType": "water", 28 "elementType": "geometry", 29 "stylers": [ 30 {"color": "#2D333C"} 31 ] 32 } 33 ] 34 ); 35 // カスタムマップタイプの登録 36 map.mapTypes.set('myMapType', myStyledMapType); 37 map.setMapTypeId('myMapType'); 38 39 // Googleマップにマーカーを設置 40 var marker = new google.maps.Marker({ 41 position: new google.maps.LatLng(LATITUDE,LONGITUDE), // マーカーを立てる位置 42 map: map // マーカーを表示させるGoogleマップオブジェクトを指定 43 }); 44 45 // 情報ウィンドウを生成する 46 var template = document.getElementById('infoWindowTemplate'); 47 var infoWindow = new google.maps.InfoWindow(); 48 infoWindow.setContent(template.innerText); 49 // マーカーをクリックで情報ウィンドウを表示を表示させる 50 google.maps.event.addListener(marker, 'click', function(){ 51 infoWindow.open(map, marker); 52 }); 53})(); 54
回答2件
あなたの回答
tips
プレビュー