How to add marker to google map using geocomplete.js

Question

I am using geocomplete.js for my google map. Also twitter bootstrap.

Currently I have a button:

<button id="btn-pin" type="button" class="btn btn-primary">PIN</button>

This button is to pin the marker on the map on the position I want (Latlng provided)

My js function to call on click when the button is click:

$("#btn-pin").on('click', function() {
        var myLatlng = new google.maps.LatLng(1.294400,103.849339);

        $("#btn-pin").geocomplete({
          map: ".map_canvas",
          mapOptions: {
              scrollwheel: true
          },
            markerOptions: {
            draggable: true,
            position: myLatlng,
            map: ".map_canvas"
          },
        });
});

My map id in a the div:

<div class="map_canvas"></div>

So whenever the button pin is clicked, my map div just greys out. Is there something wrong with my code? I tried to follow google map API and other articles on the internet as closely as possible and this is the best I could get..

Answer 1

I fixed my JS and it worked

The JS:

$("#btn-pin").on('click', function() {
    var setloc = new google.maps.LatLng(1.294400,103.849339);
        $("#btn-pin").geocomplete({
        map: ".map_canvas",
        details: "form",
        location: setloc,
        mapOptions: {
              scrollwheel: true,
              maxZoom: 16
        },
        markerOptions: {
            draggable: true
        }
    });
});