홈>
현재 속성 맵을 만들기 위해 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 - JQuery의 ERR_ABORTED 429 (너무 많은 요청)
- jquery - javascript regex 내에서 변수를 전달하는 방법은 무엇입니까?
- javascript - eventtarget에 대한 스크립트 개정
- javascript - 특수 문자 (&)가있는 jQuery 메서드 find ()
- html - JavaScript에서 JSON 객체를 통해 반복
- javascript - each () 및 ul 및 li 요소에 대한 prepend 함수의 jQuery 문제
- javascript - 같은 페이지에 같은 클래스가있는 여러 개의 매끄러운 슬라이더?
- javascript - 데이터 테이블의 여러 자식 행, aspnet 코어의 SQL Server 데이터
- javascript - 부트 스트랩에서로드되지 않는 모달 예제
- Javascript/HTML - 자바 스크립트/html - onclick으로 기능 반복
가장 쉬운 방법은 각 마커를 마커 배열에 추가하는 것입니다. 그런 다음 마커의 마커 색인에 대한 참조가 포함 된 각 마커에 대한 링크를 만듭니다. 이렇게하면 외부 링크를 클릭 할 때 마커 자체에서 클릭 이벤트를 트리거 할 수 있습니다.
JSFiddle 데모