javascript - 在一页上添加两个或多个谷歌地图

Question

我试图在我的页面上显示几个谷歌地图，我尝试更改函数名称，但没有运气，有人知道我必须在哪里更改变量名称吗？因为我尝试将 initialize 函数更改为 initialize2 但我认为我必须在更多地方更改此名称，因为我有多个地址

这是我到目前为止的代码

  $(document).ready(function () {

            /* google maps */

            google.maps.visualRefresh = true;

            var map;
            function initialize() {
                var geocoder = new google.maps.Geocoder();
                var address = $('#map-eindhoven').text(); /* change the map-input to your address */
                var mapOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map-canvas-eindhoven'), mapOptions);

                if (geocoder) {
                    geocoder.geocode({ 'address': address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                                map.setCenter(results[0].geometry.location);

                                var infowindow = new google.maps.InfoWindow(
                                    {
                                        content: address,
                                        map: map,
                                        position: results[0].geometry.location,
                                    });

                                var marker = new google.maps.Marker({
                                    position: results[0].geometry.location,
                                    map: map,
                                    title: address
                                });

                            } else {
                                alert("No results found");
                            }
                        }
                    });
                }
            }
            google.maps.event.addDomListener(window, 'load', initialize);


            var map;
            function initialize2() {
                var geocoder = new google.maps.Geocoder();
                var address = $('#map-rotterdam').text(); /* change the map-input to your address */
                var mapOptions = {
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map = new google.maps.Map(document.getElementById('map-canvas-rotterdam'), mapOptions);

                if (geocoder) {
                    geocoder.geocode({ 'address': address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                                map.setCenter(results[0].geometry.location);

                                var infowindow = new google.maps.InfoWindow(
                                    {
                                        content: address,
                                        map: map,
                                        position: results[0].geometry.location,
                                    });

                                var marker = new google.maps.Marker({
                                    position: results[0].geometry.location,
                                    map: map,
                                    title: address
                                });

                            } else {
                                alert("No results found");
                            }
                        }
                    });
                }
            }
            google.maps.event.addDomListener(window, 'load', initialize2);
        });

Answer 1

尝试用以下内容替换第二个初始化:

        var map2;
        function initialize2() {
            var geocoder = new google.maps.Geocoder();
            var address = $('#map-rotterdam').text(); /* change the map-input to your address */
            var mapOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map2 = new google.maps.Map(document.getElementById('map-canvas-rotterdam'), mapOptions);

            if (geocoder) {
                geocoder.geocode({ 'address': address }, function (results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                            map2.setCenter(results[0].geometry.location);

                            var infowindow = new google.maps.InfoWindow({
                                content: address,
                                map: map2,
                                position: results[0].geometry.location,
                            });

                            var marker = new google.maps.Marker({
                                position: results[0].geometry.location,
                                map: map2,
                                title: address
                            });

                        } else {
                            alert("No results found");
                        }
                    }
                });
            }
        }
        google.maps.event.addDomListener(window, 'load', initialize2);

Example