javascript - How to convert an address to longitude and latitude then display a map on the page - Stack Overflow

admin管理员组

文章数量:1401431

Im trying to use google maps api to convert my address to longitude and latitude and THEN display the map on the page.

Just a note im using PHP/Laravel to retrieve the address from the DB. So although its a hard coded value of new york that will be dynamic after i get this working.

Html

<div id="map" style="height:250px"></div>

Javascript

<script>

    var geocoder = new google.maps.Geocoder();
    var address = "new york";

    geocoder.geocode( { 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            alert(latitude);
        }
    });

    function initMap() {
        var myLatLng = {lat: latitude, lng: longitude};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello World!'
        });
    }




</script>

<script async defer
        src=";callback=initMap">
</script>

At the moment i'm getting the error of "Uncaught ReferenceError: google is not defined"

Im trying to use google maps api to convert my address to longitude and latitude and THEN display the map on the page.

Just a note im using PHP/Laravel to retrieve the address from the DB. So although its a hard coded value of new york that will be dynamic after i get this working.

Html

<div id="map" style="height:250px"></div>

Javascript

<script>

    var geocoder = new google.maps.Geocoder();
    var address = "new york";

    geocoder.geocode( { 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            var latitude = results[0].geometry.location.lat();
            var longitude = results[0].geometry.location.lng();
            alert(latitude);
        }
    });

    function initMap() {
        var myLatLng = {lat: latitude, lng: longitude};

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 4,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Hello World!'
        });
    }




</script>

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

At the moment i'm getting the error of "Uncaught ReferenceError: google is not defined"

• javascript
• google-maps

Share Improve this question Follow edited Aug 12, 2016 at 9:47 Gandalf the White 2,46522 gold badges2020 silver badges3939 bronze badges asked Aug 12, 2016 at 9:09 KayTokyoKayTokyo 13722 gold badges33 silver badges1212 bronze badges 3

• you're executing the top half of your code before initMap is called - initMap is called once the google maps api is loaded - put the code that is above initMap inside initMap and you'll be closer to achieving your goal – Jaromanda X Commented Aug 12, 2016 at 9:11
• Move you geocoder code inside the initMap function. You'll see in the URL of the maps js URI there is a a callback function. This is executed once the maps script is loaded. You're calling new google.maps.Geocoder(); before the script has loaded – Brett Gregson Commented Aug 12, 2016 at 9:12
• duplicate of Using Address Instead Of Longitude And Latitude With Google Maps API – geocodezip Commented Aug 12, 2016 at 9:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Change the order of scripts

<script async defer
        src="https://maps.googleapis./maps/api/js?key=keyremoved&callback=initMap">
</script>
<script>
   var geocoder = new google.maps.Geocoder();
    var address = "new york";
   // rest of the code
</script>

As mentioned above the code needed to be put inside of my callback function.

<script>    
        function initMap(address) {

            var geocoder = new google.maps.Geocoder();

            geocoder.geocode( { 'address': address}, function(results, status) {

                if (status == google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                }

                console.log(latitude);
                console.log(longitude);

                var myLatLng = {lat: latitude, lng: longitude};

                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 4,
                    center: myLatLng
                });

                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: 'Hello World!'
                });

            });


        }




    </script>

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

本文标签： javascriptHow to convert an address to longitude and latitude then display a map on the pageStack Overflow