如何使用google map api

时间:2016-04-06 18:52:26

标签: javascript php google-maps dictionary street-address

我尝试使用JavaScript中的google maps api将谷歌地图加载到我当前的位置。我已经通过使用JavaScript尝试了此代码,但它不起作用。 在我尝试了很多方法后,我来到这个代码,它的工作完美。 此代码将返回费城作为我当前的位置,但我希望它将我的家庭地址作为我当前的位置返回                   我的Google地图应用                  

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places&key=YOUR_API">
    </script>

    <script>
        var x = document.getElementById("map");
        var map;
        function getLocation()
        {
            if (navigator.geolocation) 
            {
                navigator.geolocation.getCurrentPosition(showPosition);
            } 
            else 
            { 
                x.innerHTML = "Geolocation is not supported by this browser.";
            }
        }

        function showPosition(position) 
        {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var center = new google.maps.LatLng(latitude,longitude);
            var myOptions = {
                center: center,
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), myOptions);

            // Create a marker and set its position.
            var marker = new google.maps.Marker({
                map: map,
                position: center,
                title: 'You are here'
            }); 
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    <script type="text/javascript">
        function comple() 
        {
                var org = document.getElementById('org');
                var des = document.getElementById('des');
                var autocomplete = new google.maps.places.Autocomplete(org);
                var autocomplete2 = new google.maps.places.Autocomplete(des);
        }
        google.maps.event.addDomListener(window, 'load', comple);
    </script>

</head>
<body onload="getLocation()">
<p><h1>Car Direction Finder</h1></p>
<br>
<form name="form1" id="form1" action="Direction.php" method="post">
<p>
Source:
<input type="text" name="org" id="org" placeholder="Enter Original Source" size="50" autocomplete="on">
Destination:
<input type="text" name="des" id="des" placeholder="Enter Destination Source" size="50" autocomplete="on">
<label for="des"></label>
<input type="submit" value="GO"/>
<br>
</form>
<div align="center">
<table border="2" width="750" height="550" align="center">
    <tr>
        <td id="map"></td>
    </tr>
</table>
</div>
</body>
</html>

有人可以帮我吗??

1 个答案:

答案 0 :(得分:0)

试试这可以帮到你:
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-directions?hl=fr

如果您没有API KEY,请不要放&amp; key = IPutMyKeyHere。