Невозможно использовать маркеры карт Google, и проблема с javascript глобальными переменными

Question

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

Изначально я пытаюсь нанести маркеры на карта, принимая значения широты и долготы от пользователя.

Мой html выглядит так:

    <div>
            <label for = "lat">Enter Latitude</label>
            <input id="lat" type="text" name="lat">
            <label for = "lat">Enter Longitude</label>
            <input id="lng" type="text" name="lng">
            <button id ="submit">Submit</button>
        </div>
        <div id="map"></div>

Мой css выглядит так:

<style>
    /*Set the height explicitly.*/
    #map {
        height: 400px;
        width: 100%
    }
</style>

И я использую Google Map javascript вот так.

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

И мой скрипт такой:

        <script>        
            var map=0;
            function initMap(){
                    var pesCollege = {lat:12.9345, lng:77.5345};
                    map = new google.maps.Map(document.getElementById('map'), {
                        center:pesCollege,
                        zoom: 10
                    });
                    console.log("Inside initMap");
                    console.log(map);    //this is printing map properties
                    return map;
                    // var marker = new google.maps.Marker({position: pesCollege, map : map});
                   //This marker works if uncommented!
               }

                plot();                    

                function plot(){
                    console.log("inside plot function")
                    console.log(map);    //this is printing 0, i.e. global variable map is not 
                                         //loaded with map inside initMap
                    // var latlng = new google.maps.LatLng(latitude, longitude);
                    var pesCollege = {lat:12.9345, lng:77.5345};
                    var marker = new google.maps.Marker({position: pesCollege, map :map});  
                  //I want this marker to work.

                    // var marker = new google.maps.Marker({position: latlng,setMap: map}); 
                    console.log("Marker set")


                 }

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

var button = document.getElementById('submit')  
        button.addEventListener("click", function(){
            var dict = {};
            var latitude = document.getElementById('lat').value;
            var longitude = document.getElementById('lng').value;
            x = parseInt(latitude);
            y = parseInt(longitude);
            dict['lat']=latitude;
            dict['lng']=longitude;
            var cdns = JSON.stringify(dict);
            // alert("hi");
            alert(cdns);    
            console.log(dict);
            console.log(cdns);
            plotPoint(x,y); //this is a similar funtion to plot() but i send l&l values, not sure if i can pass them like this.
            plot();     
        });

, а мой plotPoint (x, y) - вот так

function plotPoint(latitude,longitude){
    var latlng = new google.maps.LatLng(latitude, longitude);
    var marker = new google.maps.Marker({position: latlng,map: map}); 
    console.log("Marker set")
}

Я уже много читал git ответы, но никто не напоминал мою проблему. Любая помощь будет большой. Заранее спасибо.

Answer 1

Я сократил код, который вы указали, до минимума, чтобы он отображал маркер при отправке пары широта / долгота.

Вы должны выполнить дополнительные проверки. Код, как он есть, потерпит неудачу, если вы не предоставите широту и / или долготу и нажмете submit.

Вот фрагмент рабочего кода. Я добавил комментарии, пожалуйста, прочитайте их.

var map;

function initMap() {

  // Default map location
  var pesCollege = {
    lat: 12.9345,
    lng: 77.5345
  };

  // Create the map and center on deault location
  map = new google.maps.Map(document.getElementById('map'), {
    center: pesCollege,
    zoom: 10
  });
  
  // Create a Marker at the default location
  var marker = new google.maps.Marker({
    position: pesCollege,
    map: map
  });

  var button = document.getElementById('submit');

  button.addEventListener("click", function() {

    // Get latitude and longitude values from inputs
    var latitude = document.getElementById('lat').value;
    var longitude = document.getElementById('lng').value;

    // Are you sure about that?
    // This will return an integer, ie. 12.3452 will become 12
    latitude = parseInt(latitude);
    longitude = parseInt(longitude);

    // Send the values
    plotPoint(latitude, longitude);
  });
}

function plotPoint(lat, lng) {

  // Create a LatLng with the given coordinates
  var pos = new google.maps.LatLng(lat, lng);

  // Create a Marker at the given coordinates
  var marker = new google.maps.Marker({
    position: pos,
    map: map
  });

  // Pan the map to see your added Marker
  map.panTo(pos);
}

#map {
  height: 400px;
  width: 100%
}

<div>
  <label for="lat">Enter Latitude</label>
  <input id="lat" type="text" name="lat">
  <label for="lat">Enter Longitude</label>
  <input id="lng" type="text" name="lng">
  <button id="submit">Submit</button>
</div>

<div id="map"></div>

<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>

Чтобы добавить немного больше информации:

• В вызове API вы добавили callback=initMap который будет выполнять функцию initMap после завершения загрузки скрипта API. Весь связанный с Google Maps код должен быть инициализирован в этой функции, так как в противном случае вы можете вызывать методы Google Maps до того, как он закончит загрузку, что приведет к ошибке.

• Вы всегда должны ссылаться на официальная документация для свойств и методов.

• Вы должны следить за вашей консолью Javascript на наличие ошибок.