2012-02-16 15 views
1

これは現在問題なく機能しています。情報ウィンドウはあまりにも大きくて醜いだけです。私はそれがよりカスタマイズ可能なので、infoboxを実装したい。私はどのように私はポップアップマーカーウィンドウを作成するためにinfoboxオブジェクトを使用して私を導くことができますか?infwindowの代わりにinfoboxを使用するにはどうすればよいですか?

var map,geocoder; 
var bound = new google.maps.LatLngBounds(); 
function initializeMap() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(39.88445,-86.11084); 
    var myOptions = { 
    maxZoom: 14, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
} 
function codeAddress() { 
    var infowindow = new google.maps.InfoWindow({}); 
    $('.eachLocation').each(function(index) { 
     var counter=index+1; 
     var addy = $(this).parent().find('span.LocAddHidden').text(); 
     geocoder.geocode({ 'address': addy}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) 
      { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        position: results[0].geometry.location, 
        map: map,    
        title:addy, 
        }); 
       //Adding a click event to the marker 
       google.maps.event.addListener(marker, 'click', function() { 
        infowindow.setContent('<div id=\"infowindow\" style="width:235px; height:105px;>' 
             +'Hello World'+'</div>'); 
        infowindow.open(map, this); 
       }); 
       bound.extend(marker.getPosition()); 
       map.fitBounds(bound); 
      } 
     });//geocode END 
     counter=counter+1; 
    }); 
} 

答えて

1

あなたは、Googleが提供している。この例を読んでする必要があります。 http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html

あなたはここで基本的なソースコードを見つけることができます:ビューソースします。http://グーグル・マップ・ユーティリティ・ライブラリ-V3を.googlecode.com/SVN /トランク/インフォボックス/例/インフォボックス - basic.html

あなたのページにこのプラグインを追加する必要があります。http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js

その後、あなたはいくつかのインフォボックスの代わりに、情報ウィンドウを実行することができる可能性、何かと私の場合は

function codeAddress() { 
    var infoboxOptions = { 
      content: '' 
      ,disableAutoPan: false 
      ,maxWidth: 0 
      ,pixelOffset: new google.maps.Size(0, 0) 
      ,zIndex: null 
      ,boxStyle: { 
       background:'' 
       ,opacity: 0.75 
      } 
      ,closeBoxMargin: "2px 2px 2px 2px" 
      ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif" 
      ,infoBoxClearance: new google.maps.Size(1,1) 
      ,isHidden: false 
      ,pane: "floatPane" 
      ,enableEventPropagation: false 
     }; 
    var ib = new InfoBox(infoboxOptions); 
    $('.eachLocation').each(function(index) { 
     var counter=index+1; 
     var addy = $(this).parent().find('span.LocAddHidden').text(); 
     geocoder.geocode({ 'address': addy}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) 
      { 
       map.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        position: results[0].geometry.location, 
        map: map,    
        title:addy, 
        html: 'Your HTML/text...' 
        }); 
       //Adding a click event to the marker 
       google.maps.event.addListener(marker, 'click', function() { 
        ib.setContent(marker.html); 
        ib.open(map,this); 
       }); 
       bound.extend(marker.getPosition()); 
       map.fitBounds(bound); 
      } 
     });//geocode END 
     counter=counter+1; 
    }); 
} 

、マーカーでは、私が使用して、自分のCSSを使用した素敵なdiv要素を持っている:

HTML:$(この)の.html()あなたの場合と同様

それぞれの内容を取得します

」.myClass'(あなたのケースで.eachLocation)

+0

ありがとうございました!神のお恵みがありますように! :) –

+0

歓迎です、私の喜び! – Valky

関連する問題