infoWindow를 커스텀 마커의 맨 위에 올리려면 어떻게해야합니까?

Question

내 코드 데모는 다음과 같습니다. jsfiddle

Google 마커 대신 사용할 맞춤 마커를 만들었습니다. 그런 다음 표시된 위치의 주소가 포함 된 infoWindow를 표시하려고합니다. 그러나 infoWindow는 항상 사용자 정의 마커와 같은 위치를 가리 킵니다. 내가 맞춤 마커 (예 : this demo) 상단에 있기를 원합니다. 읽어 주셔서 감사합니다.

HTML :

<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script> 
<div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div> 

CSS :

.customMarker { 
    position: absolute; 
    cursor: pointer; 
    background: #9acfea; 
    width: 100px; 
    height: 100px; 
    margin-left: -50px; 
    margin-top: -110px; 
    border-radius: 10px; 
    padding: 0; 
} 

.customMarker:after { 
    content: ""; 
    position: absolute; 
    bottom: -10px; 
    left: 40px; 
    border-width: 10px 10px 0; 
    border-style: solid; 
    border-color: #9acfea transparent; 
    display: block; 
    width: 0; 
} 

.friendsCustomMarker { 
    position: absolute; 
    cursor: pointer; 
    background: #f57977; 
    width: 100px; 
    height: 100px; 
    margin-left: -50px; 
    margin-top: -110px; 
    border-radius: 10px; 
    padding: 0; 
} 

.friendsCustomMarker:after { 
    content: ""; 
    position: absolute; 
    bottom: -10px; 
    left: 40px; 
    border-width: 10px 10px 0; 
    border-style: solid; 
    border-color: #f57977 transparent; 
    display: block; 
    width: 0; 
} 

.customMarker img, .friendsCustomMarker img { 
    width: 90px; 
    height: 90px; 
    margin: 5px; 
    border-radius: 10px 
} 

JS :

Answer 1

는 다음을 수행해야합니다

1. 적절
2. pixelOffset을 설정 정보창

working jsfiddle

작업 코드의 위치 설정 :

// Custom marker 
 
function CustomMarker(latlng, map, imageSrc) { 
 
    this.latlng_ = latlng; 
 
    this.imageSrc = imageSrc; 
 
    // Once the LatLng and text are set, add the overlay to the map. This will 
 
    // trigger a call to panes_changed which should in turn call draw. 
 
    this.setMap(map); 
 
} 
 

 
CustomMarker.prototype = new google.maps.OverlayView(); 
 

 
CustomMarker.prototype.draw = function() { 
 
    // Check if the div has been created. 
 
    var div = this.div_; 
 
    if (!div) { 
 
    // Create a overlay text DIV 
 
    div = this.div_ = document.createElement('div'); 
 
    // Create the DIV representing our CustomMarker 
 
    div.className = "customMarker"; 
 

 

 
    var img = document.createElement("img"); 
 
    img.src = this.imageSrc; 
 
    div.appendChild(img); 
 
    /*google.maps.event.addDomListener(div, "click", function (event) { 
 
    google.maps.event.trigger(me, "click"); 
 
    });*/ 
 

 
    // Then add the overlay to the DOM 
 
    var panes = this.getPanes(); 
 
    panes.overlayImage.appendChild(div); 
 
    } 
 

 
    // Position the overlay 
 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); 
 
    if (point) { 
 
    div.style.left = point.x + 'px'; 
 
    div.style.top = point.y + 'px'; 
 
    } 
 
}; 
 

 
CustomMarker.prototype.remove = function() { 
 
    // Check if the overlay was on the map and needs to be removed. 
 
    if (this.div_) { 
 
    this.div_.parentNode.removeChild(this.div_); 
 
    this.div_ = null; 
 
    } 
 
}; 
 

 
CustomMarker.prototype.getPosition = function() { 
 
    return this.latlng_; 
 
}; 
 
$(function() { 
 
    var lat = 44.88623409320778, 
 
    lng = -87.86480712897173, 
 
    latlng = new google.maps.LatLng(lat, lng); 
 

 
    var mapOptions = { 
 
     center: new google.maps.LatLng(lat, lng), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
 
     panControl: true, 
 
     panControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_RIGHT 
 
     }, 
 
     zoomControl: true, 
 
     zoomControlOptions: { 
 
     style: google.maps.ZoomControlStyle.LARGE, 
 
     position: google.maps.ControlPosition.TOP_left 
 
     } 
 
    }, 
 
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
 
    marker = new CustomMarker(latlng, map, 'http://d33vud085sp3wg.cloudfront.net/hnmsBpTlK58BG3iOK3G4Cd5Iqlw/thumb.jpg'); 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    infoWindow.setContent('Here is an info window!'); 
 
    infoWindow.setPosition(latlng); 
 
    infoWindow.setOptions({ 
 
    pixelOffset: new google.maps.Size(0, -110) 
 
    }); 
 
    infoWindow.open(map); 
 
});

.customMarker { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    background: #9acfea; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: -50px; 
 
    margin-top: -110px; 
 
    border-radius: 10px; 
 
    padding: 0; 
 
} 
 
.customMarker:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -10px; 
 
    left: 40px; 
 
    border-width: 10px 10px 0; 
 
    border-style: solid; 
 
    border-color: #9acfea transparent; 
 
    display: block; 
 
    width: 0; 
 
} 
 
.friendsCustomMarker { 
 
    position: absolute; 
 
    cursor: pointer; 
 
    background: #f57977; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin-left: -50px; 
 
    margin-top: -110px; 
 
    border-radius: 10px; 
 
    padding: 0; 
 
} 
 
.friendsCustomMarker:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -10px; 
 
    left: 40px; 
 
    border-width: 10px 10px 0; 
 
    border-style: solid; 
 
    border-color: #f57977 transparent; 
 
    display: block; 
 
    width: 0; 
 
} 
 
.customMarker img, 
 
.friendsCustomMarker img { 
 
    width: 90px; 
 
    height: 90px; 
 
    margin: 5px; 
 
    border-radius: 10px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://maps.google.com/maps/api/js?libraries=places&region=uk&language=en&sensor=true"></script> 
 
<div id="map_canvas" style="height: 350px;width: 500px;margin: 0.6em;"></div>

을

Answer 2

그냥 pixelOffset 속성 사용

var infoWindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0, -100)});