webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

複数のカスタマイズしたgooglemapsを配置する(ここでは6つ)

js/outline.jsの内容

// JavaScript Document

function initialize() {
var latlng_01 = new google.maps.LatLng(35.700122, 139.776031);
var myOptions_01 = {
zoom: 17,
center: latlng_01,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_01 = new google.maps.Map(document.getElementById("map_canvas_01"), myOptions_01);
var marker = new google.maps.Marker({
position: latlng_01,
map: map_01
});

var latlng_02 = new google.maps.LatLng(34.680533, 135.510132);
var myOptions_02 = {
zoom: 17,
center: latlng_02,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_02 = new google.maps.Map(document.getElementById("map_canvas_02"), myOptions_02);
var marker = new google.maps.Marker({
position: latlng_02,
map: map_02
});

var latlng_03 = new google.maps.LatLng(35.003861, 135.751226);
var myOptions_03 = {
zoom: 17,
center: latlng_03,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_03 = new google.maps.Map(document.getElementById("map_canvas_03"), myOptions_03);
var marker = new google.maps.Marker({
position: latlng_03,
map: map_03
});

var latlng_04 = new google.maps.LatLng(35.625393, 135.061006);
var myOptions_04 = {
zoom: 17,
center: latlng_04,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_04 = new google.maps.Map(document.getElementById("map_canvas_04"), myOptions_04);
var marker = new google.maps.Marker({
position: latlng_04,
map: map_04
});

var latlng_05 = new google.maps.LatLng(35.982359, 139.963494);
var myOptions_05 = {
zoom: 17,
center: latlng_05,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_05 = new google.maps.Map(document.getElementById("map_canvas_05"), myOptions_05);
var marker = new google.maps.Marker({
position: latlng_05,
map: map_05
});

var latlng_06 = new google.maps.LatLng(34.887385, 135.744679);
var myOptions_06 = {
zoom: 17,
center: latlng_06,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map_06 = new google.maps.Map(document.getElementById("map_canvas_06"), myOptions_06);
var marker = new google.maps.Marker({
position: latlng_06,
map: map_06
});
}
initialize();

 html 地図をレイアウトする場所に記述する内容

<div id="map_canvas_01" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_02" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_03" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_04" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_05" class="googleMaps" style="width:700px;height:300px;"></div>

<div id="map_canvas_06" class="googleMaps" style="width:700px;height:300px;"></div>

 

bodyの閉じタグの前に記述

<!-- googlemaps API -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script src="js/outline.js"></script>