{"id":1157,"date":"2022-08-30T15:13:20","date_gmt":"2022-08-30T15:13:20","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2013\/11\/09\/google-maps-api-undefined-marker-title-collection-of-common-programming-errors\/"},"modified":"2022-08-30T15:13:20","modified_gmt":"2022-08-30T15:13:20","slug":"google-maps-api-undefined-marker-title-collection-of-common-programming-errors","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2022\/08\/30\/google-maps-api-undefined-marker-title-collection-of-common-programming-errors\/","title":{"rendered":"Google Maps API: undefined marker title-Collection of common programming errors"},"content":{"rendered":"

I’m working on a map where the user can click unpon, generating new markers. For each marker, some info should be displayed in the sidebar: latitude, longitude and a title. The title is generated by reverse geocoding. I have created an array of markers and everything seems to be ok, but the title the first marker in the array is always “undefined”. No problems with coords: just the first element’s title! The title is regularly shown in the infowindow… But it is “undefined” in the first element of the array. Here is my code:<\/p>\n

\nvar map;\nvar markers = [];\nvar rome = new google.maps.LatLng(41.9012, 12.4751);\nvar infowindow;\nvar geocoder;\n\nfunction loadMap(){\nvar myOptions = {\n    zoom: 15,\n    center: rome,\n    mapTypeId: google.maps.MapTypeId.SATELLITE\n};\nmap = new google.maps.Map( document.getElementById('canvas'), myOptions );\ngoogle.maps.event.addListener(map, 'click', function(evt){\n    addMarker( evt.latLng );\n});\n}\n\nfunction addMarker( location ){\nvar marker = new google.maps.Marker({\n    position: location,\n    map: map\n});\nmarker.setMap( map );\nopenInfoWindow( marker );\n\nmarkers.push( marker );\nupdateList( marker );\n}\n\nfunction openInfoWindow( marker ){\ngeocoder = new google.maps.Geocoder();\ngeocoder.geocode({'location': marker.getPosition()}, function(results, status){\n    if (status == google.maps.GeocoderStatus.OK) {\n        address = results[0].formatted_address;\n    }else{\n        address(\"Address not found\");\n    }\n    var infowindow = new google.maps.InfoWindow({\n        content: address\n    });\n    infowindow.open(map, marker);\n    marker.setTitle(address);\n    console.log(address);\n}); \n}\n\nfunction updateList( marker ){\n    var lat, lng, title;\n    if( markers.length > 0 ){\n    $('#sidebar').html('<\/code><\/pre>\n
');\n\n    for( var i = 0; i < markers.length; i++ ){\n        lat = markers[i].getPosition().lat();\n        lng = markers[i].getPosition().lng();\n        title = markers[i].getTitle();\n        var html = '<\/pre>\n
  • Lat: ' + lat + '
    \nLng: ' + lng + '
    \n' + title + '<\/code><\/li>\n
    ';\n\n        $(html).prependTo('#sidebar ul');\n\n    }\/\/end for\n    }\/\/end if\n}\n\n$(document).ready( loadMap );\n\n<\/pre>\n
    Where do I wrong?<\/code><\/p>\n
      \n
    1. \n
      I've found the solution!<\/code><\/p>\n
      function addMarker( location ){\ngeocoder = new google.maps.Geocoder();\ngeocoder.geocode({'location': location}, function(results, status){\n    if (status == google.maps.GeocoderStatus.OK) {\n        address = results[0].formatted_address;\n    }else{\n        address(\"Address not found\");\n    }\n    var marker = new google.maps.Marker({\n        position: location,\n        title: address,\n        map: map\n    });\n    google.maps.event.addListener(marker, 'click', function(){\n        openInfoWindow(marker);\n    });\n    marker.setMap( map );\n    openInfoWindow(marker);\n\n    markers.push(marker);\n\n    updateList( markers );\n\n}); \n}\nfunction openInfoWindow( marker ){\nvar title = marker.getTitle();\nif(infowindow){\n    infowindow.close();\n}\ninfowindow = new google.maps.InfoWindow({\n        content: title\n    });\n    infowindow.open(map, marker);\n}\n<\/code><\/code><\/pre>\n
      In the first block of code I called the geocoder from within openInfoWindow() function. In the second block of code, I called the geocoder from addMarker() function. Oh, I set up the title of the marker in the maker declaration, inside addMarker() function. I’m not sure about the reason, but now it works well!<\/p>\n<\/li>\n<\/ol>\n
      Originally posted 2013-11-09 23:33:06. <\/small><\/p>","protected":false},"excerpt":{"rendered":"
      I’m working on a map where the user can click unpon, generating new markers. For each marker, some info should be displayed in the sidebar: latitude, longitude and a title. The title is generated by reverse geocoding. I have created an array of markers and everything seems to be ok, but the title the first […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1157","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1157","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=1157"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/1157\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=1157"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=1157"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=1157"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}