Отметить места на Google Картах

Я новичок в программировании и экспериментирую над созданием собственного личного проекта. Я смог получить простую карту и запустить ее.

Как бы я, например, создал все пивоварни в вашем районе. Нужно ли мне получить доступ к API, а затем создать маркер для каждого из них? ИЛИ просто создать строку поиска на карте и в "пивоварнях" Google?

 <div id = "container">

        <div id = "googleMap" style = "width:100%;height:400px;"></div>
        <script src = "https://maps.googleapis.com/maps/api/js? 
      key = "KEYHERE"&callback=myMap"> 
       </script>

 </div>


function myMap() {
var myCenter = new google.maps.LatLng(39.742043,-104.991531)
var mapCanvas = document.getElementById('googleMap');
var mapOptions = {center: myCenter, zoom: 9};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);

var infowindow = new google.maps.InfoWindow({content: "Denver" });
  infowindow.open(map,marker);
}

Если у вас есть веб-сайты с примерами или примерами, которые помогут мне в изучении, я буду очень признателен. Я просто не знаю, как это работает. Спасибо

key = "KEYHERE" ... Надеюсь, вы не ставите КЛЮЧ в такие кавычки

— 12.10.2018 09:15

Это явно заполнитель ... однако src = - это ссылка. Итак, технически ссылка и ключ находятся в кавычках.

— 13.10.2018 22:56

Просто убедитесь - да, весь URL-адрес заключен в кавычки - я должен признать, что не прочитал вопрос полностью, не понял, что вы разместили рабочий код

— 14.10.2018 03:20

javascript jquery html api maps

12.10.2018 08:36

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

584

Ответы 1

Я поделюсь ссылкой, которая дает рекомендации по использованию этого ключа API, который вы создаете и просто копируете в следующем скрипте,

       <!DOCTYPE html>
    <html>
      <head>
        <style>
          #map {
            height: 400px;  
            width: 100%;  
           }
        </style>
      </head>
      <body>
        <h3>My Google Maps Demo</h3>
        <!--The div element for the map -->
        <div id = "map"></div>
        <script>
    // Initialize and add the map
    function initMap() {

      var uluru = {lat: -104.991531, lng: 39.742043};

      var map = new google.maps.Map(
          document.getElementById('map'), {zoom: 4, center: uluru});
      // The marker, positioned at your location 
      var marker = new google.maps.Marker({position: uluru, map: map});
    }
        </script>
        <script async defer
        src = "https://maps.googleapis.com/maps/api/js? 
 key=YOUR_API_KEY&callback=initMap">
        </script>
      </body>
    </html>

Перейдите по следующей ссылке,

https://developers.google.com/maps/documentation/javascript/adding-a-google-map

12.10.2018 09:22