Google Maps Маркер не отображается на моем сайте

Может кто-нибудь помочь мне, пожалуйста, я не понимаю, код JavaScriptGoogle Maps Маркер не отображается на моем сайте

<script type="text/javascript"> 
     var myOptions = { 
      zoom: 16, 
      center: new google.maps.LatLng(31.6321288,-8.0099319,787), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var myLatLng = new google.maps.LatLng(31.6321288,-8.0099319,787); 
     var beachMarker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      icon: "We Are Here" 
     }); 
    </script>

источник

2016-06-22 Mourad Blil

<тип скрипта = "текст/javascript "src =" https://maps.googleapis.com/maps/api/js?key=My-API-Here&callback=initMap "> Я добавил свой ключ API, но все еще не работает! –

Согласно документации Google, это выглядит следующим образом. Убедитесь, что вы включили эту строку в HTML тег и получить свой Google Map API Key заменить YOUR_API_KEY

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
    <title>Simple markers</title> 
 
    <style> 
 
     html, body { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     } 
 
     #map { 
 
     height: 100%; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div id="map"></div> 
 
    <script> 
 

 
     function initMap() { 
 
     var myLatLng = {lat: -25.363, lng: 131.044}; 
 

 
     var map = new google.maps.Map(document.getElementById('map'), { 
 
      zoom: 4, 
 
      center: myLatLng 
 
     }); 
 

 
     var marker = new google.maps.Marker({ 
 
      position: myLatLng, 
 
      map: map, 
 
      title: 'Hello World!' 
 
     }); 
 
     } 
 
    </script> 
 
    <script async defer 
 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
 
    </script> 
 
    </body> 
 
</html>

источник

2016-06-22 01:33:03

Не работает, я пробовал. –

Привет, я тестировал на своей локальной машине, он отлично работает. 1. вам нужно получить ключ api из ключа API карты Google из https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend&keyType=CLIENT_SIDE&reusekey=true. 2. Затем запустите 'python -m SimpleHTTPServer' в корневой каталог вашего html-файла, чтобы запустить http-сервер и перейти на localhost: 8000, чтобы проверить html. Если он не работает, скопируйте и вставьте ошибку консоли javascript –

1 - Вам нужно создать проект Google Maps и генерировать API KEY (https://console.developers.google.com). Это очень просто и быстро.

2 - Итак, вам нужно импортировать GoogleMapsAPI, изменение YOUR_API_KEY для API KEY:

<script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
</script>

В результате получается нечто вроде этого:

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
     <meta charset="utf-8"> 
     <title>Simple markers</title> 
     <style> 
      html, body { 
       height: 100%; 
       margin: 0; 
       padding: 0; 
      } 
      #map { 
       height: 100%; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="map"></div> 
     <script> 
      function initMap() { 
       var myLatLng = {lat:31.6321288, lng:-8.0099319}; 

       var map = new google.maps.Map(document.getElementById('map'), { 
        zoom: 16, 
        center: myLatLng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }); 

       var marker = new google.maps.Marker({ 
        position: myLatLng, 
        map: map, 
        title: 'Hello World!' 
       }); 
      } 
     </script> 
     <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
     </script> 
    </body> 
</html>

источник

2016-06-22 01:34:56

Не работает, я пробовал. –

Google Maps Маркер не отображается на моем сайте

ответ

Смежные вопросы