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>
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>
© 2024 OneMinuteCode. All rights reserved.