创建一个连接到数据库的谷歌地图 - creating a google map that is connected to database

我正在尝试创建一个谷歌地图。纬度和经度来自数据库，所以我必须把它们放在一个文本框中，然后在脚本中得到它的值。我试过这样做，但它不起作用，你会帮我这个;这是我的JavaScript:

function initMap() {
        var lat = document.getElementById('lat');
        var lang = document.getElementById('lang');
    var uluru = {lat: lat, lng: lang };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}

这是html:

<input type="text" style="display: none" id="lat" value="7.8383054" />
<input type="text" style="display: none" id="lang" value="123.2966657" />
<div id="map" ">
</div>

JSfiddle

文本字段中的"数字"可以使用。value属性访问:
google.maps.LatLngLiteral中的lat/lng必须是数字。(如果没有parseFloat, API会抛出这些错误:
- InvalidValueError: setCenter: not a LatLng或latlnliteral: in property lat: not a number
- InvalidValueError: setPosition: not a LatLng或latlnliteral: in property lat: not a number

var lat = parseFloat(document.getElementById('lat').value);
var lang = parseFloat(document.getElementById('lang').value);

你需要实际调用initMap方法(你的小提琴没有这样做)

更新小提琴

代码片段:

html,
body,
#map {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<input type="text" id="lat" value="7.8383054" />
<input type="text" id="lang" value="123.2966657" />
<div id="map" ">
</div>
<script>
function initMap() {
        var lat = parseFloat(document.getElementById('lat').value);
        var lang = parseFloat(document.getElementById('lang').value);
    var uluru = {lat: lat, lng: lang };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: uluru
    });
    var marker = new google.maps.Marker({
        position: uluru,
        map: map
    });
}
</script>

尝试:

var lat = document.getElementById('lat').value;
var lang = document.getElementById('lang').value;

除了没有实际使用文本输入的值或调用返回这些值的函数之外，不确定您的问题在哪里，但也许这些长行可以帮助您开始。如果你需要用户输入不同的lat/lng坐标，那么你还需要分配一个事件处理程序来监听更改或一个按钮来提交新坐标。

<?php
    /*
    */
?>
<!doctype html>
<html>
    <head>
        <title>Google maps</title>
        <script src='https://www.google.com/jsapi' charset='utf-8'></script>
        <script src='https://maps.google.co.uk/maps/api/js?key=APIKEY' charset='utf-8'></script>
        <script type='text/javascript' charset='utf-8'>
            function initMap() {
                var uluru = {
                    lat: document.getElementById('lat').value,
                    lng: document.getElementById('lang').value
                };
                var options={
                    zoom: 4,
                    center: uluru
                };
                var map = new google.maps.Map( document.getElementById('map'), options );
                var marker = new google.maps.Marker({
                    position: uluru,
                    map: map
                });
            }
            document.addEventListener( 'DOMContentLoaded', initMap, false );
        </script>
        <style type='text/css' charset='utf-8'></style>
    </head>
    <body>
        <div id='map'></div>
        <div>
            <input type='text' id='lat' value='7.8383054' />
            <input type='text' id='lang' value='123.2966657' />
        </div>
    </body>
</html>

在body标签中调用initMap()函数。它会加载地图，最重要的是你有API密钥吗?您还需要SSL来使用Google地图。意味着你的url必须是https://yourdomain.com

身体onload = " initMap ()"