2 Google Maps working with geocoding on same page

Question

I am using Google Maps to geo code an address and populate that information into an input field. I can do this successfully for 1 map, but I need to have 2 maps on my page. Each having their own geo-coding information.

I have attempted to put the Javascript code together, essentially duplicating my first map.

My JavaScript is as follows

<script type="text/javascript">

         var geocoder;
         var map;

         function initialize() {
             geocoder = new google.maps.Geocoder();
             var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
             var mapOptions = {
               zoom: 10,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             }
             map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
          }

         function codeAddress() {
             var address = document.getElementById('address').value;
             geocoder.geocode( { 'address': address}, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {
                 map.setCenter(results[0].geometry.location);
                 var marker = new google.maps.Marker({
                     map: map,
                     position: results[0].geometry.location
                 });
                 document.getElementById("input_15_169").value = marker.getPosition().lat();
                 document.getElementById("input_15_167").value = marker.getPosition().lng();
                 document.getElementById("input_15_92").value = address;

               } else {
                 alert('Geocode was not successful for the following reason: ' + status);
               }
             });
           }

           var geocoder;
               var map2;

               function initialize() {
                   geocoder = new google.maps.Geocoder();
                   var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
                   var mapOptions = {
                     zoom: 10,
                     center: latlng,
                     mapTypeId: google.maps.MapTypeId.ROADMAP
                   }
                   map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
                }

               function codeAddress() {
                   var address = document.getElementById('address').value;
                   geocoder.geocode( { 'address': address}, function(results, status) {
                     if (status == google.maps.GeocoderStatus.OK) {
                       map.setCenter(results[0].geometry.location);
                       var marker = new google.maps.Marker({
                           map: map2,
                           position: results[0].geometry.location
                       });
                       document.getElementById("input_16_169").value = marker.getPosition().lat();
                       document.getElementById("input_16_167").value = marker.getPosition().lng();
                       document.getElementById("input_16_92").value = address;

                     } else {
                       alert('Geocode was not successful for the following reason: ' + status);
                     }
                   });
                 }

         </script>

In my html I have the given the map 2 different id's map_canvas and map_canvas2

However when I load my page, only the 2nd map appears and when I try to plot an address nothing happens even though the input fields above are correct.

I think I am doing something wrong when adding this 2nd map and looking for some advice in the above javascript.

Thanks

JSFiddle Code here http://jsfiddle.net/JJKx5/

Answer 1

you cant have methods with the same name otherwise the interpreter wont know which one to choose, so put your logic in the one method.

http://jsfiddle.net/JJKx5/1/

         function initialize() {
             geocoder = new google.maps.Geocoder();
             var latlng = new google.maps.LatLng(53.2948557, -6.139267399999994);
             var mapOptions = {
               zoom: 10,
               center: latlng,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
             map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
          }