如何在現有標記下添加Google地圖標記

Question

當我搜索我的地圖時，它添加了一個圖釘，但它覆蓋了原始標記，使用戶無法點擊（例如，如果您在my map上搜索「切爾滕納姆」 。

有沒有辦法在現有的標記下添加搜索標記？

我試過玩zIndex，但無法讓它工作。

Codepen地圖在這裏：http://codepen.io/anon/pen/eZBreY

任何想法？

Answer 1

1. 一種選擇是查詢FusionTable和渲染標記爲自帶谷歌地圖JavaScript API V3的標記，然後用zIndex會工作。

看着你的FusionTable，它不包含座標，所以這是不可能的，除非你更新它。

另一種選擇是使標記物不會遮擋標記物的透明圈：

concept fiddle

代碼片斷：

function initAutocomplete() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: new google.maps.LatLng(53.53081624504545, -3.0102), 
 
    zoom: 6, 
 
    // maxZoom: 10, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 

 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend-open')); 
 
    map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(document.getElementById('googft-legend')); 
 

 
    layer = new google.maps.FusionTablesLayer({ 
 
    map: map, 
 
    heatmap: { 
 
     enabled: false 
 
    }, 
 
    query: { 
 
     select: "col3", 
 
     from: "1HYIx5EfvhdMJY_oQAedrrbzONPviYJocD0DMz53V", 
 
     where: "col9 \x3d \x27YES\x27" 
 
    }, 
 
    options: { 
 
     styleId: 3, 
 
     templateId: 2 
 
    } 
 
    }); 
 

 
    // Create the search box and link it to the UI element. 
 
    var input = document.getElementById('pac-input'); 
 
    var searchBox = new google.maps.places.SearchBox(input); 
 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 
    // Bias the SearchBox results towards current map's viewport. 
 
    map.addListener('bounds_changed', function() { 
 
    searchBox.setBounds(map.getBounds()); 
 
    }); 
 
    var markers = []; 
 
    // Listen for the event fired when the user selects a prediction and retrieve 
 
    // more details for that place. 
 
    searchBox.addListener('places_changed', function() { 
 
    var places = searchBox.getPlaces(); 
 
    if (places.length == 0) { 
 
     return; 
 
    } 
 
    // Clear out the old markers. 
 
    markers.forEach(function(marker) { 
 
     marker.setMap(null); 
 
    }); 
 
    markers = []; 
 
    // For each place, get the icon, name and location. 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    places.forEach(function(place) { 
 
     var icon = { 
 
     url: place.icon, 
 
     size: new google.maps.Size(71, 71), 
 
     origin: new google.maps.Point(0, 0), 
 
     anchor: new google.maps.Point(17, 34), 
 
     scaledSize: new google.maps.Size(25, 25) 
 
     }; 
 
     // Create a marker for each place. 
 
     markers.push(new google.maps.Marker({ 
 
     map: map, 
 
     icon: { 
 
      path: google.maps.SymbolPath.CIRCLE, 
 
      scale: 10, 
 
      fillColor: "#00FF00", 
 
      fillOpacity: 0.4, 
 
      strokeWeight: 1, 
 
      strokeOpacity: 0.4, 
 
      strokeColor: "#00FF00", 
 
      anchor: new google.maps.Point(0, 0) 
 
     }, //icon, 
 
     title: place.name, 
 
     position: place.geometry.location 
 
     })); 
 
     markers.push(new google.maps.Marker({ 
 
     map: map, 
 
     icon: { 
 
      path: google.maps.SymbolPath.CIRCLE, 
 
      scale: 3, 
 
      fillColor: "#0000FF", 
 
      fillOpacity: 0.4, 
 
      strokeWeight: 1, 
 
      strokeOpacity: 0.4, 
 
      strokeColor: "#0000FF", 
 
      anchor: new google.maps.Point(0, 0) 
 
     }, //icon, 
 
     title: place.name, 
 
     position: place.geometry.location 
 
     })); 
 

 
     if (place.geometry.viewport) { 
 
     // Only geocodes have viewport. 
 
     bounds.union(place.geometry.viewport); 
 
     } else { 
 
     bounds.extend(place.geometry.location); 
 
     } 
 
    }); 
 
    map.fitBounds(bounds); 
 

 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initAutocomplete);

html, 
 
body { 
 
    height: 500px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 500px; 
 
    max-width: 100%; 
 
} 
 
.controls { 
 
    margin-top: 10px; 
 
    border: 1px solid transparent; 
 
    border-radius: 2px 0 0 2px; 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    height: 32px; 
 
    outline: none; 
 
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); 
 
} 
 
#pac-input { 
 
    background-color: #fff; 
 
    font-family: Roboto; 
 
    font-size: 15px; 
 
    font-weight: 300; 
 
    margin-left: 12px; 
 
    padding: 0 11px 0 13px; 
 
    text-overflow: ellipsis; 
 
    width: 300px; 
 
} 
 
#pac-input:focus { 
 
    border-color: #4d90fe; 
 
} 
 
.pac-container { 
 
    font-family: Roboto; 
 
} 
 
#type-selector { 
 
    color: #fff; 
 
    background-color: #4d90fe; 
 
    padding: 5px 11px 0px 11px; 
 
} 
 
#type-selector label { 
 
    font-family: Roboto; 
 
    font-size: 13px; 
 
    font-weight: 300; 
 
} 
 
#target { 
 
    width: 345px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<input id="pac-input" class="controls" type="text" placeholder="Search for a screening near you"> 
 
<div id="map"></div>