Trung tâm lập trình Đào tạo lập trình Thực hành không giới hạn

Khắc phục lỗi MissingKeyMapError

13/04/2017 16:46

Mô tả lỗi:

 

Bạn cần đưa Maps google vào website của mình bạn làm theo hướng dẫn sau

https://embedgooglemaps.com/en/

Sau khi đã chọn được ví trí của mình rồi bạn muốn nhúng vào website của mình và đoạn mã sinh ra sẽ có dạng như sau:

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp'></script><div style='overflow:hidden;height:450px;width:839px;'><div id='gmap_canvas' style='height:450px;width:839px;'></div><div><small><a href="http://embedgooglemaps.com">embed google maps</a></small></div><div><small><a href="https://webtrafficgeeks.org/">buy targeted website traffic</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:18,center:new google.maps.LatLng(18.348273925610947,105.90134386004945),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(18.348273925610947,105.90134386004945)});infowindow = new google.maps.InfoWindow({content:'<strong>MÁY TÍNH GIA BẢO </strong><br>Số 211, Nguyễn Công Trứ, TP Hà Tĩnh <br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>

Tuy nhiên kết quả bạn nhận được khi paste vào website lại như sau:

Lý do lỗi là do bạn chưa có mã API Key, Sau đây tôi hướng dẫn bạn cách lấy API Key và kết quả paste vào đoạn code của bạn

Cách Khắc phục:

Bước 1: Truy cập địa chỉ https://developers.google.com/maps/documentation/javascript/get-api-key

Bước 2: Click GET A KEY

Bước 3: Hộp thoại hiện ra, điền tên Project của bạn và click CREATE AND ENBALE API

Bước 4: Chờ Google tạo cho bạn API KEY, Ví dụ của tôi có đoạn mã như sau:( Bạn copy đoạn mã này vào Notepad hoặc Notepad++)

AIzaSyBWt93nfDsbR2A0jFgbNEepF-wIAkbN-IY

Bước 5: Quay trở lại đoạn Script MAP: Bạn để ý đoạn bôi đỏ chính là Key API ta vừa lấy

Cú pháp : ?key=APIKEY&

<script src='https://maps.googleapis.com/maps/api/js?key=AIzaSyBU6rtzxD_Wyaac3w1k-0XIcee0j-qRzhs&v=3.exp'></script><div style='overflow:hidden;height:450px;width:839px;'><div id='gmap_canvas' style='height:450px;width:839px;'></div><div><small><a href="http://embedgooglemaps.com">embed google maps</a></small></div><div><small><a href="https://webtrafficgeeks.org/">buy targeted website traffic</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><script type='text/javascript'>function init_map(){var myOptions = {zoom:18,center:new google.maps.LatLng(18.348273925610947,105.90134386004945),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(18.348273925610947,105.90134386004945)});infowindow = new google.maps.InfoWindow({content:'<strong>MÁY TÍNH GIA BẢO </strong><br>Số 211, Nguyễn Công Trứ, TP Hà Tĩnh <br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>

Kết quả lỗi của bạn đã được xử lý và nó nhìn như thế này

 

 

 

Chúc bạn thành công!