我一直在使用带有时髦地图的gmaps练习我的网站，并且无法正确使用javascript。任何人都可以伸出援手，我知道我很接近https://jsfiddle.net/t78kgeaw/
HTML
<div id="maps">
</div>
JS
// Create and Initialise the Map (required) our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 17,
scrollwheel: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(45.088530, -64.367951), // Nova Scotia
// How you would like to style the map.
// This is where you would paste any style found on [Snazzy Maps][1].
// copy the Styles from Snazzy maps, and paste that style info after the word "styles:"
styles: [
{
"featureType": "all",
"elementType": "geometry",
"stylers": [
{
"hue": "#ff4400"
},
{
"saturation": -68
},
{
"lightness": -4
},
{
"gamma": 0.72
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [
{
"gamma": 3.1
},
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [
{
"saturation": "-12"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#269793"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#972663"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#972663"
},
{
"lightness": "13"
},
{
"gamma": "1.99"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#972663"
},
{
"visibility": "on"
},
{
"saturation": "83"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [
{
"saturation": -64
},
{
"lightness": 16
},
{
"gamma": 0.47
},
{
"weight": 2.7
},
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"lightness": -48
},
{
"gamma": 1.2
},
{
"saturation": -23
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"gamma": 0.44
},
{
"saturation": -33
},
{
"color": "#266397"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"gamma": 0.77
},
{
"saturation": 65
},
{
"lightness": 99
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"gamma": 0.11
},
{
"weight": 5.6
},
{
"saturation": 99
},
{
"lightness": -86
}
]
}
]
var mapElement = document.getElementById('maps');
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Following section, you can create your info window content using html markup
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
'<div id="bodyContent">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
'(last visited June 22, 2009).</p>'+
'</div>'+
'</div>';
// Define the image to use for the map marker (58 x 44 px)
var image = 'http://uploads.webflow.com/537f700d5bb0a27f34444d0c/53b054015eb95f024f4d7c5e_map_marker.png';
// Define the Lattitude and Longitude for the map location
var myLatLng = new google.maps.LatLng(45.088530, -64.367951);
// Define the map marker characteristics
var mapMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: 'Frostbyte Interactive'
});
// Following Lines are needed if you use the Info Window to display content when map marker is clicked
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Following line turns the marker, into a clickable button and when clicked, opens the info window
google.maps.event.addListener(mapMarker, 'click', function() {
infowindow.open(map, mapMarker);
});
}
CSS
#maps img {
width: 500px;
max-width: none;
}
答案 0 :(得分：0)
试试这个。为我工作。
HTML：
<div id="maps">
</div>
JS：
// Create and Initialise the Map (required) our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 17,
scrollwheel: false,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(45.088530, -64.367951), // Nova Scotia
// How you would like to style the map.
// This is where you would paste any style found on [Snazzy Maps][1].
// copy the Styles from Snazzy maps, and paste that style info after the word "styles:"
styles: [
{
"featureType": "all",
"elementType": "geometry",
"stylers": [
{
"hue": "#ff4400"
},
{
"saturation": -68
},
{
"lightness": -4
},
{
"gamma": 0.72
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry",
"stylers": [
{
"gamma": 3.1
},
{
"color": "#ffffff"
}
]
},
{
"featureType": "poi.park",
"elementType": "all",
"stylers": [
{
"saturation": "-12"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#269793"
}
]
},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#972663"
}
]
},
{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#972663"
},
{
"lightness": "13"
},
{
"gamma": "1.99"
}
]
},
{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#972663"
},
{
"visibility": "on"
},
{
"saturation": "83"
}
]
},
{
"featureType": "transit",
"elementType": "labels.text.stroke",
"stylers": [
{
"saturation": -64
},
{
"lightness": 16
},
{
"gamma": 0.47
},
{
"weight": 2.7
},
{
"visibility": "off"
}
]
},
{
"featureType": "transit.line",
"elementType": "geometry",
"stylers": [
{
"lightness": -48
},
{
"gamma": 1.2
},
{
"saturation": -23
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"gamma": 0.44
},
{
"saturation": -33
},
{
"color": "#266397"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"gamma": 0.77
},
{
"saturation": 65
},
{
"lightness": 99
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"gamma": 0.11
},
{
"weight": 5.6
},
{
"saturation": 99
},
{
"lightness": -86
}
]
}
]
};
var mapElement = document.getElementById('maps');
// Create the Google Map using out element and options defined above
var map = new google.maps.Map(mapElement, mapOptions);
// Following section, you can create your info window content using html markup
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
'</div>' +
'<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
'<div id="bodyContent">' +
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the ' +
'Northern Territory, central Australia. It lies 335 km (208 mi) ' +
'south west of the nearest large town, Alice Springs; 450 km ' +
'(280 mi) by road. Kata Tjuta and Uluru are the two major ' +
'features of the Uluru - Kata Tjuta National Park. Uluru is ' +
'sacred to the Pitjantjatjara and Yankunytjatjara, the ' +
'Aboriginal people of the area. It has many springs, waterholes, ' +
'rock caves and ancient paintings. Uluru is listed as a World ' +
'Heritage Site.</p>' +
'<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
'http://en.wikipedia.org/w/index.php?title=Uluru</a> ' +
'(last visited June 22, 2009).</p>' +
'</div>' +
'</div>';
// Define the image to use for the map marker (58 x 44 px)
var image = 'http://uploads.webflow.com/537f700d5bb0a27f34444d0c/53b054015eb95f024f4d7c5e_map_marker.png';
// Define the Lattitude and Longitude for the map location
var myLatLng = new google.maps.LatLng(45.088530, -64.367951);
// Define the map marker characteristics
var mapMarker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
title: 'Frostbyte Interactive'
});
// Following Lines are needed if you use the Info Window to display content when map marker is clicked
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Following line turns the marker, into a clickable button and when clicked, opens the info window
google.maps.event.addListener(mapMarker, 'click', function () {
infowindow.open(map, mapMarker);
});
}
CSS：
#maps {
width: 100%;
height: 100%
}