Как правильно добавить карту Google на страницу html?

Question

Недавно я попытался добавить карту Google на веб-страницу с помощью Google API, но не смог это сделать. Как я могу это исправить? Мне нужно помочь решить эту проблему. Это можно запустить как html-файл, но когда я попытался с моим локальным сервером, сценарий не может загрузить.

<script> 
    function avMap(){ 
    var myCanvas = document.getElementById('map1'); 
    var mapCenter = new google.maps.LatLng(6.949707,80.1831939); 
    var mapOptions = { 
     center: mapCenter, 
     zoom:11, 
     mapTypeId: google.maps.MapTypeId.ROADMAP //SATELLITE, HYBRID, TERRAIN 
    }; 
    var mapAv = new google.maps.Map(myCanvas, mapOptions); 
    var marker1 = new google.maps.Marker({ 
      position: mapCenter, 
      animation: google.maps.Animation.BOUNCE, 
      draggable: false 
     }); 
    marker1.setMap(mapAv); 
    var marker2 = new google.maps.Marker({ 
      position: {lat: 6.4692368, lng: 80.5755751}, 
      animation: google.maps.Animation.DROP, 
      draggable: false 
     }); 
    marker2.setMap(mapAv); 
    //info-window 
    var avNote = "<p>"+"Avissawella is the most beautiful area in Sabaragamuwa/Western border."+" "+"For more details, please visit"+ 
    " "+"<a href='https://en.wikipedia.org/wiki/Avissawella'"+ "target='_blank'>"+"this link"+"</a>"; 
    var infoWin = new google.maps.InfoWindow({ 
     content: avNote, 
     maxWidth:200 
    }); 
    infoWin.open(mapAv, marker1); 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?callback=avMap"></script> 

Answer 1

Вам не хватает async defer на ваш скрипт.

<script src="https://maps.googleapis.com/maps/api/js?callback=avMap"></script> 

должно быть:

<script src="https://maps.googleapis.com/maps/api/js?callback=avMap" async defer></script> 

proof of concept fiddle

фрагмент кода:

html, 
 
body, 
 
#map1 { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script> 
 
    function avMap() { 
 
    var myCanvas = document.getElementById('map1'); 
 
    var mapCenter = new google.maps.LatLng(6.949707, 80.1831939); 
 
    var mapOptions = { 
 
     center: mapCenter, 
 
     zoom: 11, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP //SATELLITE, HYBRID, TERRAIN 
 
    }; 
 
    var mapAv = new google.maps.Map(myCanvas, mapOptions); 
 
    var marker1 = new google.maps.Marker({ 
 
     position: mapCenter, 
 
     animation: google.maps.Animation.BOUNCE, 
 
     draggable: false 
 
    }); 
 
    marker1.setMap(mapAv); 
 
    var marker2 = new google.maps.Marker({ 
 
     position: { 
 
     lat: 6.4692368, 
 
     lng: 80.5755751 
 
     }, 
 
     animation: google.maps.Animation.DROP, 
 
     draggable: false 
 
    }); 
 
    marker2.setMap(mapAv); 
 
    //info-window 
 
    var avNote = "<p>" + "Avissawella is the most beautiful area in Sabaragamuwa/Western border." + " " + "For more details, please visit" + 
 
     " " + "<a href='https://en.wikipedia.org/wiki/Avissawella'" + "target='_blank'>" + "this link" + "</a>"; 
 
    var infoWin = new google.maps.InfoWindow({ 
 
     content: avNote, 
 
     maxWidth: 200 
 
    }); 
 
    infoWin.open(mapAv, marker1); 
 
    } 
 
</script> 
 
<script src="https://maps.googleapis.com/maps/api/js?callback=avMap" async defer></script> 
 
<div id="map1"></div>