gmap3을 사용하는 맞춤 InfoWindow 및 마커

gmap3을 사용하여 내가 지정한 정보의 InfoWindow로 Google지도를 만듭니다. 작동하지만 InfoWindow를 사용자 정의하여 둥근 사각형으로 지정하고 화살표가없는 위치로 및 실제 위치에 사용자 지정 표식이 필요합니다.gmap3을 사용하는 맞춤 InfoWindow 및 마커

어떻게하면됩니까?

는 (나는 약간 혼동 될 gmap3의 문서를 찾을 수 있습니다.)

여기

는 JS 내가 현재 사용하고 있습니다 : 내가 더 가진 둥근 사각형에 정보창을 변경하지 않을 것이다 어떻게

$("#map").gmap3({ 
map:{ 
    options:{ 
    zoom:18, 
    mapTypeControl: true, 
    mapTypeControlOptions: { 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
    }, 
    navigationControl: true, 
    scrollwheel: true, 
    streetViewControl: true 
    } 
}, 
infowindow:{ 
    address:"Boulder, Colorado", 
    options:{ 
    content: "Text" 
    } 
} 
});

을 화살표와 맞춤 마커?

출처

2013-03-15 L84

나는 것으로 설명 infobox 사용합니다 :

이 클래스는 google.maps.InfoWindow처럼 동작하지만, 고급 스타일링 몇 가지 추가 속성을 지원합니다. 인 박스는 을지도 라벨로 사용할 수도 있습니다. 이 gmap3 라이브러리를 기반 그런 의미에서 난 당신이 "정상적인 방법으로 일명. google maps api v3 #infowindows"을 사용하여 정보창 (들)을 초기화 시작할 필요가 있다고 생각하지 않습니다 그러나

. 그러나 내가 원하는대로 일하면서 정보를 얻었으므로 정보 기사를 추천 할 것입니다.

또한 packed 및 packed 버전이 제공되므로 사용하는 코드를 완전히 제어 할 수 있습니다. 이 링크 밖으로

확인 :

편집 :는 또한 사용자 정의 마커가 질문했다

때문에 고소하겠습니다. gmap3이 마커 옵션에 값을 전달하는 것을 지원하므로 쉽게 사용자 정의 할 수 있습니다. (물론 필요에 따라.) 단순히 다음과 같이 할 수있는 마커의 아이콘을 변경하려면 :

... somewhere within initialization ... 
    marker:{ 
     options:{ 
      draggable: false, 
      icon: "urlToYourImage.png", 
      optimized: false // needed to be false when using images 
     }, 
...

을하지만 당신은 진짜 팁을 물어 여기에 있다면, 나는 gmap3를 전혀 사용하지 않는 것이 좋습니다) - 나는 그것을 시도하고 결국 gmap3가 혼란스럽고 구글 맵스 api의 상단에 코드를 숨기고 이후 단지 정상적인 구글 맵 API를 v3을 사용하도록 바꿨다. 그러나 물론 당신의 선택.

건배.

출처

2013-03-15 21:23:24

이것은 꽤 오래된 질문이지만, gmap3과 Google Maps API에 대한 최근 경험을 바탕으로 약간의 정보를 추가 할 수 있다고 생각했습니다.

infobox 라이브러리 (gmap3 라이브러리로 작업하기 위해 약간의 mare가 있음)를 사용하는 대신, 마커 클릭 이벤트를 바인딩하여 스타일을 지정할 수있는 오버레이를 작성했습니다. 그러나 나는 원했다.

그래서, 난 내 JSON을 통해 내 GMAP 기본값

// Gmap Defaults 
$map.gmap3({ 
    map:{ 
     options:{ 
      center:[46.578498,2.457275], 
      zoom: 5 
     } 
    } 
});

I 루프를 설정

// JSON 
var data = JSON.parse('[ 
{ 
    "address":"New Street, Salisbury, UK", 
    "content":"hello world from salisbury" 
}, 
{ 
    "address":"86000 Poitiers, France" , 
    "content":"hello world from poitiers" 
}, 
{ 
    "address":"66000 Perpignam, France", 
    "content":"hello world from perpignam" 
} 

]');

과 같이 내 모든 주소로 내 JSON을 가지고지도를 구축 할 것

// Json Loop 
$.each(data, function(key, val) { 
    $map.gmap3({ 
     marker:{ 
      values:[{ 
       address:val.address, 
       events: { 
        click: function() { 

         gmap_clear_markers(); 

         $(this).gmap3({ 
          overlay:{ 
           address:val.address, 
           options:{ 
            content: '<div class="infobox">'+val.content+'</div>', 
            offset:{ 
             y:-32, 
             x:12 
            } 
           } 
          } 
         }); 
        } 
       } 
      }] 
     } 
    }); 
});

gmap_clear_markers() 기능은 다른 모든 infobox (오버레이) 인스턴스가 제거되도록 트리거합니다. 내 JSON에 원하는

// Function Clear Markers 
function gmap_clear_markers() { 
    $('.infobox').each(function() { 
     $(this).remove(); 
    }); 
}

는 지금은 많은 주소를 추가 할 수 있습니다 그리고 내가 따라 스타일 수있는 수준의 정보 상자와 단지 일반 DIV 래퍼과 정보 상자를해야합니다.

이것이 최선의 방법인지 확실하지 않습니다. 저는 이것이 저에게 효과가 있었다고 말하고 있습니다.

여기에 JSFIDDLE example

출처

2013-09-27 09:43:55

gmap3을 사용하는 맞춤 InfoWindow 및 마커

답변

관련 문제