Sign up ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I'm trying to build a map with a search and with drag-able pin and the results will give an address and Latitude Longitude. I'm trying this code but something doesn't work and I cant find it...

Please help

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="" rel="stylesheet" type="text/css" />
<script src=";sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;

var geocoder = new google.maps.Geocoder();

function initialize() {
  var latLng = new google.maps.LatLng(57.0442, 9.9116);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Point A',
    map: map,
    draggable: true

function codeAddress() {
var address = document.getElementById("address123").value;
geocoder.geocode( { 'address123': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    var marker = new google.maps.Marker({
        map: map,
        draggable: true,
        position: results[0].geometry.location

  } else {
    alert("Geocode was not successful for the following reason: " + status);


function geocodePosition(pos) {
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
    } else {
      updateMarkerAddress('Cannot determine address at this location.');

function updateMarkerStatus(str) {
  document.getElementById('markerStatus').innerHTML = str;

function updateMarkerPosition(latLng) {
  document.getElementById('info').innerHTML = [,
  ].join(', ');

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;

  // Update current position info.

  // Add dragging event listeners.
  google.maps.event.addListener(marker, 'dragstart', function() {

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

  google.maps.event.addListener(marker, 'dragend', function() {
    updateMarkerStatus('Drag ended');

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
<body onload="initialize()">
  #mapCanvas {
    width: 500px;
    height: 400px;
    float: left;
  #infoPanel {
    float: left;
    margin-left: 10px;
  #infoPanel div {
    margin-bottom: 5px;
<div id="controls">
<input id="address123" type="textbox" value="Sydney, NSW">

<input type="button" value="Geocode" onclick="codeAddress()">

  <div id="mapCanvas"></div>

  <div id="infoPanel">
    <b>Marker status:</b>
    <div id="markerStatus"><i>Click and drag the marker.</i></div>
    <b>Current position:</b>
    <div id="info"></div>
    <b>Closest matching address:</b>
    <div id="address"></div>
share|improve this question

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.