Trong ví dụ này, chúng tôi đang hiển thị nhiều địa chỉ trên bản đồ, với mỗi điểm đánh dấu địa chỉ là có thể kích vào để hiển thị cửa sổ thông tin.
The HTML
[php]
<div id="map_wrapper">
<div id="map_canvas" class="mapping"></div>
</div>
[/php]
The CSS
[php]
#map_wrapper { height: 400px; }
#map_canvas { width: 100%; height: 100%; }
[/php]
The JS
muốn dung API cần bật
Google Maps JavaScript API v3 lên nhé.
và thay code: <script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize&key=_ma_key_API_&language=_ngon_ngu_"></script>
[php]
jQuery(function($) {
// Asynchronously Load the map API
var script = document.createElement('script');
script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
});
function initialize() {
var map;
// Set the latitude & longitude for our location (London Eye)
var myLatlng = new google.maps.LatLng(51.503454,-0.119562);
var mapOptions = {
center: myLatlng, // Set our point as the centre location
zoom: 14, // Set the zoom level
mapTypeId: 'roadmap' // set the default map type
};
// Create a styled map
// Create an array of styles.
var styles = [{
"stylers": [
{ "saturation": -100 },
{ "lightness": 40 }
]
}];
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Allow our satellite view have a tilted display (This only works for certain locations)
map.setTilt(45);
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
// Create our 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>';
// Initialise the inforWindow
var infoWindow = new google.maps.InfoWindow({
content: infoWindowContent
});
// Add a marker to the map based on our coordinates
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'London Eye, London'
});
// Display our info window when the marker is clicked
google.maps.event.addListener(marker, 'click', function() {
infoWindow.open(map, marker);
});
}[/php]
Từ khóa: API 3, API map, google map
