गूगल मैप्स: क्लिक करें या मार्कर (एक्स, वाई) पिक्सेल मार्कर क्लिक श्रोता

Question

अंदर निर्देशांक मैं मार्कर क्लिक पर पूरी तरह से मानचित्र मार्कर पर कस्टम जानकारी विंडो प्रदर्शित करने के लिए कोशिश कर रहा हूँ। मैप-कैनवास पर क्लिक करने के लिए div प्राप्त करने के लिए मैंने this answer सफलतापूर्वक कार्यान्वित किया है ... लेकिन मैं इसे मार्कर क्लिक पर दोहराने में सक्षम नहीं हूं।

क्या मार्कर क्लिक फ़ंक्शन के अंदर मार्कर पिक्सेल स्थिति प्राप्त करना संभव है, और वांछित कस्टम infowindow दिखाने के लिए सामान्य infowindow दबाएं?

मैं इस कोशिश की:

 google.maps.event.addListener(marker, 'click', function(args) { 
     var x=args.pixel.x+$('#map').offset().left; //we clicked here 
     var y=args.pixel.y; 

     info.style.left=x+'px'; 
     info.style.top=y+'px'; 
     info.style.display='block'; 
     }); 

लेकिन कंसोल में, मैं देख रहा हूँ:

Uncaught TypeError: Cannot read property 'x' of undefined 

Answer 1

एक marker click event रिटर्न एक MouseClickEvent

The A MouseClickEvent का केवल प्रलेखित संपत्ति है:

LatLng LatLng अक्षांश/देशांतर कि कर्सर नीचे था जब घटना हुई।

एक पिक्सेल की स्थिति में है कि बदलने के लिए MapCanvasProjection की fromLatLngToContainerPixel विधि का उपयोग करें:

google.maps.event.addListener(marker, 'click', function (e) { 
     var point = overlay.getProjection().fromLatLngToDivPixel(e.latLng); 
      info.style.left = point.x + 'px'; 
      info.style.top = point.y + 'px'; 
      info.style.display = 'block'; 
    }); 

working fiddle

कोड स्निपेट:

var geocoder; 
 
var map; 
 
var overlay; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
     map: map, 
 
     draggable: true, 
 
     position: map.getCenter() 
 
    }); 
 

 
    google.maps.event.addListener(map, 'projection_changed', function() { 
 
     overlay = new google.maps.OverlayView(); 
 
     overlay.draw = function() {}; 
 
     overlay.setMap(map); 
 

 
     var info = document.getElementById('myinfo'); 
 
     google.maps.event.addListener(marker, 'click', function (e) { 
 
      var point = overlay.getProjection().fromLatLngToContainerPixel(e.latLng); 
 
       info.style.left = (point.x - 100)+ 'px'; 
 
       info.style.top = (point.y) + 'px'; 
 
       info.style.display = 'block'; 
 
     }); 
 
     google.maps.event.addListener(map, 'center_changed', function (e) { 
 
      var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 
 
       info.style.left = (point.x - 100)+ 'px'; 
 
       info.style.top = (point.y) + 'px'; 
 
       info.style.display = 'block'; 
 
     }); 
 
       google.maps.event.addListener(marker, 'drag', function (e) { 
 
      var point = overlay.getProjection().fromLatLngToContainerPixel(marker.getPosition()); 
 
       info.style.left = (point.x - 100)+ 'px'; 
 
       info.style.top = (point.y) + 'px'; 
 
       info.style.display = 'block'; 
 
     }); 
 
     
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
div.info { 
 
    position: absolute; 
 
    z-index: 999; 
 
    width: 200px; 
 
    height: 50px; 
 
    display: none; 
 
    background-color: #fff; 
 
    border: 3px solid #ebebeb; 
 
    padding: 10px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div> 
 
<div id="myinfo" class="info"> 
 
    <p>I am a div on top of a google map ..</p> 
 
</div>

Answer 2

रेडियो की मदद मैं इस का समाधान करने में सक्षम था के साथ। उसे ऊपर उठाओ।

<div id="myinfo" class="info"><p>I am a div on top of a google map .. </p></div> 

    <script> 

    info = document.getElementById('myinfo'); 

    google.maps.event.addListener(marker, 'click', function() { 

    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast()); 
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest()); 
    var scale = Math.pow(2, map.getZoom()); 
    var worldPoint = map.getProjection().fromLatLngToPoint(this.getPosition()); 
    var markerCoords = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale); 

    var x=markerCoords['x']+$('#map').offset().left; //offset needed if map not fullscreen 
    var y=markerCoords['y']; 

    info.style.left=x+'px'; 
    info.style.top=y+'px'; 
    info.style.display='block'; 

    }); 

    </script> 

Answer 3

एक और विकल्प। InfoBox third party library का उपयोग करें। यह ओवरलेव्यू से विरासत में मिलता है, और आप इसमें अपना "पूरी तरह से कस्टम" div डाल सकते हैं।

proof of concept fiddle

var geocoder; 
 
var map; 
 
var overlay; 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    draggable: true, 
 
    position: map.getCenter() 
 
    }); 
 

 
    var boxText = document.createElement("div"); 
 
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;"; 
 
    boxText.innerHTML = "I am a div on top of a google map .."; 
 
    var myOptions = { 
 
    content: boxText, 
 
    disableAutoPan: false, 
 
    maxWidth: 0, 
 
    pixelOffset: new google.maps.Size(-75, -10), 
 
    zIndex: null, 
 
    boxStyle: { 
 
     background: "url('tipbox.gif') no-repeat", 
 
     opacity: 0.75, 
 
     width: "150px" 
 
    }, 
 
    closeBoxMargin: "0px 0px 0px 0px", 
 
    closeBoxURL: "", 
 
    infoBoxClearance: new google.maps.Size(0, 0), 
 
    isHidden: false, 
 
    pane: "floatPane", 
 
    enableEventPropagation: false 
 
    }; 
 

 
    var info = new InfoBox(myOptions); 
 

 
    info.open(map, marker); 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
    // info.setContent('<div id="myinfo" class="info"><p>I am a div on top of a google map ..</p></div>'); 
 
    info.open(map, marker); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 
div.info { 
 
    position: absolute; 
 
    z-index: 999; 
 
    width: 200px; 
 
    height: 50px; 
 
    display: none; 
 
    background-color: #fff; 
 
    border: 3px solid #ebebeb; 
 
    padding: 10px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script> 
 
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

Answer 4

का तरीका यहां बताया पिक्सेल स्थान प्राप्त है:

function getPixelLocation(currentLatLng) { 

     var scale = Math.pow(2, map.getZoom()); 
     // The NorthWest corner of the current viewport corresponds 
     // to the upper left corner of the map. 
     // The script translates the coordinates of the map's center point 
     // to screen coordinates. Then it subtracts the coordinates of the 
     // coordinates of the map's upper left corner to translate the 
     // currentLatLng location into pixel values in the <div> element that hosts the map. 
     var nw = new google.maps.LatLng(
      map.getBounds().getNorthEast().lat(), 
      map.getBounds().getSouthWest().lng() 
     ); 
     // Convert the nw location from geo-coordinates to screen coordinates 
     var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw); 
     // Convert the location that was clicked to screen coordinates also 
     var worldCoordinate = map.getProjection().fromLatLngToPoint(currentLatLng); 
     var currentLocation = new google.maps.Point(
      Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), 
      Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale) 
     ); 

     console.log(currentLocation); 
     return currentLocation; 
    }