Đang chuẩn bị liên kết để tải về tài liệu:
giới thiều ebook HTML5 và CSS3 in the real world phần 9

Tham khảo tài liệu 'giới thiều ebook html5 và css3 in the real world phần 9', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | 234 HTML5 CSS3 for the Real World Now let s return to our displayOnMap function and deal with the nitty-gritty of actually displaying the map. First we ll create a myOptions variable to store some of the options that we ll pass to the Google Map js geolocation.js excerpt function displayOnMap position var latitude position.coords.latitude var longitude position.coords.longitude Let s use Google Maps to display the location var myOptions zoom 14 mapTypeld google.maps.MapTypeld.ROADMAP The first option we ll set is the zoom level. For a complete map of the Earth use zoom level 0. The higher the zoom level the closer you ll be to the location and the smaller your frame or viewport will be. We ll use zoom level 14 to zoom in to street level. The second option we ll set is the kind of map we want to display. We can choose from the following google.maps.MapTypeId.ROADMAP google.maps.MapTypeId.SATELLITE google.maps.MapTypeId.HYBRID google.maps.MapTypeId.TERRAIN If you ve used the Google Maps website before you ll be familiar with these map types. ROADMAP is the default while SATELLITE shows you photographic tiles. HYBRID is a combination of ROADMAP and SATELLITE and TERRAIN will display elements like elevation and water. We ll use the default ROADMAP. Options in Google Maps To learn more about Google Maps options see the Map Options section of the Google Maps tutorial.5 5 http code.google.com apis maps documentation javascript tutorial.html MapOptions Geolocation Offline Web Apps and Web Storage 235 Now that we ve set our options it s time to create our map We do this by creating a new Google Maps object with new google.maps.Map . The first parameter we pass is the result of the DOM method getElementByld which we use to grab the placeholder div we put in our index.html page. Passing the results of this method into the new Google Map means that the map created will be placed inside that element. The second parameter we pass is the collection of options we just set. We .