Merging geometries with different materials three.js

So I am trying to merge two different geometries that are supposed to use different materials.

Below is my code for your reference.

        //Here we instantiate the two materials I am using
        globeMaterial = new THREE.MeshBasicMaterial({
            map: THREE.ImageUtils.loadTexture('local/images/earth1.jpg')
        });
        var markerMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
        var materialArray = [globeMaterial, markerMaterial];

        //I passed the material array here inside the new Geometry
        var globeGeometry = new THREE.Geometry(materialArray);

        var sphereGeometry = new THREE.SphereGeometry(radius, 30, 30);
        var sphereMesh = new THREE.Mesh(sphereGeometry, globeMaterial);

        //Here I merged the sphere inside of the empty globeGeometry 
        sphereMesh.updateMatrix();
        globeGeometry.merge(sphereMesh.geometry, sphereMesh.matrix, 0);

        //createPoint is a method that returns a mesh
        var marker = createPoint(lat,lng);
        marker.overdraw = true;

        //Here we merge the geometry of the marker with the sphere earlier
        marker.updateMatrix();
        //Notice the last parameter? I don't know if this is the right way to access the index of the 
        //materials array that I set as a constructor earlier
        globeGeometry.merge(marker.geometry, marker.matrix, 1);

As you can see, I have two materials, created an array of materials and passed it inside of the globeGeometry.

Here is how I add it to the scene:

 var mesh = new THREE.Mesh(globeGeometry);
 mesh.overdraw = true;
 scene.add(mesh);

When I ran the code, it would just render a random color for the whole mesh that I just merged everytime I hit refresh.

Thanks in advance.