dgomes dgomes - 1 year ago 192
Javascript Question

Google Maps search box with dragable marker and input box

I'm using google maps api and need to show a marker with a search box, this marker will use the lat and long I have on my database but will change if dragged or someone uses the search box. I managed to load the map and center it on the coordinates but it doesn’t shows the marker, after I use the search box all works.
I tried adding a marker in the beginning of the code but without success, it creates a new marker when I used the functions:

var mapOptions = {
zoom: zoom,
center: LatLng,
panControl: false,
zoomControl: false,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP

var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var latitude = ;
var longitude = ;
var zoom = "+MapZoom+";

var LatLng = new google.maps.LatLng(51.501476, ‎-0.140634);
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: '"+Latitude+"',
draggable: true

This is my current code, I’m sure I’m just missing something any help would be much appreciated

function initialize() {

var markers = [];
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(51.501476, ‎-0.140634));
var input = (document.getElementById('pacinput')
var searchBox = new google.maps.places.SearchBox((input));
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
for (var i = 0, marker; marker = markers[i]; i++) {
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {

var marker = new google.maps.Marker({
draggable: true,
map: map,

title: place.name,
position: place.geometry.location
// drag response
google.maps.event.addListener(marker, 'dragend', function(e) {
// click response
google.maps.event.addListener(marker, 'click', function(e) {
google.maps.event.addListener(map, 'bounds_changed', function() {
var bounds = map.getBounds();
// displays a position on two <input> elements
function displayPosition(pos) {
document.getElementById('Latitude').value = pos.lat();
document.getElementById('Longitude').value = pos.lng();
google.maps.event.addDomListener(window, 'load', initialize);

Answer Source

as per my understanding you want marker on load of page to the same location where your map is centered try using this

var map;
var marker;

function initialize() {
  var mapProp = {
    center:new google.maps.LatLng(51.508742,-0.120850),
  map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

function drawmarker(){
    marker = new google.maps.Marker({
        position : new google.maps.LatLng(51.508742,-0.120850),
        title:"this s it",
        map : map,

make your marker as global now use method on dragend

    google.maps.event.addListener(marker, 'dragend', function(e) {


now you get the latlng now use it to display in the text box

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download