<div class="map" id="map_canvas"> <div class="container"> <div class="row"> <div class="col-xs-9 col-sm-6 adres"> <div class="bottom_line"></div> <ul class="list-unstyled"> <li> <img src="images/gmail.png" height="40" class="img-responsive "> <a class=" location col-xs-offset-1">lorem@gmail.com</a> </li><br><br><br> <li> <img src="images/m_marker.png" height="40" class="img-responsive "> <a class=" location col-xs-offset-1">122 Peacock AlyAmericus, <br max-width: 155px>GA 317 09-5357</a> </li><br><br> <li> <img src="images/phone.png" height="40" class="img-responsive "> <a class=" location col-xs-offset-1">+465 432 571 654</a> </li> </ul> </div> </div> </div> </div> div.adres{ background-color: #4576DF; height: 500px; max-width: 350px; opacity: 0.9; padding: 70px 0px 0px 30px; margin-left: 15px; }

Javascript

 $(document).ready(function(){ function initialize() { var mapOptions = { scrollwheel: false, zoom: 8, center: new google.maps.LatLng(32.054071,-84.189099), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var image = new google.maps.MarkerImage('/images/map-marker1.png', new google.maps.Size(24, 35), new google.maps.Point(0, 0), new google.maps.Point(12, 35)); //изображение маркера var marker = new google.maps.Marker({ position: new google.maps.LatLng(32.054071,-84.189099), map: map, icon: image, title: 'ClickCredit' }); } initialize(); });

enter image description here

enter image description here

  • one
    answer: yes you can - lexxl
  • can you help me with this? - Igor
  • Describe specifically what you can not. in theory, create a block with position: absolute , for example, and place it on top of your map or anything else. - lexxl
  • Here's how I get it: a block (which should be on top of the edge) <div class = "container"> <div class = "row"> <div class = "col-xs-9 col-sm-6 adres"> <div class = "bottom_line"> </ div> ... </ div> </ div> </ div> here is a block with the map itself <div class = "map" id = "map_canvas"> </ div> but it becomes on top of the map, and I need it in the map itself, as on the layout. Assigned the top position = "absolute", but did not help - Igor

1 answer 1

 function initialize() { var myLatlng = new google.maps.LatLng(45.1237, -123.1137); var myOptions = { zoom: 17, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE } var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); var myLatlng = new google.maps.LatLng(45.1237, -123.1137); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: "Firefox Crop Circle" }); } google.maps.event.addDomListener(window, 'load', initialize); 
 .box{ position: relative; width: 100%; height: 500px; } .block-adres{ position: absolute; width: 350px; height: 500px; left: 50px; top: 0; background-color:#4576DF; opacity:0.9; margin-left:15px; z-index: 5; } .map{ position: relative; width: 100%; height: 100%; z-index: 1; } 
 <div class="box"> <div class="map" id="map_canvas"></div> <div class="block-adres"> <div class="container"> <div class="row"> <div class="col-xs-9 col-sm-6 adres"> <div class="bottom_line"></div> <ul class="list-unstyled"> <li> <img src="images/gmail.png" height="40" class="img-responsive "> <a class=" location col-xs-offset-1">lorem@gmail.com</a> </li> <br> <br> <br> <li> <img src="images/m_marker.png" height="40" class="img-responsive "> <a class=" location col-xs-offset-1">122 Peacock AlyAmericus, <br max-width: 155px>GA 317 09-5357</a> </li> <br> <br> <li> <img src="images/phone.png" height="40" class="img-responsive "> <a class=" location col-xs-offset-1">+465 432 571 654</a> </li> </ul> </div> </div> </div> </div> </div> <script src="https://maps.googleapis.com/maps/api/js"></script>

  • Hey. Something like this, if you have questions write. Here is mik4ik.ru/nasos - below is a map with a similar task, if something like that. - Nikolay Batashov