Javascript 및 Jquery : 버튼을 클릭 할 때 Google지도에 마커 추가

Question

표시되는 기존 Google지도에 마커를 추가하는 버튼을 만들려고합니다.

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 
      }); 

     }   

    }); 

} 

나는 아주 새롭고 누군가 나를 도울 수 있기를 바랬다.

내지도를 표시하려면이 같은이있는 경우 :

당신

$(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

행운이!

난 당신이

전체 코드를 볼 :) 원하는 정확히 수행하는 작업 예를 여기에 테스트 : http://jsfiddle.net/RASG/vA4eQ/
단지 버튼을 클릭하여 "추가 마커"여기

는 관련 코드 : 맵에 대한

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

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

지도 및 마커를로드하는 데 필요한 자바 스크립트

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); 

    }