Đặt nhiều địa chỉ trên bản đồ của Google (Sử dụng API 3)

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&amp;callback=initialize"; document.body.appendChild(script); }); function initialize() { var map; // Set the latitude &amp; 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 = '&lt;div class="info_content"&gt;' + '&lt;h3&gt;London Eye&lt;/h3&gt;' + '&lt;p&gt;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).&lt;/p&gt;' + '&lt;/div&gt;'; // 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