GoogleMapで複数マーカーに吹き出しを出したい【JavaScript】

前提・実現したいこと

GoogleMapで各マーカーに個別の吹き出しを出したい

発生している問題・エラーメッセージ

geocodeメソッドのコールバック内ではiがすでに3になってしまうため、forループのiを使うことができない

Uncaught TypeError: Cannot read property 'name' of undefined

該当のソースコード

JavaScript
1<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMapWithAddress" async defer></script>
2<script>
3function initMapWithAddress() {
4    var _my_address = [
5            {'address': '東京都千代田区永田町1丁目7-1', 'name': '店舗A'},
6            {'address': '東京都千代田区永田町2丁目7-4', 'name': '店舗B'},
7            {'address': '東京都千代田区永田町4丁目7-7', 'name': '店舗C'},
8    ];
9
10    var opts = {
11        zoom: 12,
12        mapTypeId: google.maps.MapTypeId.ROADMAP,
13    };
14    var my_google_map = new google.maps.Map(document.getElementById('place_map'), opts);
15    var geocoder = new google.maps.Geocoder();
16
17    for (var i = 0; i < _my_address.length; i++) {
18        geocoder.geocode(
19            {
20              'address': _my_address[i]['address'],
21              'region': 'jp'
22            },
23            function(result, status){
24                if(status==google.maps.GeocoderStatus.OK){
25                    var latlng = result[0].geometry.location;
26                    my_google_map.setCenter(latlng);
27                    var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
28                    google.maps.event.addListener(marker, 'dragend', function(event){
29                        marker.setTitle(event.latLng.toString());
30                    });
31                    google.maps.event.addListener(marker, 'mouseover', function (event) {
32                        new google.maps.InfoWindow({
33                            content: '<div class="">' + _my_address[i]['name'] + '</div>'
34                        }).open(marker.getMap(), marker);
35                    });
36                }
37            }
38        );
39    }
40}

試したこと

InfoWindowメソッドをループ外に出したがNG

JavaScript
1<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMapWithAddress" async defer></script>
2<script>
3function initMapWithAddress() {
4    var _my_address = [
5            {'address': '東京都千代田区永田町1丁目7-1', 'name': '店舗A'},
6            {'address': '東京都千代田区永田町2丁目7-4', 'name': '店舗B'},
7            {'address': '東京都千代田区永田町4丁目7-7', 'name': '店舗C'},
8    ];
9
10    var opts = {
11        zoom: 12,
12        mapTypeId: google.maps.MapTypeId.ROADMAP,
13    };
14    var my_google_map = new google.maps.Map(document.getElementById('place_map'), opts);
15    var geocoder = new google.maps.Geocoder();
16
17    for (var i = 0; i < _my_address.length; i++) {
18        geocoder.geocode(
19            {
20              'address': _my_address[i]['address'],
21              'region': 'jp'
22            },
23            function(result, status){
24                if(status==google.maps.GeocoderStatus.OK){
25                    var latlng = result[0].geometry.location;
26                    my_google_map.setCenter(latlng);
27                    var marker = new google.maps.Marker({position:latlng, map:my_google_map, title:latlng.toString(), draggable:true});
28                    google.maps.event.addListener(marker, 'dragend', function(event){
29                        marker.setTitle(event.latLng.toString());
30                    });
31                    attachMessage(marker, _my_address[i]['name']);
32                    google.maps.event.addListener(marker, 'mouseover', function (event) {
33                        new google.maps.InfoWindow({
34                            content: '<div class="">' + _my_address[i]['name'] + '</div>'
35                        }).open(marker.getMap(), marker);
36                    });
37                }
38            }
39        );
40    }
41  function attachMessage(marker, _my_address) {
42    google.maps.event.addListener(marker, 'mouseover', function(event) {
43      new google.maps.InfoWindow({
44        content: _my_address
45      }).open(marker.getMap(), marker);
46    });
47  }
48}