루프 내에서 정보 윈도우를 사용하기

Question

나는 Wordpress의 일련의 게시물에서 메타 데이터로부터지도를 생성하고 있습니다. 지도와 포인트는 잘 생성되지만 클릭하면 포인트가 아니라 동일한 장소에서 항상 생성되는 정보를 클릭합니다. 사람이 도와 주실 래요, 나는 그것이 V2에서 확인 작업을했지만, 나는 맵이와 루프에서 생성 3.

위해 그것을 밖으로 질수 그림 : 여기

function initialize(){ 
    var myLatlng = new google.maps.LatLng(45, -123); 
    var myOptions = { 
      zoom: 3, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
    var map = new google.maps.Map(document.getElementById('travel_map'), myOptions); 
    <?php if (have_posts()) : while (have_posts()) : the_post(); 
     $my_post = get_post($post_id); 
     $mapTitle = $my_post->post_title; 
     $lat = get_post_meta($post->ID, 'latitude', true); 
     $long = get_post_meta($post->ID, 'longitude', true); 
     ?> 

    var contentString = 'test'; 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString 
    }); 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(<?php echo $lat . ", " . $long ?>), 
     map: map 
    }); 

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

<?php endwhile; ?> 
<?php endif; ?> 
} 

Answer 1

http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/

페이지에서 여러 마커 및 여러 정보 창을 사용하는 방법에 대해 설명합니다.

그리고 여기가 구현의 :

<script type="text/javascript"> 

    var infowindow = null; 
    var markers = []; 
    function initialize(){ 
    var myLatlng = new google.maps.LatLng(45, -123); 
    var myOptions = { 
      zoom: 3, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

    var map = new google.maps.Map(document.getElementById('travel_map'), myOptions); 

    infowindow = new google.maps.InfoWindow({ 
     content: "holding..." 
    }); 

    <?php if (have_posts()) : while (have_posts()) : the_post(); 
     $my_post = get_post($post_id); 
     $mapTitle = $my_post->post_title; 
     $lat = get_post_meta($post->ID, 'latitude', true); 
     $long = get_post_meta($post->ID, 'longitude', true); 
     ?> 

    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(<?php echo $lat . ", " . $long ?>), 
     map: map, 
     html: "<b><?php echo $mapTitle; ?></b><br><br><?php echo $my_post; ?>" 
    }); 

    markers.push(marker); 

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


<?php endwhile; ?> 
<?php endif; ?> 
} 
</script>