Как по верху карты (встроенной в сайт) разместить блок <div>
с произвольной информацией?
-
Пожалуйста, редактируйте свой вопрос, добавив в него свой код, чтобы пользователи смогли дать лаконичный ответ. В противном случае, вопрос может быть закрыт проверяющими. Чтобы редактировать вопрос, нажмите на кнопку Править. Так же можете ознакомиться с советами о том, как задать хороший вопрос. - Из очереди проверок– YuriCommented 18 мар. 2017 в 9:43
Добавить комментарий
|
2 ответа
Стандартный:
position: relative
у родительского элемента,
position: absolute
у дочернего элемента.
Хотя сложно понять вопрос без кода...
Например так:
<!DOCTYPE html>
<html>
<head>
<title>Data Layer: Styling</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -28, lng: 137}
});
// [START snippet-load]
// Load GeoJSON.
map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');
// [END snippet-load]
// [START snippet-style]
// Set the stroke width, and fill color for each polygon
map.data.setStyle({
fillColor: 'green',
strokeWeight: 1
});
// [END snippet-style]
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js&callback=initMap"></script>
</body>
</html>
Документация Гугл. Или же так:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GeoRSS Layers</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: 49.496675, lng: -102.65625}
});
var georssLayer = new google.maps.KmlLayer({
url: 'http://api.flickr.com/services/feeds/geo/?g=322338@N20&lang=en-us&format=feed-georss'
});
georssLayer.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?" async defer>
</script>
</body>
</html>
Ещё пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Directly accessing Street View data</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
<script>
/*
* Click the map to set a new location for the Street View camera.
*/
var map;
var panorama;
function initMap() {
var berkeley = {lat: 37.869085, lng: -122.254775};
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map.
map = new google.maps.Map(document.getElementById('map'), {
center: berkeley,
zoom: 16,
streetViewControl: false
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({location: berkeley, radius: 50}, processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
map.addListener('click', function(event) {
sv.getPanorama({location: event.latLng, radius: 50}, processSVData);
});
}
function processSVData(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
marker.addListener('click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
console.error('Street View data not found for this location.');
}
}
</script>
<script
src="https://maps.googleapis.com/maps/api/js&callback=initMap"
async defer>
</script>
</body>
</html>
Документация Гугл. Или же самостоятельно выберите из предложенных Гугл примеров.