-1
にマージすることはできません。GoogleマップAPI：ヒートマップ＆検索 - 私はTwitterから特定のトピック/キーワードの街検索可能なヒートマップを生成するには、GoogleマップやTwitter APIので動作するようにしようとしている単一のマップ
私はヒートマップが働くと、検索マップは、個別に作業していますが、何を一のマップは都市で検索することができヒートマップを持っているように、2つのマップをマージする方法上の任意のドキュメントを見つけることができません。
あなたは&callback=initAutocompleteで削除した場合：これはあなたのヒートマップが表示されます
script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=visualization,places&callback=initMap&callback=initAutocomplete"
が、検索バーなし。あなたがそれを残すと、ヒートマップボタンが付いた検索バーが表示されます。検索バーは動作しますが、あなたがサンフランシスコに移動した場合、ヒートマップにはポイントがありません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Heatmaps</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
background-color: #fff;
border: 1px solid #999;
left: 25%;
padding: 5px;
position: absolute;
top: 10px;
z-index: 5;
}
#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;
}
</style>
</head>
<body>
<div id="floating-panel">
<button onclick="toggleHeatmap()">Toggle Heatmap</button>
<button onclick="changeGradient()">Change gradient</button>
<button onclick="changeRadius()">Change radius</button>
<button onclick="changeOpacity()">Change opacity</button>
</div>
<div id="map"></div>
<script>
// This example requires the Visualization library. Include the libraries=visualization
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
var map, heatmap;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: {lat: 37.775, lng: -122.434},
mapTypeId: google.maps.MapTypeId.SATELLITE
});
heatmap = new google.maps.visualization.HeatmapLayer({
data: getPoints(),
map: map
});
}
function toggleHeatmap() {
heatmap.setMap(heatmap.getMap() ? null : map);
}
function changeGradient() {
var gradient = [
'rgba(0, 255, 255, 0)',
'rgba(0, 255, 255, 1)',
'rgba(0, 191, 255, 1)',
'rgba(0, 127, 255, 1)',
'rgba(0, 63, 255, 1)',
'rgba(0, 0, 255, 1)',
'rgba(0, 0, 223, 1)',
'rgba(0, 0, 191, 1)',
'rgba(0, 0, 159, 1)',
'rgba(0, 0, 127, 1)',
'rgba(63, 0, 91, 1)',
'rgba(127, 0, 63, 1)',
'rgba(191, 0, 31, 1)',
'rgba(255, 0, 0, 1)'
]
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
function changeRadius() {
heatmap.set('radius', heatmap.get('radius') ? null : 20);
}
function changeOpacity() {
heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}
// Heatmap data: 500 Points
function getPoints() {
return [
new google.maps.LatLng(37.782551, -122.445368),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
new google.maps.LatLng(37.782919, -122.442815),
new google.maps.LatLng(37.782992, -122.442112),
new google.maps.LatLng(37.783100, -122.441461),
new google.maps.LatLng(37.783206, -122.440829),
new google.maps.LatLng(37.783273, -122.440324),
new google.maps.LatLng(37.783316, -122.440023),
new google.maps.LatLng(37.783357, -122.439794),
new google.maps.LatLng(37.783371, -122.439687),
new google.maps.LatLng(37.783368, -122.439666),
new google.maps.LatLng(37.783383, -122.439594),
new google.maps.LatLng(37.783508, -122.439525),
new google.maps.LatLng(37.783842, -122.439591),
new google.maps.LatLng(37.784147, -122.439668),
new google.maps.LatLng(37.784206, -122.439686),
new google.maps.LatLng(37.784386, -122.439790),
new google.maps.LatLng(37.784701, -122.439902),
new google.maps.LatLng(37.784965, -122.439938),
new google.maps.LatLng(37.785010, -122.439947),
new google.maps.LatLng(37.785360, -122.439952),
new google.maps.LatLng(37.785715, -122.440030),
new google.maps.LatLng(37.786117, -122.440119),
new google.maps.LatLng(37.786564, -122.440209),
new google.maps.LatLng(37.786905, -122.440270),
new google.maps.LatLng(37.786956, -122.440279),
new google.maps.LatLng(37.800224, -122.433520),
new google.maps.LatLng(37.800155, -122.434101),
new google.maps.LatLng(37.800160, -122.434430),
new google.maps.LatLng(37.800378, -122.434527),
new google.maps.LatLng(37.800738, -122.434598),
new google.maps.LatLng(37.800938, -122.434650),
new google.maps.LatLng(37.801024, -122.434889),
new google.maps.LatLng(37.800955, -122.435392),
new google.maps.LatLng(37.800886, -122.435959),
new google.maps.LatLng(37.800811, -122.436275),
new google.maps.LatLng(37.800788, -122.436299),
new google.maps.LatLng(37.800719, -122.436302),
new google.maps.LatLng(37.800702, -122.436298),
new google.maps.LatLng(37.800661, -122.436273),
new google.maps.LatLng(37.800395, -122.436172),
new google.maps.LatLng(37.800228, -122.436116),
new google.maps.LatLng(37.800169, -122.436130),
new google.maps.LatLng(37.800066, -122.436167),
new google.maps.LatLng(37.784345, -122.422922),
new google.maps.LatLng(37.784389, -122.422926),
new google.maps.LatLng(37.784437, -122.422924),
new google.maps.LatLng(37.784746, -122.422818),
new google.maps.LatLng(37.785436, -122.422959),
new google.maps.LatLng(37.786120, -122.423112),
new google.maps.LatLng(37.786433, -122.423029),
new google.maps.LatLng(37.786631, -122.421213),
new google.maps.LatLng(37.786660, -122.421033)
];
}
</script>
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map"></div>
<script>
// This example adds a search box to a map, using the Google Place Autocomplete
// feature. People can enter geographical searches. The search box will return a
// pick list containing a mix of places and predicted search terms.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initAutocomplete() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// 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: 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);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?libraries=visualization,places&callback=initMap&callback=initAutocomplete">
</script>
</body>
</html>
はこのいただきありがとうございます。私はオフィスでこれで私を助けしようとしている5他の人々を持っていました。ライフセーバー。 – Wakedude