Javascript and Jquery: Adding markers for Google Maps when clicking a button

I'm trying to create a button that will add a marker to an existing google maps that is displayed.

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

function codeAddress()
    var image_icon = '';
    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




I'm fairly new and I was hoping someone can help me.

If I have something like this to display my maps:

$(document).ready(function() {  

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

var geocoder;
var map;    

    // this is where I should add a marker?



lucky you!

i have a working example that does exactly what you want :)

see the full code and test it here: just click the button "add marker"

here is the relevant code:

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

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

HTML for map

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

javascript for loading map and marker

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) {
      marker = new google.maps.Marker({
      position: location,
      animation: google.maps.Animation.DROP,
      map: map

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


Need Your Help

Python Social Auth Django template example

python django django-templates python-social-auth

Does someone has an open example using Python Social Auth with Django in templates?

Firestore: Are ids unique in the collection or globally?

firebase google-cloud-firestore

For the structure of my database I need to know if the automatically generated identifiers in Firebase Cloud Firestore are unique in the collection or in the whole database.