How to convert an address to longitude and latitude then display a map on the page

Question

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.com/maps/api/js?key=keyremoved&callback=initMap">
</script>

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

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, Aug 12 '16 at 09: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, Aug 12 '16 at 09:12
duplicate of [Using Address Instead Of Longitude And Latitude With Google Maps API](http://stackoverflow.com/questions/15925980/using-address-instead-of-longitude-and-latitude-with-google-maps-api) — geocodezip, Aug 12 '16 at 09:46

score 2 · Answer 1 · answered Aug 12 '16 at 09:12

Change the order of scripts

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

score 2 · Accepted Answer · answered Aug 12 '16 at 09:24

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.com/maps/api/js?key=AIzaSyCY2buDtbYIot8Llm_FkQXHW36f0Cme6TI&callback=initMap">
    </script>

How to convert an address to longitude and latitude then display a map on the page

2 Answers2