マーカーとポリラインの両方でGoogleマップを表示するにはどうすればよいですか？

Question

マーカーを表示できるマップとポリラインを表示するマップを作成できますが、1つのマップに表示することはできません。 2つの異なる色のポリラインを持つ基本的なマップと、ポリライン上にカスタムマーカーが表示されている必要があります。

私のためのHTMLの例はありますか？

アンドレ

Answer 1

私は最終的に問題を征服し、作業溶液を得ました。

function initialize() { 
    if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map_canvas")); 
    map.addControl(new GLargeMapControl()); 
    map.addControl(new GMapTypeControl()); 
    map.setCenter(new GLatLng(-25.935, 28.17), 10); 

    // Add markers to the map 

    // Define Icons 
    var baseIcon = new GIcon(); 
    baseIcon.iconSize=new GSize(32,32); 
    baseIcon.shadowSize=new GSize(56,32); 
    baseIcon.iconAnchor=new GPoint(16,16); 
    baseIcon.infoWindowAnchor=new GPoint(16,0); 
    var station = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal4/icon57.png", null, "http://maps.google.com/mapfiles/kml/pal4/icon57s.png"); 
    var plane = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal2/icon56.png", null, "http://maps.google.com/mapfiles/kml/pal2/icon56s.png"); 

    function createMarker(point,html,icon) { 
     var marker = new GMarker(point,icon); 
     GEvent.addListener(marker, "click", function() { 
     marker.openInfoWindowHtml(html); 
     }); 
    return marker; 
    } 

    // OR Tambo 
    var point = new GLatLng(-26.131774, 28.231645); 
    var marker = createMarker(point,'<div id="infoBox"><a href="http://www.gautrainschedule.co.za/station.php?sid=5&action=custom">OR Tambo<\/a> is located inside OR Tambo International Airport<\/div>', station) 
    map.addOverlay(marker); 


    // Rhodesfield 
    var point = new GLatLng(-26.126582, 28.225250); 
    var marker = createMarker(point,'<div id="infoBox"><a href="http://www.gautrainschedule.co.za/station.php?sid=6&action=custom">Rhodesfield Station<\/a> services Kempton Park area, excluding OR Tambo International airport.<\/div>', station) 
    map.addOverlay(marker); 

    // Marlboro 
    var point = new GLatLng(-26.084702, 28.105270); 
    var marker = createMarker(point,'<div id="infoBox"><a href="http://www.gautrainschedule.co.za/station.php?sid=7&action=custom">Marlboro Station<\/a> is located close to the N3 highway<\/div>', station) 
    map.addOverlay(marker); 

    // Sandton 
    var point = new GLatLng(-26.107855, 28.058138); 
    var marker = createMarker(point,'<div id="infoBox"><a href="http://www.gautrainschedule.co.za/station.php?sid=8&action=custom">Sandton Station<\/a> is located close to major shopping center and other major corporations.<\/div>', station) 
    map.addOverlay(marker); 


    // Draw East West Route 
    var polyline = new GPolyline([ 
    new GLatLng(-26.107855, 28.058138), 
    new GLatLng(-26.084702, 28.105270), 
    new GLatLng(-26.126582, 28.225250), 
    new GLatLng(-26.131774, 28.231645) 
    ], "#00ff00",8); 
    map.addOverlay(polyline); 

    } 
} 

</script> 

とマップは、次のHTMLを使用表示する：

<div id="map_canvas" style="width: 290px; height: 350px"></div> 

Answer 2

private void setUpMap() { 

     // Instantiates a new Polyline object and adds points to define a rectangle 
     PolylineOptions rectOptions = new PolylineOptions() 
       .add(new LatLng(13.058375, 80.236052)) 
       .add(new LatLng(13.058792, 80.235837)) // North of the previous point, but at the same longitude 
       .add(new LatLng(13.059225, 80.235818)) // Same latitude, and 30km to the west 
       .add(new LatLng(13.059973, 80.235799)) // Same longitude, and 16km to the south 
       .add(new LatLng(13.060984, 80.235759)) 
       .add(new LatLng(13.061232, 80.235743)) 
       .add(new LatLng(13.061331, 80.235713)) 
       .add(new LatLng(13.061418, 80.235665)) 
       .add(new LatLng(13.061470, 80.235528)) 
       .add(new LatLng(13.061514, 80.235144)) 
       .add(new LatLng(13.061679, 80.234702)) 
       .add(new LatLng(13.062787, 80.234672)) 
       .add(new LatLng(13.062747, 80.233774)) 
       .add(new LatLng(13.062755, 80.233600)) 
       .add(new LatLng(13.062591, 80.233549)) 
       .add(new LatLng(13.062473, 80.233519)) 
       .width(25) 
       .color(Color.BLUE) 
       .geodesic(true); // Closes the polyline. 

// Get back the mutable Polyline 
     Polyline polyline = mMap.addPolyline(rectOptions); 

     mMap.addMarker(new MarkerOptions().position(new LatLng(13.058375, 80.236052)).title("Hostel").icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))); 
     mMap.addMarker(new MarkerOptions().position(new LatLng(13.062451, 80.233247)).title("Bertram Hall").icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))); 
     mMap.addMarker(new MarkerOptions().position(new LatLng(13.061299, 80.234671)).title("Church").icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))); 

    } 
    } 

これは私が使用ポリラインとマーカーコードがあり、それは私のためにうまく働きました。 urlの必要性に応じてlatlngの値を変更します。