Javascript và Jquery: Thêm điểm đánh dấu cho Google Maps khi nhấp vào nút

Question

Tôi đang cố gắng tạo nút sẽ thêm điểm đánh dấu vào bản đồ google hiện có được hiển thị.

function initialize() 
{ 
    geocoder = new google.maps.Geocoder(); 
    codeAddress(); 
} 



function codeAddress() 
{ 
    var image_icon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png'; 
    var address = document.getElementById("type_location").value; 

    geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 

      var mapOptions = { 
      zoom: 11, 
      center: results[0].geometry.location, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

     map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

      var marker = new google.maps.Marker({ 
       map: map, 
       position: results[0].geometry.location, 
       icon: image_icon 
      }); 

     }   

    }); 

} 

Tôi khá mới và tôi hy vọng ai đó có thể giúp tôi.

Nếu tôi có một cái gì đó như thế này để hiển thị bản đồ của tôi:

$(document).ready(function() { 

var coord = $(".address").attr("data-coordinates"); //this displays lat,lng (example: 32.000,-118.000) 

var geocoder; 
var map;  
initialize(); 
$(".add_marker").click(function(){ 

    // this is where I should add a marker? 
}); 

}); 

Answer 1

bạn may mắn!

tôi có một ví dụ làm việc thực hiện chính xác những gì bạn muốn :)

xem mã đầy đủ và kiểm tra nó ở đây: http://jsfiddle.net/RASG/vA4eQ/
chỉ cần nhấp vào nút "thêm dấu"

đây là mã có liên quan :

var latlng = new google.maps.LatLng(42.745334, 12.738430); 

function addmarker(latilongi) { 
    var marker = new google.maps.Marker({ 
     position: latilongi, 
     title: 'new marker', 
     draggable: true, 
     map: map 
    }); 
    map.setCenter(marker.getPosition()) 
} 

$('#btnaddmarker').on('click', function() { 
    addmarker(latlng) 
}) 

Answer 2

HTML cho bản đồ

<div id="map" style="width:100%;height:500px" ></div> 

javascript để tải bản đồ và điểm đánh dấu

function myMap() { 
    var myCenter = new google.maps.LatLng(28.214461283939166,83.95801313236007); 
    var map_Canvas = document.getElementById("map"); 
    var mapOptions = {center: myCenter, zoom: 14,mapTypeId:google.maps.MapTypeId.HYBRID}; 
    var map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    google.maps.event.addListener(map, 'click', function(event) { 
     document.getElementById("latitude").value = map.getCenter().lat(); 
     document.getElementById("longitude").value = map.getCenter().lng(); 
     place_Marker(map, event.latLng); 

    }); 

    } 
    var marker; 
    function place_Marker(map, location) { 
     if(marker){ 
      marker.setPosition(location); 
     }else{ 
     marker = new google.maps.Marker({ 
     draggable:true, 
     position: location, 
     animation: google.maps.Animation.DROP, 
     map: map 
    }); 
    } 

    var infowindow = new google.maps.InfoWindow({ 
     content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng() 
    }); 

    infowindow.open(map,marker); 

    }