Agregar varios scripts (Mapas)

[byrong]

Tengo el siguiente problema, en el google maps utilizó el siguiente código:

Código Javascript:

function localizame() {
            if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
                navigator.geolocation.getCurrentPosition(coordenadas, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }
        
        function coordenadas(position) {
            latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
            longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
        }
function getCoords(marker){ 
    document.getElementById("latitud").value=''+marker.getPosition().lat(); 
      document.getElementById("longitud").value=''+marker.getPosition().lng(); 
} 
function initialize() { 
    var myLatlng = new google.maps.LatLng(9.314299432752295,-70.60566794257812); 
    var myOptions = { 
        zoom: 17, 
        center: myLatlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     
   marker = new google.maps.Marker({ 
          position: myLatlng, 
          draggable: true, 
          title:"Descubrelo" 
    }); 
    google.maps.event.addListener(marker, "dragend", function() { 
                    getCoords(marker); 
    }); 
     
      marker.setMap(map); 
    getCoords(marker); 
     
   
  }
 

Pero tengo un select que me muestra un mapa según cada opción, pero es el mismo mapa, el código es este:

Código Javascript:

$(document).ready(function(){
                $(".contenido").hide();
                $("#planes").change(function(){
                $(".contenido").hide();
                     $("#div_" + $(this).val()).toggle("slow", function(){
                      google.maps.event.trigger(initialize(), 'resize');
                  });
                });
            });
 

El primer mapa lo tengo de la siguiente manera en el primer div:

Código HTML:

<div id="map_canvas" style="width:400px; height:400px"></div><br>
 

y me lo muestra perfecto acá, pero en el segundo y tercer div lo tengo de la misma manera y me sale en blanco, es decir no carga, intenté cambiando en el html esto <div id="map_canvas2"> y en el js lo puse así para probar, pero sigue igual:

Código Javascript:

function localizame2() {
            if (navigator.geolocation) { /* Si el navegador tiene geolocalizacion */
                navigator.geolocation.getCurrentPosition(coordenadas2, errores);
            }else{
                alert('Oops! Tu navegador no soporta geolocalización. Bájate Chrome, que es gratis!');
            }
        }
        
        function coordenadas2(position) {
            latitud = position.coords.latitude; /*Guardamos nuestra latitud*/
            longitud = position.coords.longitude; /*Guardamos nuestra longitud*/
        }
function getCoords2(marker){ 
    document.getElementById("latitud").value=''+marker.getPosition().lat(); 
      document.getElementById("longitud").value=''+marker.getPosition().lng(); 
} 
function initialize2() { 
    var myLatlng = new google.maps.LatLng(9.314299432752295,-70.60566794257812); 
    var myOptions = { 
        zoom: 17, 
        center: myLatlng, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas2"), myOptions); 
     
   marker = new google.maps.Marker({ 
          position: myLatlng, 
          draggable: true, 
          title:"Descubrelo" 
    }); 
    google.maps.event.addListener(marker, "dragend", function() { 
                    getCoords2(marker); 
    }); 
     
      marker.setMap(map); 
    getCoords2(marker); 
     
   
  }
 

Que puedo hacer para solucionarlo? los div 2 y 3 me lo muestran blanco usándolo de esa y la otra manera, Gracias.