홈>
현재 속성 맵을 만들기 위해 Google Maps API와 함께 작업하고 있습니다. 클릭 할 때 열리는 infoWindows로 마커를지도에 가져 오는 사용자 정의 게시물 유형을 통해 제어했습니다.
이제지도 아래에서 속성을 클릭하면지도 외부에서 속성을 클릭 할 때지도가 마커로 이동하고 정보창을 열 수 있도록지도 아래에 속성을 표시하는 일종의 방법을 구현해야합니다.
현재 전혀 작동하지 않습니다. 저는 매우 강력한 자바 스크립트 코더가 아니므로 도움을 주시면 감사하겠습니다.
현재지도 아래에 게시물 유형 항목 목록이 있지만 링크 할 방법이 없습니다 ..
지도에 대한 코드 스 니펫은 다음과 같습니다.
/* MARKER 1 */
function add_marker( $marker, map ) {
// var
var image = 'http://www.masonyoung.co.uk/wp-content/uploads/2015/08/mason-new.png';
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );
// create marker
var marker = new google.maps.Marker
({
position : latlng,
map : map,
icon: image
});
// add to array
map.markers.push( marker );
// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
// create info window
var infowindow = new google.maps.InfoWindow({
content : $marker.html()
});
// show info window when marker is clicked
google.maps.event.addListener(marker, 'mouseover', function() {
if($('.gm-style-iw').length) {
$('.gm-style-iw').parent().hide();
}
infowindow.open( map, marker );
});
google.maps.event.addListener(marker, "mouseout", function() {
marker.setAnimation(null);
});
}
}
이것은지도 아래에있는 속성 목록에 대해 지금까지 가지고있는 코드입니다.
<?php
$maps = get_posts( array(
'post_type' => 'properties',
'posts_per_page' => -1
) );?>
<?php foreach($maps as $map): ?>
<?php
$location = get_field('location',$map->ID);
$price = get_field('price',$map->ID);
$squareft = get_field('sq_ft_total',$map->ID);
$buylet = get_field('to_buy_or_to_let',$map2->ID);
$link = the_permalink($map->ID);
?>
<div id="map_list">
<ul id="map-locations">
<li data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
<h3><a href="<?php echo post_permalink( $map ); ?>"><?php echo $location['address']; ?></a></h3>
</li>
</ul>
</div>
<?php endforeach; ?>
- 답변 # 1
관련 자료
- command line interface - CLI를 사용하여 고정 외부 IP 주소를 Google 클라우드 컴퓨팅 인스턴스에 연결하는 방법
- DNS 변경없이 Google CDN (외부 출처)으로 마이그레이션
- 기본값 이외의 시트를 사용하여 BigQuery Clould Shell의 Google 시트에서 외부 테이블 만들기
- go - 연결 시간 초과 외부 IP Google 컴퓨팅 엔진에 액세스
- Firebase Google Cloud Function 호출 외부 엔드 포인트
- App Engine 외부에서 Google Cloud Task를 사용하는 방법은 무엇입니까?
- Google App Engine PHP는 외부 Microsoft SQL Server 데이터베이스에 연결
- wordpress - Google App Engine PHP 72 환경에서 외부 HTTP 연결을 만들 수 없습니다
- javascript - 기능 속성에 따라 외부 버튼으로 Google Maps API 데이터 계층 기능을 전환합니다
- vue.js - vue google지도 - infowindows 배열 클릭 세부 정보 열기 infowindow
관련 질문
- javascript : 버튼을 클릭하면 Google지도에 마커 추가하십시오
- javascript : 키 업 및 키 다운 키를 사용하지 않도록 설정하는 방법
- javascript : chunked $ .each ()를 완료 한 후 jquery 실행 code
- javascript : 클래스 이름에서 숫자를 가져 와서 변수에서 사용할 수 있습니다.
- javascript : 테이블 행 값을 두 개의 개별 테이블에 주입하는 방법
- javascript : jQuery의 끌기 요소의 특정 요소에서 드래그를 시작하면 드래그를 사용하지 않겠습니까?
- javascript : fun2 전에 fun1 ()이 완료되었는지 확인하는 방법은 무엇입니까?
- javascript : 자바 스크립트 /jQuery 콜백 혼란
- javascript : Ajax jQuery 요청에서 '날짜'헤더를 통과 할 수 없음
- javascript : DataTable에서 색상을 변경합니다
가장 쉬운 방법은 각 마커를 마커 배열에 추가하는 것입니다. 그런 다음 마커의 마커 색인에 대한 참조가 포함 된 각 마커에 대한 링크를 만듭니다. 이렇게하면 외부 링크를 클릭 할 때 마커 자체에서 클릭 이벤트를 트리거 할 수 있습니다.
JSFiddle 데모