내 웹 사이트에 동적 인 Google지도를 추가하는 방법은 무엇입니까?

Question

비즈니스 디렉토리 웹 사이트를 만들었으므로 Google지도를 내 웹 사이트에 추가해야합니다. 한 사용자가 특정 도시, 지역 및 검색 카테고리를 선택한 경우 (예 : 호텔의 경우) 호텔 이름과 주소를 나열해야하지만 문제는지도에 나열된 모든 호텔 아이콘을 표시해야한다는 것입니다.

나는 HTML, CSS, MYSQL, JS를 사용하여 웹 사이트를 디자인했습니다.

나는 이미 WordPress에서 시도했지만 제대로 실행할 수 없습니다.

가능합니까 ?? 거기에 다른 소스가 있습니까? 도와주세요 ..

Answer 1

장소 검색 창에 Google지도를 추가하면이 작업을 수행하는 데 도움이됩니다. 예제 코드

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

Answer 2

에 대한 URL 아래

이

점검 디렉토리 워드 프레스 테마here에서보세요하지만 물론 당신이 자신을 개발해야합니다. 이것은 당신이 당신의 프로젝트에 할 수있는 것을 도울 것입니다!

구글 맵에 마커를 두는 것에 대해서는 google map documentation에 나와있는 샘플을 살펴보십시오.

위도와 경도를 사용하여지도에 개체를 표시합니다. 자신 만의 검색을 정의하십시오.

{ 
    search_result: [ 
     { 
      latLng: [40.71958306715651,-74.0379810333252], 
      options: { 
       icon: "http://preview.ait-themes.com/directory/wp1/wp-content/uploads/sports.png", 
       shadow: "http://preview.ait-themes.com/directory/wp1/wp-content/themes/directory/design/img/map-icon/icon-shadow.png", 
      }, 
      data: '<div class="marker-holder"><div class="marker-content with-image"><img src="http://preview.ait-themes.com/directory/wp1/wp-content/themes/directory/tn.php?src=http%3A%2F%2Fpreview.ait-themes.com%2Fdirectory%2Fwp1%2Fwp-content%2Fuploads%2Fbigstock-young-people-dancing-in-a-stud-34308962.jpg&amp;w=120&amp;h=160" alt=""><div class="map-item-info"><div class="title">'+"Dance & Relax"+'</div><div class="address">'+"276 Canal Street, New York, NY 10013, United States"+'</div><a href="http://preview.ait-themes.com/directory/wp1/item/dance-relax/" class="more-button">' + "VIEW MORE" + '</a></div><div class="arrow"></div><div class="close"></div></div></div></div>' 
     }, 
     { 
      latLng: [40.7053026089413,-73.95326614379883], 
      options: { 
       icon: "http://preview.ait-themes.com/directory/wp1/wp-content/uploads/sports.png", 
       shadow: "http://preview.ait-themes.com/directory/wp1/wp-content/themes/directory/design/img/map-icon/icon-shadow.png", 
      }, 
      data: '<div class="marker-holder"><div class="marker-content with-image"><img src="http://preview.ait-themes.com/directory/wp1/wp-content/themes/directory/tn.php?src=http%3A%2F%2Fpreview.ait-themes.com%2Fdirectory%2Fwp1%2Fwp-content%2Fuploads%2Fbigstock-All-Metal-Bicycle-2378091.jpg&amp;w=120&amp;h=160" alt=""><div class="map-item-info"><div class="title">'+"Bike PRO"+'</div><div class="address">'+"276 Canal Street, New York, NY 10013, United States"+'</div><a href="http://preview.ait-themes.com/directory/wp1/item/bike-pro/" class="more-button">' + "VIEW MORE" + '</a></div><div class="arrow"></div><div class="close"></div></div></div></div>' 
     } 
    ] 
} 

사용 구글지도에이 매핑하는 객체 :

그래서 search.php에서 샘플 결과는 다음과 JSON이 될 수 있습니다.