如何在现有标记下方添加 Google 地图标记

Question

When I search my map it adds a pin, but it covers the original marker making it impossible for the user to click (eg if you search for ' Cheltenham ' on my map ).

Is there a way to add the search marker beneath existing markers?

I've tried playing round with zIndex but couldn't get it to work.

Codepen of map here: http://codepen.io/anon/pen/eZBreY

Any ideas?

Answer 1

1. One option would be to query the FusionTable and render the markers as native Google Maps Javascript API v3 markers, then zIndex will work.

Looking at your FusionTable, it doesn't contain coordinates, so that won't be possible unless you update it.

2. Another option would be to make the marker a transparent circle that doesn't obscure the markers:

concept fiddle

code snippet:

 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>