Место div в соответствии с широтой и долготой Google Maps

Question

Вместо Infowindow from Google Maps я хотел показать div, когда я нажимаю на свой маркер. У меня все работает хорошо, когда я нажимаю маркер, появляется div, единственная проблема - это позиция div!

Мой сайт является отзывчивым, так как карта, но div нет. Итак, что я хотел сделать, это сделать положение div, основанное на широте и долготе карты, таким образом, когда карта была изменена, div появится в том же месте.

Я нооби, поэтому не знаю, что делать ... Любая идея?

Answer 1

Если вы используете плагин библиотеки InfoBox, он позволяет разместить маркер с заданной координатой lat/long. Когда вы нажимаете маркер, вы можете отображать окно содержимого. Он также позволяет использовать смещение в пикселях от этой координаты, поэтому вы можете перемещать поле по отношению к маркеру.

http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js

Ниже, в MarkerOptions, есть свойство контента, который позволяет поместить в любой HTML. У меня есть объект со многими маркерами, поэтому я использую здесь инструкцию for и сохраняю маркер и маркеры в массивах.

marker = new google.maps.Marker({ 
      map: map, 
      draggable: false, 
      position: new google.maps.LatLng(parksMarkerInfo[r].coordinates[0], parksMarkerInfo[r].coordinates[1]), 
      visible: true, 
      icon: "http://www.travelalaska.com/~/media/Images/Travel%20Alaska/Maps/Parks/park-marker.png", 
      }); 

      markerOptions = { 
      content: "<a href='http://"+window.location.host+"/Destinations/Parks%20and%20Public%20Lands/"+ (parksMarkerInfo[r].markerLink || parksMarkerInfo[r].markerLabel) +".aspx'>"+parksMarkerInfo[r].markerTranslation+"</a>" 
      ,disableAutoPan: true 
      ,pixelOffset: new google.maps.Size(parksMarkerInfo[r].offset[0], parksMarkerInfo[r].offset[1]) 
      ,boxStyle: { 
       textAlign: "left" 
       ,fontSize: "12px" 
       ,whiteSpace: "nowrap" 
       ,lineHeight: "16px" 
       ,fontWeight: "bold" 
       ,fontFamily: "Tahoma" 
      } 
      ,isHidden: false 
      ,closeBoxURL: "" 
      ,position: new google.maps.LatLng(parksMarkerInfo[r].coordinates[0], parksMarkerInfo[r].coordinates[1]) 
      ,pane: "floatPane" 
      ,enableEventPropagation: false 
      ,boxClass: "parkLabel" 
      }; 

      parkMarker.push(marker); 
      parkOptions.push(markerOptions); 

      parkMarker[arrayLoc].infobox = new InfoBox(parkOptions[arrayLoc]); 

      parkMarker[arrayLoc].infobox.open(map, marker); 
      parkMarker[arrayLoc].infobox.close(); 

      google.maps.event.addListener(parkMarker[arrayLoc], 'click', (function(marker, arrayLoc){ 
      return function(){ 
       for (h = 0; h < parkMarker.length; h++) { 
        if(parkMarker[h].infobox){ 
         parkMarker[h].infobox.close(); 
        } 
       } 
       marker.infobox.open(map, marker); 
      } 
      })(parkMarker[arrayLoc], arrayLoc)); 

Answer 2

Можете ли вы посмотреть на положение мыши вместо широты долготы? Затем на $ window.resize вы можете поместить div как хотите.

$('#your-gmap-div').click(function(e) { 
    var offset = $(this).offset(); 
    var mouseposition = { 
     x: e.clientX - offset.left, 
     y: e.clientY - offset.top 
    } 

    //show your div 
    }); 

    $window.resize(function(){ 
     //reposition your div. 
    }); 

Я не проверял, но он может работать, если вы нажмете на DIV, я не знаю, если GMaps IFrame будет держать событие щелчка.