0

Как по верху карты (встроенной в сайт) разместить блок <div> с произвольной информацией?

1
  • Пожалуйста, редактируйте свой вопрос, добавив в него свой код, чтобы пользователи смогли дать лаконичный ответ. В противном случае, вопрос может быть закрыт проверяющими. Чтобы редактировать вопрос, нажмите на кнопку Править. Так же можете ознакомиться с советами о том, как задать хороший вопрос. - Из очереди проверок
    – Yuri
    18 мар 2017 в 9:43

2 ответа 2

0

Стандартный:
position: relative у родительского элемента,
position: absolute у дочернего элемента.

Хотя сложно понять вопрос без кода...

0

Например так:

<!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>

Документация Гугл. Или же самостоятельно выберите из предложенных Гугл примеров.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.