3

このJSをプログラムで構築しています。各マーカーは、marker_0、marker_1 などの個別の変数で表されます...これは機能しますが、マーカーと情報ウィンドウをより効率的/エレガントな方法で生成する方法はありますか?

            <script  type="text/javascript">
    var map;

    function initialize() {
        var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(41.056466,-85.3312009),
        mapTypeId: google.maps.MapTypeId.ROADMAP
        }

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

        //**************************************************************
        //Add 1st marker
        //**************************************************************
        var contentString_0 ='<strong>Club name: Fort Wayne Time Corners</strong>';
        var infowindow_0 = new google.maps.InfoWindow({
            content: contentString_0
        });


        var image_0 = '/js/markers/marker1.png';
        var Latlng_0 = new google.maps.LatLng(41.057814980291,-85.329851919709);
        var marker_0 = new google.maps.Marker({
              position: Latlng_0,
              title:"0",
              icon: image_0});

        marker_0.setMap(map);

        google.maps.event.addListener(marker_0, 'click', function() {
            infowindow_0.open(map,marker_0);
        });

    //**************************************************************
        //Add 2nd marker
        //**************************************************************
        var contentString_1='<strong>Club name: Roanoke</strong>';

        var infowindow_1 = new google.maps.InfoWindow({
            content: contentString_1
        });


        var image_1 = '/js/markers/marker2.png';
        var Latlng_1 = new google.maps.LatLng(41.17805990,-85.4436640);
        var marker_1 = new google.maps.Marker({
         position: Latlng_1,
        title:"1",
        icon: image_1});

        marker_1.setMap(map);

        google.maps.event.addListener(marker_1, 'click', function() {
            infowindow_1.open(map,marker_1);
        });


}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;            
 </script>
4

1 に答える 1

3

はい、これは簡単に行うことができます:

  1. 各マーカーを記述するデータの配列を作成します。
  2. その配列の 1 つのエントリの説明に基づいて単一のマーカーを追加する関数を記述します。
  3. その配列の各エントリに対してその関数を呼び出します。

したがって、動的に生成する必要がある唯一の部分は、そのデータの配列です。実際のマーカー コードはすべて、すべてのマーカーで共有されます。

このような：

var map;

var places = [
    {
        lat: 41.057814980291,
        lng: -85.329851919709,
        image: 'marker1',
        title: '0',
        club: 'Fort Wayne Time Corners'
    },
    {
        lat: 41.17805990,
        lng: -85.4436640,
        image: 'marker2',
        title: '1',
        club: 'Roanoke'
    }
];

function initialize() {
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(41.056466,-85.3312009),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

    for( var i = 0;  i < places.length;  i++ ) {
        addPlace( places[i] );
    }

    function addPlace( place ) {
        var content = '<strong>Club name: ' + place.club + '</strong>';
        var infowindow = new google.maps.InfoWindow({
            content: content
        });

        var image = '/js/markers/' + place.image + '.png';
        var latlng = new google.maps.LatLng( place.lat, place.lng );
        var marker = new google.maps.Marker({
            position: latlng,
            title: place.title,
            icon: image
        });

        marker.setMap( map );

        google.maps.event.addListener( marker, 'click', function() {
            infowindow.open( map, marker );
        });
    }
}

function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js&sensor=false&callback=initialize";
    document.body.appendChild(script);
}

window.onload = loadScript;
于 2013-06-21T03:13:02.347 に答える