0
Googleマップ機能に関するヘルプを探しています。私はテンプレートを購入し、それを修正しました。私はjqueryマップに変更を加えませんでしたが、ロードされません。開発者ツールから得られるエラーは次のとおりです。jquery.mapit.js：18パーサーブロック、クロスオリジンスクリプトhttps://maps.googleapis.com/maps/api/js?sensor=falseは、document.writeを介して呼び出されます。 （匿名関数）@ jquery.mapit.js：18 util.js：208 Google Maps API警告：NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keysPA.j @ util.js：208（匿名関数）これは、デバイスのネットワーク接続が不良な場合にブラウザによってブロックされる可能性があります。 @ js？sensor = false：46（無名関数）@js？sensor = false：46（無名関数） @ js？sensor = false：43（無名関数）@js？sensor = false：99（無名関数）@js？sensor = false：43（無名関数） （無名関数）= 99：99（無名関数）@js？sensor = false：43（無名関数）@js？sensor = false：99ic @ js？sensor = false：45hc.Sb @ @ common.js：1js.mapitが機能していません
ここは自分のHTMLです：
<!DOCTYPE html>
<!--Head -->
<head>
<!-- Essential Meta Tags -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- End Essential Meta Tags -->
<!--Title -->
<title>Sandbar Architecture</title>
<!--End Title -->
<!--Meta Datas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!--End Meta Datas -->
<!-- Icons -->
<link rel="shortcut icon" href="images/sa_logo_2.png">
<link rel="icon" href="logoIcon.ico" type="logoIcon.ico">
<!-- END Icon -->
<!-- CSS Files -->
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<!-- Lightbox -->
<link rel="stylesheet" href="css/lightbox.css" />
<!-- Sticky Navigation -->
<link rel="stylesheet" href="css/sticky.min.css" />
<!-- Tooltip -->
<link rel="stylesheet" href="css/tooltip.min.css" />
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- Uikit -->
<link rel="stylesheet" href="css/uikit.min.css" />
<!-- Default Style -->
<link rel="stylesheet" href="css/reset.css" />
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/style.css" />
<!-- End CSS Files -->
<!-- Modernizr Plugin -->
<script src="js/modernizr-custom.js"></script>
<!-- END Modernizr Plugin -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!--End Head -->
<!--Body Starts -->
<body>
<!-- Loading Screen -->
<div id="loader-wrapper">
<div id="loader"></div>
<!-- Loading Image -->
<div class="loader-img"><img src="images/logoIcon.ico" alt="" /></div>
<!-- END Loading Image -->
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- End Loading Screen -->
<!-- Main Container -->
<div class="container">
<!-- Home -->
<div id="gradient" class="fullscreen pattern-black">
<!-- Homepage Content -->
<div class="content">
<!-- Home Title -->
<h4 class="white uppercase ultrabold f-big">Welcome to </h4>
<!-- Home Logo -->
<a href="#" class="logo-text"><img src="images/sa_logo_1.png" alt="" /></a>
<!-- Separator -->
<div class="separator-center"></div>
<!-- Tagline -->
<h4 class="normal f-normal">The site is under construction.</h4>
<h4 class="normal white f-small">We've been a little too busy designing new buildings.</h4>
<!-- Separator -->
<div class="separator-center"></div>
<h4 class="normal white f-small">Tarpon Springs, FL (727) 308-1773</h4>
<a class="normal white f-small" href="mailto:[email protected]?Subject=Email%20Website">E-mail Sandbar</a>
<!-- End Tagline -->
<!-- Home Social Links -->
<div class="social-links">
<a href="https://www.facebook.com/sandbararc/"><i class="fa fa-facebook" title="Facebook"></i></a>
<a href="https://twitter.com/sandbararc"><i class="fa fa-twitter" title="Twitter"></i></a>
<a href="https://www.pinterest.com/sandbararc/"><i class="fa fa-pinterest" title="Pinterest"></i></a>
<a href="https://www.instagram.com/sandbararc/"><i class="fa fa-instagram" title="Instagram"></i></a>
<a href="https://plus.google.com/103733165124002819944"><i class="fa fa-google-plus" title="Google +"></i></a>
</div>
<!-- End Home Social Links -->
</div>
<!-- End Homepage Content -->
</div>
<!-- End Home -->
</div>
<!-- End Main Container -->
<!-- Sections -->
<div class="sections">
<!-- Sticky Navigation -->
<div data-uk-sticky>
<!-- Navigation Starts -->
<div class="navigation">
<!-- Navigation Heading -->
<div class="navbar-header">
<!-- Mobile Navigation Button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- End Mobile Navigation Button -->
<!-- Navigation Logo -->
<a class="navbar-brand" href="#home"><img src="logoIcon.ico" alt="" /></a>
<!-- End Navigation Logo -->
</div>
<!-- End Navigation Heading -->
<!-- Navigation Links -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Navigation List -->
<ul class="nav navbar-nav f-small normal raleway">
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Our Work</a></li>
<li><a href="#social">Social</a></li>
</ul>
<!-- End Navigation List -->
</div>
<!-- End Navigation Links -->
</div>
<!-- Navigation Ends -->
</div>
<!-- End Sticky Navigation -->
<!-- Row -->
<div class="row">
<!-- Section Logo -->
<div class="col-md-6">
<!-- Image Background -->
<div class="image-bg-3 pattern-black">
<!-- Content -->
<div class="content">
<!-- Logo -->
<a href="#home"><img src="images/sa_logo_2.png" alt="" /></a>
</div>
<!-- End Content -->
</div>
<!-- End Image Background -->
</div>
<!-- End Section Logo -->
<!-- About Section -->
<div id="about" class="col-md-6">
<!-- Row -->
<div class="row">
<!-- Section Title -->
<div class="section-title col-md-12">
<!-- Title -->
<h1 class="t-left dark raleway normal uppercase f-medium">About <span class="colored ultrabold">Sandbar</span></h1>
<!-- Separator -->
<div class="separator-small"></div>
</div>
<!-- End Section Title -->
</div>
<!-- End Row -->
<!-- Section Content -->
<div class="section-content">
<!-- Row -->
<div class="row">
<!-- Description Text -->
<p class="gray2 f-small t-left raleway">
Sandbar Architecture is an entrepreneurial and innovative architectural design firm with a broad range of experience. Sandbar has proudly served professional and community organizations and prides itself in not only the quality of their work, but also in their involvement in working to benefit the community.
</p>
<!-- End Description Text -->
</div>
<!-- End Row -->
</div>
<!-- Section Content -->
</div>
<!-- End About Section -->
</div>
<!-- End Row -->
<!-- Row -->
<div class="row">
<!-- Services Section -->
<div id="services" class="col-md-12">
<!-- Row -->
<div class="row">
<!-- Section Title -->
<div class="section-title col-md-12">
<!-- Title -->
<h1 class="t-left dark raleway normal uppercase f-medium">Sandbar<span class="colored ultrabold"> Services</span></h1>
<!-- Separator -->
<div class="separator-small"></div>
</div>
<!-- End Section Title -->
</div>
<!-- End Row -->
<!-- Section Content -->
<div class="section-content">
<!-- Row -->
<div class="row">
<!-- Service 01 -->
<div class="col-md-4 focus">
<!-- Service Title -->
<h2 class="ultrabold f-small uppercase t-left">We design buildings! It's what we do. </h2>
<!-- END Service Title -->
<!-- Service Description -->
<p class="gray2 f-small t-left raleway">We design buildings! It's what we do. Although there are many other services that we can provide, building design is our specialty. As we design, we make an extra effort to help you visualize the design in a way that makes you feel like you are part of the design team. It's all because you are part of the team. After all… it's your building!</p>
<!-- END Service Description -->
</div>
<!-- END Service 01 -->
</div>
<!-- End Row -->
</div>
<!-- End Section Content -->
</div>
<!-- End Services Section -->
</div>
<!-- End Row -->
<!-- Row -->
<div class="row">
<!-- Portfolio Section -->
<div id="portfolio" class="col-md-12">
<!-- Row -->
<div class="row">
<!-- Section Title -->
<div class="section-title col-md-12">
<!-- Title -->
<h1 class="t-left dark raleway normal uppercase f-medium">Our <span class="colored ultrabold">Work</span></h1>
<!-- Separator -->
<div class="separator-small"></div>
</div>
<!-- End Section Title -->
</div>
<!-- End Row -->
<!-- Section Content -->
<div class="section-content">
<!-- Services Section -->
<div id="services" class="col-md-12">
<!-- Section Content -->
<!-- Row -->
<div class="row">
<!-- Service 01 -->
<div class="col-md-4 focus">
<!-- Service Title -->
<h2 class="ultrabold f-small uppercase t-left">Our Work</h2>
<!-- END Service Title -->
<!-- Service Description -->
<p class="gray2 f-small t-left raleway">It's out there, and there is a lot of it. But we are a startup. Our past design work is the copyrighted property of past employers. Out of respect for those who have been mentors and family to us, we will show you our work when we meet in person, but elect to keep it off of our site so that we do not promote hard feelings among friends. </p>
<!-- END Service Description -->
</div>
<!-- END Service 01 -->
</div>
<!-- End Row -->
</div>
<!-- End Services Section -->
<!-- End Section Content -->
</div>
<!-- End Services Section -->
</div>
<!-- End Row -->
<!-- Row -->
<div class="row">
<!-- Map Section -->
<div id="map" class="col-md-6">
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-md-12">
<!-- Map -->
<div id="map_canvas"></div>
<!-- End Map -->
</div>
<!-- End Column -->
</div>
<!-- End Row -->
</div>
<!-- End Clients Section -->
<!-- Information Section -->
<div id="information" class="col-md-6">
<!-- Row -->
<div class="row">
<!-- Section Title -->
<div class="section-title col-md-12">
<!-- Title -->
<h1 class="t-left dark raleway normal uppercase f-medium">Meet <span class="colored ultrabold">Epoch</span></h1>
<!-- Separator -->
<div class="separator-small"></div>
</div>
<!-- End Section Title -->
</div>
<!-- End Row -->
<!-- Section Content -->
<div class="section-content">
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-md-12">
<!-- Description -->
<p class="gray2 f-small t-left raleway">
He and his team just love to do awesome stuff. Epoch is an upcoming group of some creative people. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type.
</p>
<!-- End Description -->
</div>
<!-- End Column -->
</div>
<!-- End Row -->
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-md-4">
<!-- Email -->
<div class="info t-left">
<!-- Icon -->
<i class="fa fa-envelope-o colored"></i>
<!-- Title -->
<h2 class="ultrabold f-small uppercase">Email</h2>
<!-- Email Address -->
<a class="dark" href="mailto:youremailaddress">[email protected]</a>
</div>
<!-- End Email -->
</div>
<!-- End Column -->
<!-- Column -->
<div class="col-md-4">
<!-- Phone -->
<div class="info t-left">
<!-- Icon -->
<i class="fa fa-phone colored"></i>
<!-- Title -->
<h2 class="ultrabold f-small uppercase">Phone</h2>
<!-- Email Address -->
<a class="dark" href="tel:+88016889599">88016889599</a>
</div>
<!-- End Phone -->
</div>
<!-- End Column -->
<!-- Column -->
<div class="col-md-4">
<!-- Address -->
<div class="info t-left no-margin">
<!-- Icon -->
<i class="fa fa-map-o colored"></i>
<!-- Title -->
<h2 class="ultrabold f-small uppercase">Address</h2>
<!-- Office Address -->
<a class="dark" href="tel:+88016889599">23, Bronx, New York</a>
</div>
<!-- End Address -->
</div>
<!-- End Column -->
</div>
<!-- End Row -->
</div>
<!-- End Section Content -->
</div>
<!-- End Information Section -->
</div>
<!-- End Row -->
<!-- Row -->
<div class="row">
<!-- Social Section -->
<div id="social" class="col-md-6">
<!-- Row -->
<div class="row">
<!-- Section Title -->
<div class="section-title col-md-12">
<!-- Title -->
<h1 class="t-left dark raleway normal uppercase f-medium">Stay <span class="colored ultrabold">Updated</span></h1>
<!-- Separator -->
<div class="separator-small"></div>
</div>
<!-- End Section Title -->
</div>
<!-- End Row -->
<!-- Section Content -->
<div class="section-content">
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-md-4 social-link">
<!-- Social Link Icon -->
<a href="https://www.facebook.com/sandbararc/" data-uk-tooltip="{pos:'right'}" title="Facebook"><i class="fa fa-facebook"></i></a>
</div>
<!-- End Column -->
<!-- Column -->
<div class="col-md-4 social-link">
<!-- Social Link Icon -->
<a href="https://www.pinterest.com/sandbararc/" data-uk-tooltip="{pos:'right'}" title="pinterest"><i class="fa fa-pinterest"></i></a>
</div>
<!-- End Column -->
<!-- Column -->
<div class="col-md-4 social-link">
<!-- Social Link Icon -->
<a href="https://www.instagram.com/sandbararc/" data-uk-tooltip="{pos:'right'}" title="instagram"><i class="fa fa-instagram"></i></a>
</div>
<!-- End Column -->
</div>
<!-- End Row -->
<!-- Row -->
<!-- Row -->
<div class="row">
<!-- Column -->
<div class="col-md-4 social-link no-margin">
<!-- Social Link Icon -->
<a href="https://twitter.com/sandbararc" data-uk-tooltip="{pos:'right'}" title="twitter"><i class="fa fa-twitter"></i></a>
</div>
<!-- End Column -->
<!-- Column -->
<div class="col-md-4 social-link no-margin">
<!-- Social Link Icon -->
<a href=""https://plus.google.com/103733165124002819944"" data-uk-tooltip="{pos:'right'}" title="Google Plus"><i class="fa fa-google-plus"></i></a>
</div>
<!-- End Column -->
</div>
<!-- End Row -->
</div>
<!-- End Section Content -->
</div>
<!-- End Social Section -->
</div>
<!-- End Row -->
<!-- Row -->
<div class="row">
<!-- Row -->
<div class="row">
<!-- Footer -->
<div id="footer" class="dark-bg">
<!-- Column -->
<div class="col-md-12">
<a href="http://www.industrialmobileapps.com" class="white f-small">Webmaster: Rob Basso, Supernerd </a>
<div class="tweet"></div>
</div>
<!-- End Column -->
</div>
<!-- End Footer -->
</div>
<!-- End Row -->
</div>
<!-- End Sections -->
</div>
<!-- End Main Container -->
<!-- JavaSript Files -->
<!-- Essential JS Files -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/uikit.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<!-- JS Plugins -->
<!-- Countdown Timer -->
<script type="text/javascript" src="js/jquery.countdown.js"></script>
<!-- Notify Me -->
<script type="text/javascript" src="js/notifyMe.js"></script>
<!-- Responsive Slider -->
<script type="text/javascript" src="js/responsiveslides.min.js"></script>
<!-- Tooltip -->
<script type="text/javascript" src="js/tooltip.min.js"></script>
<!-- Sticky Navigation -->
<script type="text/javascript" src="js/sticky.min.js"></script>
<!-- Lightbox -->
<!--<script type="text/javascript" src="js/lightbox-plus-jquery.min.js"></script>-->
<!-- Animated Gradient -->
<script type="text/javascript" src="js/animated-gradient.js"></script>
<!-- Map -->
<script type="text/javascript" src="js/jquery.mapit.js"></script>
<!-- Skill Knobs -->
<script type="text/javascript" src="js/jquery.knob.min.js"></script>
<!-- Smooth Scrolling -->
<script type="text/javascript" src="js/smoothscrolling.js"></script>
<!-- Skill Knobs Trigger -->
<script>
$(function() {
$(".knob").knob();
});
</script>
<!-- End JavaSript Files -->
</body>
<!-- Body Ends -->
ここでマップのJavascriptです：
/** * MapIt * * @copyright著作権2013、Apacheライセンス@licenseディミトリスKrestos *、バージョン2.0（http://www.opensource.org/licenses/apache2.0.php） * @link http://vdw.staytuned.gr * @version v0.2.2 */
/*利用可能なオプション* *地図の種類：ロードマップ、衛星、HYBRID、地形 *地図のスタイル：偽、GRAYSCALE * */
のdocument.write（ ''）;
;（関数（$、窓、不定）{ が "厳密使用";
$.fn.mapit = function(options) {
var defaults = {
latitude: 37.970996,
longitude: 23.730542,
zoom: 16,
type: 'TERRAIN',
scrollwheel: false,
marker: {
latitude: 37.970996,
longitude: 23.730542,
icon: 'img/map/marker.png',
title: 'Click to Know More',
open: false,
center: true
},
address: '<h2 class="ultrabold dark uppercase" style="padding: 10px;">The <span class="colored">epoch</span></h2><p class="bold gray2 roborto">23, Bronx, New York</p>',
styles: 'GRAYSCALE',
origins: [
['37.936294', '23.947394'],
['37.975669', '23.733868']
]
};
var options = $.extend(defaults, options);
$(this).each(function() {
var $this = $(this);
// Init Map
var directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
scrollwheel: options.scrollwheel,
scaleControl: false,
center: options.marker.center ? new google.maps.LatLng(options.marker.latitude, options.marker.longitude) : new google.maps.LatLng(options.latitude, options.longitude),
zoom: options.zoom,
mapTypeId: eval('google.maps.MapTypeId.' + options.type)
};
var map = new google.maps.Map(document.getElementById($this.attr('id')), mapOptions);
directionsDisplay.setMap(map);
// Styles
if (options.styles) {
var GRAYSCALE_style = [{featureType:"all",elementType:"all",stylers:[{saturation: -100}]}];
var MIDNIGHT_style = [{featureType:'water',stylers:[{color:'#021019'}]},{featureType:'landscape',stylers:[{color:'#08304b'}]},{featureType:'poi',elementType:'geometry',stylers:[{color:'#0c4152'},{lightness:5}]},{featureType:'road.highway',elementType:'geometry.fill',stylers:[{color:'#000000'}]},{featureType:'road.highway',elementType:'geometry.stroke',stylers:[{color:'#0b434f'},{lightness:25}]},{featureType:'road.arterial',elementType:'geometry.fill',stylers:[{color:'#000000'}]},{featureType:'road.arterial',elementType:'geometry.stroke',stylers:[{color:'#0b3d51'},{lightness:16}]},{featureType:'road.local',elementType:'geometry',stylers:[{color:'#000000'}]},{elementType:'labels.text.fill',stylers:[{color:'#ffffff'}]},{elementType:'labels.text.stroke',stylers:[{color:'#000000'},{lightness:13}]},{featureType:'transit',stylers:[{color:'#146474'}]},{featureType:'administrative',elementType:'geometry.fill',stylers:[{color:'#000000'}]},{featureType:'administrative',elementType:'geometry.stroke',stylers:[{color:'#144b53'},{lightness:14},{weight:1.4}]}]
var BLUE_style = [{featureType:'water',stylers:[{color:'#46bcec'},{visibility:'on'}]},{featureType:'landscape',stylers:[{color:'#f2f2f2'}]},{featureType:'road',stylers:[{saturation:-100},{lightness:45}]},{featureType:'road.highway',stylers:[{visibility:'simplified'}]},{featureType:'road.arterial',elementType:'labels.icon',stylers:[{visibility:'off'}]},{featureType:'administrative',elementType:'labels.text.fill',stylers:[{color:'#444444'}]},{featureType:'transit',stylers:[{visibility:'off'}]},{featureType:'poi',stylers:[{visibility:'off'}]}]
var mapType = new google.maps.StyledMapType(eval(options.styles + '_style'), { name: options.styles });
map.mapTypes.set(options.styles, mapType);
map.setMapTypeId(options.styles);
}
// Home Marker
var home = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(options.marker.latitude, options.marker.longitude),
icon: new google.maps.MarkerImage(options.marker.icon),
title: options.marker.title
});
// Add info on the home marker
var info = new google.maps.InfoWindow({
content: options.address
});
// Open the info window immediately
if (options.marker.open) {
info.open(map, home);
} else {
google.maps.event.addListener(home, 'click', function() {
info.open(map, home);
});
};
// Create Markers (locations)
var infowindow = new google.maps.InfoWindow();
var marker, i;
var markers = [];
for (i = 0; i < options.locations; i++) {
// Add Markers
marker = new google.maps.Marker({
position: new google.maps.LatLng(options.locations[i][0], options.locations[i][1]),
map: map,
icon: new google.maps.MarkerImage(options.locations[i][2] || options.marker.icon),
title: options.locations[i][3]
});
// Create an array of the markers
markers.push(marker);
// Init info for each marker
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(options.locations[i][4]);
infowindow.open(map, marker);
}
})(marker, i));
};
// Directions
var directionsService = new google.maps.DirectionsService();
$this.on ('route', function(event, origin) {
var request = {
origin: new google.maps.LatLng(options.origins[origin][0], options.origins[origin][1]),
destination: new google.maps.LatLng(options.marker.latitude, options.marker.longitude),
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
};
});
});
// Hide Markers Once (helper)
$this.on ('hide_all', function() {
for (var i=0; i<options.locations; i++) {
markers[i].setVisible(false);
};
});
// Show Markers Per Category (helper)
$this.on ('show', function(event, category) {
$this.trigger('hide_all');
$this.trigger('reset');
// Set bounds
var bounds = new google.maps.LatLngBounds();
for (var i=0; i<options.locations.length; i++) {
if (options.locations[i][6] == category) {
markers[i].setVisible(true);
};
// Add markers to bounds
bounds.extend(markers[i].position);
};
// Auto focus and center
map.fitBounds(bounds);
});
// Hide Markers Per Category (helper)
$this.on ('hide', function(event, category) {
for (var i=0; i<options.locations.length; i++) {
if (options.locations[i][6] == category) {
markers[i].setVisible(false);
};
};
});
// Clear Markers (helper)
$this.on ('clear', function() {
if (markers) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
};
};
});
$this.on ('reset', function() {
map.setCenter(new google.maps.LatLng(options.latitude, options.longitude), options.zoom);
});
// Hide all locations once
$this.trigger('hide_all');
});
};
$(document).ready(function() { $('[data-toggle="mapit"]').mapit(); });
}）（jQueryの）。
APIキーは、そのスクリプトの中にある......？ –
私はAPIキーを持っていますが、どこに置くべきか分かりません。どこに行くの？ –