Как нам PHP Значения в Направлении Google map API и загрузить карту при загрузке страницы

Question

Я хочу использовать значения PHP для начального и конечного адреса в направлении карты Google вместо выпадающего списка. Мои значения из базы данных.

С кодом ниже карта загружается, но не показывает направления, я думаю, что проблема в функции onChangeEvent, которую я не могу изменить на onload, так как в результате карта не загружается;

<div id="floating-panel">
                    <input type="text" id="start" name="start" value="<?php echo $start;?>" />
                    <input type="text" id="end" name="end" value="<?php echo $location; ?>" />
                    </div>
                      <div id="right-panel"></div>
                        <div id="map"></div>
                        <script>
                          function initMap() {
                            var directionsDisplay = new google.maps.DirectionsRenderer;
                            var directionsService = new google.maps.DirectionsService;
                            var map = new google.maps.Map(document.getElementById('map'), {
                              zoom: 7,
                              center: {lat: <?php echo $latitudee; ?>, lng: <?php echo $longitudee; ?>}
                            });
                            directionsDisplay.setMap(map);
                            directionsDisplay.setPanel(document.getElementById('right-panel'));

                            var control = document.getElementById('floating-panel');
                            control.style.display = 'block';
                            map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);


                            var onChangeHandler = function() {
                              calculateAndDisplayRoute(directionsService, directionsDisplay);
                            };
                            document.getElementById('start').addEventListener('change', onChangeHandler);
                            document.getElementById('end').addEventListener('change', onChangeHandler);


                          }

                          function calculateAndDisplayRoute(directionsService, directionsDisplay) {
                            var start = document.getElementById('start').value;
                            var end = document.getElementById('end').value;;
                            directionsService.route({
                              origin: start,
                              destination: end,
                              travelMode: 'DRIVING'
                            }, function(response, status) {
                              if (status === 'OK') {
                                directionsDisplay.setDirections(response);
                              } else {
                                window.alert('Directions request failed due to ' + status);
                              }
                            });
                          }
                        </script>

Answer 1

Вы можете создать два скрытых ввода (текст) с именами 'start' и 'end', а затем заполнить их значениями из вашей базы данных