एचटीएमएल तत्व

Question

पर मानचित्र के बाहर ड्रैग मार्कर नक्शा क्षेत्र के बाहर किसी अन्य मानचित्र डोम तत्व पर Google मानचित्र मार्कर खींचने का कोई आसान तरीका है। मैंने बहुत सारी चीजों की कोशिश की है और ऐसा लगता है कि jquery में डुप्लिकेट मार्कर को हैक करना और केवल एक ही तरीका है, और इसे वर्तमान मार्कर पर होवर करें, ऐसा लगता है कि आपने इसे मानचित्र से खींच लिया है।

कोई सुझाव स्वागत है!

उदाहरण फिडल: http://jsfiddle.net/y3YTS/26/

want to drag the marker onto the red box

Answer 1

आप शायद पहले से ही इस कार्य किया है उसे, लेकिन सिर्फ मामले में किसी और की तलाश में है, यहाँ एक good starting place है। यह डेमो एक मार्कर लेता है जो मानचित्र से बाहर है और आपको इसे मानचित्र पर छोड़ने की अनुमति देता है। आप रिवर्स करना चाहते हैं, लेकिन अवधारणा वही है। mouseup घटना पर माउस स्थान प्राप्त है और फिर उस स्थान

Answer 2

यहाँ में एक एचटीएमएल मार्कर के साथ मार्कर का नक्शा बदलने के अपने हैक के साथ हल है http://jsfiddle.net/H4Rp2/38/

var someData = [ 
    { 
     'name': 'Australia', 
     'location': [-25.274398, 133.775136] 
    }, 
    { 
     'name': 'La Svizra', 
     'location': [46.818188, 8.227512] 
    }, 
    { 
     'name': 'España', 
     'location': [40.463667, -3.74922] 
    }, 
    { 
     'name': 'France', 
     'location': [46.227638, 2.213749] 
    }, 
    { 
     'name': 'Ireland', 
     'location': [53.41291, -8.24389] 
    }, 
    { 
     'name': 'Italia', 
     'location': [41.87194, 12.56738] 
    }, 
    { 
     'name': 'United Kingdom', 
     'location': [55.378051, -3.435973] 
    }, 
    { 
     'name': 'United States of America', 
     'location': [37.09024, -95.712891] 
    }, 
    { 
     'name': 'Singapore', 
     'location': [1.352083, 103.819836] 
    } 
]; 















var gDrag = { 
    jq: {}, 
    item: {}, 
    status: 0, 
    y: 0, 
    x: 0 
} 


$(function(){ 

/*Google map*/ 
var mapCenter = new google.maps.LatLng(51.9226672, 4.500363500000049); 
var map = new google.maps.Map(
    document.getElementById('map'), 
    { 
     zoom: 4, 
     draggable: true, 
     center: mapCenter 
    } 
);  



    if(someData){ 

     gDrag.jq = $('#gmarker'); 

     /*LOOP DATA ADN CREATE MARKERS*/ 
     var markers = []; 
     for(var i = 0; i < someData.length; i++){ 

      markers.push(
       new google.maps.Marker({ 
        map: map, 
        draggable: false, 
        raiseOnDrag: false, 
        title: someData[i].name, 
        icon: 'http://icons.iconarchive.com/icons/aha-soft/standard-city/48/city-icon.png', 
        position: new google.maps.LatLng(someData[i].location[0], someData[i].location[1]), 

       }) 
      ); 

      //Block mouse with our invisible gmarker 
      google.maps.event.addListener(markers[i], 'mouseover', function(e){ 

       if(!gDrag.jq.hasClass('ui-draggable-dragging')){ 

        gDrag.item = this; 
        gDrag.jq.offset({ 
         top: gDrag.y - 10, 
         left: gDrag.x - 10 
        }); 


       } 
      }); 


     } 


     gDrag.jq.draggable({ 
      start: function(event, ui){ 
       console.log(gDrag.item.getIcon()) 
       gDrag.jq.html('<img src="'+gDrag.item.getIcon()+'" />'); 
       gDrag.item.setVisible(false); 
      }, 

      stop: function(event, ui){ 

       gDrag.jq.html(''); 

       /*Chech if targed was droped in our dropable area*/ 
       if(gDrag.status){ 
        gDrag.item.setVisible(false); 
       }else{ 
        gDrag.item.setVisible(true); 
       } 
      } 
     }); 

     $(document).mousemove(function(event){ 
      gDrag.x = event.pageX; 
      gDrag.y = event.pageY; 
     }); 



     $("#dropzone").droppable({ 
      accept: "#gmarker", 
      activeClass: "drophere", 
      hoverClass: "dropaccept", 
      drop: function(event, ui, item){ 
       gDrag.status = 1; 
       $(this).addClass("ui-state-highlight").html("Dropped!"); 
      } 
     }); 
    } 
});