I want to use Google map API to mark multiple addresses.

Asked 2 months ago, Updated 2 months ago, 4 views

From the Japanese address, we use the Google map API to create a code that displays multiple markers on the map.

Multiple addresses are processed with Geocode using the for statement.
Also, the Geocode return value is asynchronous processing, so we use the callback function to code all addresses to get latitude and longitude before completing the map.

When you actually run this code, it doesn't show anything on the screen (no map appears and it's white), and you don't see any errors on the console of Chrome's developer tool.

If you put an alert in the code and check it, the latitude and longitude of the address itself have been properly obtained.
However, the variable specifying the center point of the map was undefined.

I tried many things, but I couldn't move on because I couldn't figure out what was wrong.
(I think there are many differences, including how to use the callback function.)
Could you please point out what's wrong?

<script>
function initMap(){

    var addresses = [
        '7-1 Nagatacho 1-chome, Chiyoda Ward, Tokyo',
        "Kasumigaseki 2-chome, Chiyoda Ward, Tokyo No. 1",
        Kasumigaseki 1-1-1 in Chiyoda Ward, Tokyo,
        'Kasumigaseki 2-1-3 in Chiyoda Ward, Tokyo'
    ];

    var latlng = [ ]; // Set latitude and longitude values
    var marker=[]; // Set marker location information
    var myLatLng;// For setting the center point of the map
    vargeocoder;
    geocoder=new google.maps.Geocoder();

    varmap = new google.maps.Map( document.getElementById('map_canvas')); // Create a map

    geo(aftergeo);

    function geo(callback){
        for(vari=0;i<3;i++){
            geocoder.geocode({'address':addresses[i]}, 
                function(results, status) {//Results
                    if(status===google.maps.GeocoderStatus.OK) {// If the status is OK
                        latlng[i] = results[0].geometry.location;// Set the position where the marker stands
                        marker[i] = new google.maps.Marker({
                            position:results[0].geometry.location, // Specify where to place the marker
                            map:map//Specify a map to place markers on
                        });
                    } else {// If it fails
                    } // End of if statement.because if is a sentence; not needed
                } // function(results, status) termination
            ); // exit geocoder.geocode
        } // End of for statement
        callback(); // Run aftergeo when you get everything
    } // function geo terminated

    function aftergeo() {
        myLatLng=latlng[0]; // Set the first address to the center of the map
        varopt={
            center —myLatLng, // Specify the center of the map
            zoom:16// Specify map zoom
        }; // Center and zoom are required for mapping options
        map.setOptions(opt); // Set options to map
    } // function aftergeo terminated

}; // function initMap terminated

</script>

javascript api google-maps

2022-09-30 11:55

1 Answers

As it is asynchronous, the function(results, status) {//Results) in egeocoder.geocode 」 is called after all the for statements are .
It works by saving the variable ii を of for in the function namespace as shown below to verify that all addresses have been Geocodeed in the cRef variable and callback.

<script>
function initMap(){

    var addresses = [
        '7-1 Nagatacho 1-chome, Chiyoda Ward, Tokyo',
        "Kasumigaseki 2-chome, Chiyoda Ward, Tokyo No. 1",
        Kasumigaseki 1-1-1 in Chiyoda Ward, Tokyo,
        'Kasumigaseki 2-1-3 in Chiyoda Ward, Tokyo'
    ];

    var latlng = [ ]; // Set latitude and longitude values
    var marker=[]; // Set marker location information
    var myLatLng;// For setting the center point of the map
    vargeocoder;
    geocoder=new google.maps.Geocoder();

    varmap = new google.maps.Map( document.getElementById('map_canvas')); // Create a map

    geo(aftergeo);

    function geo(callback){
        varcRef = addresses.length;
        for (vari=0;i<addresses.length;i++){
            ( function(i) { 
                geocoder.geocode({'address':addresses[i]}, 
                    function(results, status) {//Results
                        if(status===google.maps.GeocoderStatus.OK) {// If the status is OK
                            latlng[i] = results[0].geometry.location;// Set the position where the marker stands
                            marker[i] = new google.maps.Marker({
                                position:results[0].geometry.location, // Specify where to place the marker
                                map:map//Specify a map to place markers on
                            });
                        } else {// If it fails
                        } // End of if statement.because if is a sentence; not needed
                        if(--cRef<=0){
                            callback(); // Run aftergeo when you get everything
                        }
                    } // function(results, status) termination
                ); // exit geocoder.geocode
            })(i);
        } // End of for statement
    } // function geo terminated

    function aftergeo() {
        myLatLng=latlng[0]; // Set the first address to the center of the map
        varopt={
            center —myLatLng, // Specify the center of the map
            zoom:16// Specify map zoom
        }; // Center and zoom are required for mapping options
        map.setOptions(opt); // Set options to map
    } // function aftergeo terminated

}; // function initMap terminated

</script>


2022-09-30 11:55

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.