-1
なぜ3つのエラーが表示される js？ 1.このページにGoogle Maps APIを複数回追加しました。このページで予期しないエラーが発生する可能性があります。予期しないエラーが発生する可能性があります。 2. GoogleマップのAPIの警告：NoApiKeys 3. GoogleマップのAPIの警告は：私はGoogle Maps APIのエラー
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "//maps.googleapis.com/maps/api/js?key=AIzaSyCtUEDsZQxJvGCRtBNCHGSCmS51kJkuruo&libraries=places&sensor=false&callback=initialize";
document.body.appendChild(script);
});
var icon2 = "https://d2rw3as29v290b.cloudfront.net/instances/130/uploads/ckeditor/picture/data/3224/icon2.png";
var icon1 = "https://d2rw3as29v290b.cloudfront.net/instances/130/uploads/ckeditor/picture/data/3223/icon1.png";
function attachClickHandler(marker){
var elem = $(marker.url);
google.maps.event.addListener(marker, 'click', function() {
console.log(marker.title);
$('html, body').animate({
scrollTop: elem.offset().top
-250 }, 2000);
}),
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(icon2);
}),
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(icon1);
})
$(marker.url).on("mouseover", function() {
marker.setIcon(icon2);
});
$(marker.url).on("mouseout", function() {
marker.setIcon(icon1);
});
}
//div hover change icon
$(document).ready(function() {
// initiate Google maps
initialize();
});
function initialize() {
var styledMapType = new google.maps.StyledMapType(
[
{elementType: 'labels.text.fill', stylers: [{color: '#705135'}]},
{elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]},
{
featureType: 'administrative',
elementType: 'geometry.stroke',
stylers: [{color: '#c9b2a6'}]
},
{
featureType: 'water',
elementType: 'geometry.fill',
stylers: [{color: '#457cbc'}]
},
{
featureType: 'water',
elementType: 'labels.text.fill',
stylers: [{color: '#fff'}]
},
{
featureType: "poi",
elementType: "labels.text.stroke",
stylers: [
{"color": "#cd5cb9"},
{
"visibility": "off"
}
]
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [
{
"color": "#458035"
}
]
},
{
featureType: "transit.line",
elementType: "labels.text.stroke",
stylers: [
{
"color": "#cd5cb9"
}
]
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{
"color": "#457cbc"
}
]
},
{
featureType: "water",
elementType: "geometry.stroke",
stylers: [
{
"visibility": "simplified"
}
]
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [
{
"color": "#ffffff"
}
]
},
{
featureType: "water",
elementType: "labels.text.stroke",
stylers: [
{
"visibility": "off"
}
]
}
],
{name: 'Styled Map'});
var map;
var bounds = new google.maps.LatLngBounds();
var latlng = new google.maps.LatLng(33.8688, 151.2093);
var mapOptions = {
mapTypeId: 'roadmap',
center: latlng,
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
scaleControl: true,
gestureHandling: 'greedy',
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
}
};
var latitude,
longitude,
dataName,
coor,
coor,
markers;
var markers = [];
google.maps.event.addDomListener(window, "load", function() {
});
$(".location").each(function() {
latitude = $(this).attr('data-latitude');
longitude = $(this).attr('data-longitude');
dataName = $(this).attr('data-name');
dataId = $(this).attr('id');
// Multiple Markers
markers.push([dataName, latitude, longitude, "#" + dataId])
});
console.log(markers);
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_content"), mapOptions);
map.setTilt(45);
// Info Window Content
var infoWindowContent = [
// ['<div class="info_content">' +
// '<h3>London Eye</h3>' +
// '<p>The London Eye is a giant Ferris wheel situated on the banks of the River Thames. The entire structure is 135 metres (443 ft) tall and the wheel has a diameter of 120 metres (394 ft).</p>' + '</div>'],
// ['<div class="info_content">' +
// '<h3>Palace of Westminster</h3>' +
// '<p>The Palace of Westminster is the meeting place of the House of Commons and the House of Lords, the two houses of the Parliament of the United Kingdom. Commonly known as the Houses of Parliament after its tenants.</p>' +
// '</div>']
];
// Display multiple markers on a map
var icon1 = "https://d2rw3as29v290b.cloudfront.net/instances/130/uploads/ckeditor/picture/data/3223/icon1.png";
var infoWindow = new google.maps.InfoWindow(), marker, i;
// Loop through our array of markers & place each one on the map
for(i = 0; i < markers.length; i++) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
icon: icon1,
title: markers[i][0],
url: markers[i][3]
});
attachClickHandler(marker);
// Allow each marker to have an info window
// google.maps.event.addListener(marker, 'click', (function(marker, i) {
// return function() {
// infoWindow.setContent(infoWindowContent[i][0]);
// infoWindow.open(map, marker);
// }
// })(marker, i));
// Automatically center the map fitting all markers on the screen
map.fitBounds(bounds);
}
// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
this.setZoom(map.getZoom());
if (this.getZoom() > 15) {
this.setZoom(15);
}
google.maps.event.removeListener(boundsListener);
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
}
$(window).on('resize', function(event){
var windowSize = $(window).width(); // Could've done $(this).width()
if(windowSize < 992){
moveSearchNew();
} else if(windowSize > 991){
moveSearchOld();
}
});
marker = "https://d2rw3as29v290b.cloudfront.net/instances/130/uploads/ckeditor/picture/data/3223/icon1.png";<div id="map_cont">
<div id="map_content" class="mapping"></div>
</div>
<ul class="locations">
<li
class="location"
id="23779"
data-name=""
data-latitude="-33.8688197"
data-longitude="151.2092955">
<a href="/space//listings/23779"></a>
</li>
<li
class="location"
id="31571"
data-name="Sydney CBD Townhall - Luggage/Stock/Archive Files/Light Equipment Storage at a Studio "
data-latitude="-33.8718491"
data-longitude="151.2061548">
<a href="/space//listings/photography-studio-for-hire-inc-photography-equipments">Sydney CBD Townhall - Luggage/Stock/Archive Files/Light Equipment Storage at a Studio </a>
</li>
<li
class="location"
id="37317"
data-name="asd"
data-latitude="-33.8688197"
data-longitude="151.2092955">
<a href="/space//listings/asd">asd</a>
</li>
<li
class="location"
id="12615"
data-name="Lockup Storage Garage in Drummoyne cnr Victoria Rd & Lyons Rd"
data-latitude="-33.85142"
data-longitude="151.1537932">
<a href="/space//listings/lockup-storage-garage-in-drummoyne-cnr-victoria-rd-lyons-rd">Lockup Storage Garage in Drummoyne cnr Victoria Rd & Lyons Rd</a>
</li>
<li
class="location"
id="21916"
data-name="Garage Title"
data-latitude="-33.8688197"
data-longitude="151.2092955">
<a href="/space//listings/garage-title">Garage Title</a>
</li>
<li
class="location"
id="23913"
data-name="Sydney - Lockup Garage Parking or Storage"
data-latitude="-33.8719133"
data-longitude="151.204284">
<a href="/space//listings/sydney-lockup-garage-parking-or-storage">Sydney - Lockup Garage Parking or Storage</a>
</li>
<li
class="location"
id="30172"
data-name="World Tower Parking Space"
data-latitude="-33.876613"
data-longitude="151.206883">
<a href="/space//listings/world-tower-parking-space">World Tower Parking Space</a>
</li>
<li
class="location"
id="30733"
data-name="Sydney CBD - Secure Undercover Parking Space"
data-latitude="-33.877274"
data-longitude="151.2066911">
<a href="/space//listings/sydney-cbd-secure-undercover-parking-space-30730">Sydney CBD - Secure Undercover Parking Space</a>
</li>
<li
class="location"
id="30882"
data-name="Sydney CBD Secure Car Park"
data-latitude="-33.8755146"
data-longitude="151.2051445">
<a href="/space//listings/sydney-cbd-secure-car-park">Sydney CBD Secure Car Park</a>
</li>
<li
class="location"
id="30835"
data-name="Sydney CBD Secure Parking Space (Sedan type of vehicle would fit in)"
data-latitude="-33.8779309"
data-longitude="151.2108431">
<a href="/space//listings/sydney-cbd-secure-parking-space">Sydney CBD Secure Parking Space (Sedan type of vehicle would fit in)</a>
</li>
<li
class="location"
id="35195"
data-name="Large Storage Cage in centre of city near Town Hall"
data-latitude="-33.877274"
data-longitude="151.2066911">
<a href="/space//listings/large-storage-cage-in-centre-of-city-near-town-hall">Large Storage Cage in centre of city near Town Hall</a>
</li>
<li
class="location"
id="36060"
data-name="Sydney - Secure Undercover Car Spot in CBD"
data-latitude="-33.8689295"
data-longitude="151.2043204">
<a href="/space//listings/sydney-secure-undercover-car-spot-in-cbd">Sydney - Secure Undercover Car Spot in CBD</a>
</li>
<li
class="location"
id="37313"
data-name="Garage in Sydney with 24/7 Access"
data-latitude="-33.9399228"
data-longitude="151.1752764">
<a href="/space//listings/garage-in-sydney-with-24-7-access-37313">Garage in Sydney with 24/7 Access</a>
</li>
<li
class="location"
id="37306"
data-name="Garage in Sydney with Partial Access"
data-latitude="-33.8687953"
data-longitude="151.2099375">
<a href="/space//listings/garage-in-sydney-with-partial-access-37306">Garage in Sydney with Partial Access</a>
</li>
<li
class="location"
id="37328"
data-name="Garage in Sydney with Partial Access"
data-latitude="-33.8686041"
data-longitude="151.2087514">
<a href="/space//listings/test-case-001-37324">Garage in Sydney with Partial Access</a>
</li>
<li
class="location"
id="19322"
data-name="Parking Available On Harris St Pyrmont NSW"
data-latitude="-33.8727121"
data-longitude="151.195554">
<a href="/space//listings/parking-available-on-harris-st-pyrmont-nsw">Parking Available On Harris St Pyrmont NSW</a>
</li>
<li
class="location"
id="30342"
data-name="Sydney CBD Secure Undercover Car Space (shared with the owner)"
data-latitude="-33.8734741"
data-longitude="151.2044913">
<a href="/space//listings/sydney-cbd-secure-undercover-car-space">Sydney CBD Secure Undercover Car Space (shared with the owner)</a>
</li>
<li
class="location"
id="29648"
data-name="Sydney CBD Secure Undercover Parking Space (Sedan type of vehicle would fit in) "
data-latitude="-33.8779309"
data-longitude="151.2108431">
<a href="/space//listings/sydney-cbd-secure-undercover-parking-space">Sydney CBD Secure Undercover Parking Space (Sedan type of vehicle would fit in) </a>
</li>
<li
class="location"
id="31882"
data-name="Sydney CBD Secure Car Space In The City"
data-latitude="-33.8755266"
data-longitude="151.2047196">
<a href="/space//listings/sydney-cbd-secure-car-space-in-the-city">Sydney CBD Secure Car Space In The City</a>
</li>
<li
class="location"
id="36197"
data-name="4 square meters storage CBD Sydney"
data-latitude="-33.8744294"
data-longitude="151.204579">
<a href="/space//listings/4-square-meters-storage-cbd-sydney">4 square meters storage CBD Sydney</a>
</li>
</ul>
を使用したコードで、私のポストを更新しました
コードを投稿してください。 –