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]
