0
JSFiddleにインタラクティブなGoogleマップの作業用テンプレートを作成しましたが、私のサイト上に1つの作業ファイルを作成する際に地図部分をロードしていません。JSFiddle to HTMLファイル
私はこれを聞いて愚かではあるが、私は非常にアマチュアです - このサイトをまとめてjsfiddleの外で機能させるには、どのような順序/ヘッダーなどが必要ですか？ここ
はjsfiddleです：
http://jsfiddle.net/kamelkid2/drytwvL8/114/
これは私が
一緒
<!DOCTYPE html>
<html>
<style type="text/css">
#map-canvas {
width: 700px;
height: 500px;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
[javascript stuff]
[html div portion]
<!DOCTYPE html>
<html>
<style type="text/css">
#map-canvas {
width: 700px;
height: 500px;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
content: ''
});
// Our markers
markers1 = [
['0', 'Cascade Park - 130 Lynn Dr, Hudson, OH 44236', 41.234830, -81.453479], //updated with guesses
['1', 'Solon Community Park - 33955 Sherbrook Park Dr, Solon, OH 44139', 41.402313, -81.437936], //updated with guesses
['2', 'Middleton Park - 1708 Middleton Rd, Hudson, OH 44236', 41.268963, -81.450649], //updated with guesses
['3', 'Silver Springs Park - 5027 Stow Rd Stow, OH 44224', 41.196766, -81.417072], //updated with guesses
['4', 'Liberty Park - 9385 Liberty Rd Twinsburg, OH 44087', 41.317218, -81.419225], //updated with guesses
['5', 'Sunny Lake Park - 885 E Mennonite Rd Aurora, OH 44202', 41.290323, -81.318730], //updated with guesses
['6', 'Aurora Premium Outlets - 549 S Chillicothe Rd, Aurora, OH 44202', 41.301904, -81.341941] //updated with guesses
];
var items = [
[1,1,1,1,0,1,0,1,1,0,0,1,1,0,0,0,1],
[1,1,1,1,1,1,1,0,1,0,1,1,1,0,0,1,0],
[1,1,1,1,1,1,0,1,1,1,0,1,0,0,0,0,1],
[1,1,1,1,1,0,1,0,1,0,1,1,0,0,0,1,1],
[1,1,1,1,0,1,0,1,1,0,0,1,1,0,0,0,1],
[1,1,1,1,0,1,0,1,1,1,0,1,0,0,1,1,1],
[1,1,1,1,0,1,0,1,0,0,0,1,1,1,1,1,0]
];
//[0] show marker
//[1] has playground
//[2] has baby swing
//[3] has belt swing
//[4] has handicap swing
//[5] toddler friendly
//[6] RF ground
//[7] WC ground
//[8] Pavillion
//[9] Grill
//[10] ramps
//[11] restrooms
//[12] close restrooms
//[13] nursing station
//[14] changing table
//[15] stroller friendly
//[16] walking trails
/**
* Function to init map
*/
function initialize() {
var center = new google.maps.LatLng(41.334830, -81.453479);
var mapOptions = {
zoom: 10,
center: center,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (i = 0; i < markers1.length; i++) {
addMarker(markers1[i]);
}
}
/**
* Function to add marker to map
*/
function addMarker(marker) {
var title = marker[1];
var pos = new google.maps.LatLng(marker[2], marker[3]);
var content = marker[1];
marker1 = new google.maps.Marker({
title: title,
position: pos,
map: map
});
gmarkers1.push(marker1);
// Marker click listener
google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
return function() {
console.log('Gmarker 1 gets pushed');
infowindow.setContent(content);
infowindow.open(map, marker1);
map.panTo(this.getPosition());
}
})(marker1, content));
}
/**
* Function to filter markers by category
*/
filterMarkersPG = function (categorypg) {
//set all to view
for (i = 0; i < markers1.length; i++) {
items[i][0] = 1;
marker = gmarkers1[i];
marker.setVisible(true);
//window.alert("setting all to yes");
}
//import checkbox values
var PlaygroundCheck = document.getElementById("playground").checked;
var BabySwingCheck = document.getElementById("babyswing").checked;
var BeltSwingCheck = document.getElementById("beltswing").checked;
var HandicapSwingCheck = document.getElementById("handicapswing").checked;
var ToddlerFriendlyCheck = document.getElementById("toddlerfriendly").checked;
var RFGroundCheck = document.getElementById("rfground").checked;
var WCGroundCheck = document.getElementById("wcground").checked;
var PavillionCheck = document.getElementById("pavillion").checked;
var GrillCheck = document.getElementById("grill").checked;
var RampsCheck = document.getElementById("ramps").checked;
var RestroomsCheck = document.getElementById("restrooms").checked;
var CloseRestroomsCheck = document.getElementById("closerestrooms").checked;
var NursingStationCheck = document.getElementById("nursingstation").checked;
var ChangingTableCheck = document.getElementById("changingtable").checked;
var StrollerFriendlyCheck = document.getElementById("strollerfriendly").checked;
var WalkingTrailsCheck = document.getElementById("walkingtrails").checked;
//test that it still works
//window.alert(PlaygroundCheck);
//window.alert(BabySwingCheck);
//test if playground checkbox is checked
if (PlaygroundCheck == true) {
//for all sites, loop through playground marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get playground binary
HasPlayground = items[i][1];
marker = gmarkers1[i];
//test if it has a playground
if (HasPlayground == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of playground check
//test if babyswing checkbox is checked
if (BabySwingCheck == true) {
//for all sites, loop through babyswing marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get babyswing binary
HasBabySwing = items[i][2];
marker = gmarkers1[i];
//test if it has a babyswing
if (HasBabySwing == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of baby swing test
//test if beltswing checkbox is checked
if (BeltSwingCheck == true) {
//for all sites, loop through babyswing marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get beltswing binary
HasBeltSwing = items[i][3];
marker = gmarkers1[i];
//test if it has a beltswing
if (HasBeltSwing == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of belt swing test
//test if handicapswing checkbox is checked
if (HandicapSwingCheck == true) {
//for all sites, loop through babyswing marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get handicapswing binary
HasHandicapSwing = items[i][4];
marker = gmarkers1[i];
//test if it has a handicapswing
if (HasHandicapSwing == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of handicap swing test
//test if toddlerfriendly checkbox is checked
if (ToddlerFriendlyCheck == true) {
//for all sites, loop through babyswing marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get handicapswing binary
HasToddlerFriendly = items[i][5];
marker = gmarkers1[i];
//test if it has a handicapswing
if (HasToddlerFriendly == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of ToddlerFriendly swing test
//test if rf ground checkbox is checked
if (RFGroundCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasRFGround = items[i][6];
marker = gmarkers1[i];
//test if it has it
if (HasRFGround == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of RFGround test
//test if wc ground checkbox is checked
if (WCGroundCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasWCGround = items[i][7];
marker = gmarkers1[i];
//test if it has it
if (HasWCGround == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of WCGround test
//test if pavillion checkbox is checked
if (PavillionCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasPavillion = items[i][8];
marker = gmarkers1[i];
//test if it has it
if (HasPavillion == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of pavillion test
//test if grill checkbox is checked
if (GrillCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasGrill = items[i][9];
marker = gmarkers1[i];
//test if it has it
if (HasGrill == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of grill test
//test if ramp checkbox is checked
if (RampsCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasRamps = items[i][10];
marker = gmarkers1[i];
//test if it has it
if (HasRamps == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of ramps test
//test if restrooms checkbox is checked
if (RestroomsCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasRestrooms = items[i][11];
marker = gmarkers1[i];
//test if it has it
if (HasRestrooms == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of restrooms test
//test if close restrooms checkbox is checked
if (CloseRestroomsCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasCloseRestrooms = items[i][12];
marker = gmarkers1[i];
//test if it has it
if (HasCloseRestrooms == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of close restrooms test
//test if nursingstation checkbox is checked
if (NursingStationCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasRamps = items[i][13];
marker = gmarkers1[i];
//test if it has it
if (HasRamps == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of ramps test
//test if changing table checkbox is checked
if (ChangingTableCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasChangingTable = items[i][14];
marker = gmarkers1[i];
//test if it has it
if (HasChangingTable == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of changing table test
//test if stroller friendly checkbox is checked
if (StrollerFriendlyCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasStrollerFriendly = items[i][15];
marker = gmarkers1[i];
//test if it has it
if (HasStrollerFriendly == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of changing table test
//test if walking trails checkbox is checked
if (WalkingTrailsCheck == true) {
//for all sites, loop through marker
for (i = 0; i < markers1.length; i++) {
//if it is still enabled (we dont want to reenable a previously disabled)
if (items[i][0] == 1){
//get binary
HasWalkingTrails = items[i][16];
marker = gmarkers1[i];
//test if it has it
if (HasWalkingTrails == 1){
//set the marker to true (probably redundant)
marker.setVisible(true);
}
else {
//set the marker to false
marker.setVisible(false);
//prevent it from being viewed again in the loop
items[i][0] = 0;
}
}
}
} //end of walking Trails test
}
// Init map
initialize();
</script>
<div id="map-canvas"></div>
<br>
<table>
<tr><u>Required Items (Select All That Apply):</u></tr><br>
<tr>
<td><input type='checkbox' id='playground' onclick="filterMarkersPG(this.value);">Has Playground</td>
<td><input type='checkbox' id='toddlerfriendly' onclick="filterMarkersPG(this.value);">Toddler Friendly</td>
<td><input type='checkbox' id='grill' onclick="filterMarkersPG(this.value);">Has Grill</td>
<td><input type='checkbox' id='nursingstation' onclick="filterMarkersPG(this.value);">Has Nursing Station</td>
</tr>
<tr>
<td><input type='checkbox' id='babyswing' onclick="filterMarkersPG(this.value);">Has Baby Swings</td>
<td><input type='checkbox' id='rfground' onclick="filterMarkersPG(this.value);">Rubber Flooring</td>
<td><input type='checkbox' id='ramps' onclick="filterMarkersPG(this.value);">Has Ramps</td>
<td><input type='checkbox' id='changingtable' onclick="filterMarkersPG(this.value);">Has Changing Table</td>
</tr>
<tr>
<td><input type='checkbox' id='beltswing' onclick="filterMarkersPG(this.value);">Has Belt Swings</td>
<td><input type='checkbox' id='wcground' onclick="filterMarkersPG(this.value);">Wood Chips Flooring</td>
<td><input type='checkbox' id='restrooms' onclick="filterMarkersPG(this.value);">Has Restrooms</td>
<td><input type='checkbox' id='strollerfriendly' onclick="filterMarkersPG(this.value);">Stroller Friendly</td>
</tr>
<tr>
<td><input type='checkbox' id='handicapswing' onclick="filterMarkersPG(this.value);">Has Handicap Swings</td>
<td><input type='checkbox' id='pavillion' onclick="filterMarkersPG(this.value);">Has Pavillion</td>
<td><input type='checkbox' id='closerestrooms' onclick="filterMarkersPG(this.value);">Has Close Restrooms</td>
<td><input type='checkbox' id='walkingtrails' onclick="filterMarkersPG(this.value);">Has Walking Trails</td>
</tr>
</table>
</html>
お返事ありがとうございます。私はまだ苦労しています。私がまだ間違っていることについて助言してもらえますか？これは、私はまた、bodyタグで試してみましたが、私は物事 [jsのもの] [HTMLのもの] –
kamelkid2
を配置しているためですが、それはまだロードされていません。 （私の他のすべての試行と同じように）チェックボックスはロードされますが、マップはありません – kamelkid2
あなたの初期設定項目を 'window.onload = function（）{/ * init stuff here * /}'通常はカスタムJavaScriptの上に表示されます。 jsFiddleはデフォルトでこのハンドラの中にjavascriptを挿入します。 – michaPau