CODEWITHSUNDEEP
javascriptjquerygoogle-maps
Schneider
Schneider

Reputation: 2496

Adding two or more google maps on one page

I am trying to show several google maps on my page, I have tried to change function name but with no luck, does anybody knows where must I change a name of varibles. Becuase I have tried to change the initialize function to initialize2 but I think I have to change this name in more places, as I have several addresses

Here is my code so far

  $(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);
        });

Upvotes: 0

Views: 81

Answers (3)

HoangHieu
HoangHieu

Reputation: 2840

google.map.Map() is a object <=> you save array object to validate map. and 1 item to focus 1 tag map in your website 

var map = new Array();

    map[1] =  new google.maps.Map(document.getElementById('map-a'), mapOptions);
    map[2] =  new google.maps.Map(document.getElementById('map-b'), mapOptions);

Upvotes: 0

Pete
Pete

Reputation: 58412

Try replacing your second initialize with this:

        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

Upvotes: 2

Dmitry Volokh
Dmitry Volokh

Reputation: 1646

map = new google.maps.Map(document.getElementById('map-canvas-eindhoven'), mapOptions);

map = new google.maps.Map(document.getElementById('map-canvas-rotterdam'), mapOptions);

map variable goes to the ready function's scope and is rewritten after the second map initialization.

You should add var statement before creating instance, not before function. Read this for more information. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var

Upvotes: 0

Related Questions