My HTML Code is like this :

<a href="#" class="button" data-latLng="53#separator#-1.33#separator#Address 1">Button 1</a>
<a href="#" class="button" data-latLng="-34.397#separator#150.644#separator#Address 2">Button 2</a>
<div id="map-canvas"></div>

My Javascript Code is like this :

$(document).on("click", ".button", function(e) {
    e.preventDefault();
    var latLng = $(this).attr("data-latLng");           
    initialize(latLng);

    function initialize(latLng) {
        console.log(latLng);
        latLng = latLng.split("#separator#");
        address = latLng[2];
        console.log(address);
        var map;        
        var myCenter=new google.maps.LatLng(latLng[0],latLng[1]);
        var marker=new google.maps.Marker({
            position:myCenter
        });

        var mapProp = {
            center: myCenter,
            zoom: 14,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
        marker.setMap(map);

        ...
    };
    ...
});

Demo is like this : /

I want display address in marker google map, but i'm still confused. So when click the button, the map automatically displays the address on the marker.

Any solution to solve my problem?

Thank you very much

My HTML Code is like this :

<a href="#" class="button" data-latLng="53#separator#-1.33#separator#Address 1">Button 1</a>
<a href="#" class="button" data-latLng="-34.397#separator#150.644#separator#Address 2">Button 2</a>
<div id="map-canvas"></div>

My Javascript Code is like this :

$(document).on("click", ".button", function(e) {
    e.preventDefault();
    var latLng = $(this).attr("data-latLng");           
    initialize(latLng);

    function initialize(latLng) {
        console.log(latLng);
        latLng = latLng.split("#separator#");
        address = latLng[2];
        console.log(address);
        var map;        
        var myCenter=new google.maps.LatLng(latLng[0],latLng[1]);
        var marker=new google.maps.Marker({
            position:myCenter
        });

        var mapProp = {
            center: myCenter,
            zoom: 14,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        map=new google.maps.Map(document.getElementById("map-canvas"),mapProp);
        marker.setMap(map);

        ...
    };
    ...
});

Demo is like this : https://jsfiddle/oscar11/b0ahcLxw/

I want display address in marker google map, but i'm still confused. So when click the button, the map automatically displays the address on the marker.

Any solution to solve my problem?

Thank you very much

• javascript
• jquery
• html
• google-maps
• google-maps-api-3

2 Answers 2

You did not declare infowindow and contentString variable. So you need to declare infowindow variable like bellow

var infowindow = new google.maps.InfoWindow();

And also declare contentString

var contentString ="Your Content String";

Edit:

// Add this line
var contentString ="Your Content String";
google.maps.event.addListener(marker, 'click', function() {
    // Add this line
    var infowindow = new google.maps.InfoWindow();
    infowindow.setContent(contentString);
    infowindow.open(map, marker);
}); 

JsFiddle Example
Automatically show infowindow JsFiddle Demo

Add This line and in the place of hellooo set your content.

google.maps.event.addListener(marker, 'click', function() {
var infowindow = new google.maps.InfoWindow();
infowindow.setContent("hellooo");
infowindow.open(map, marker);

}); 

else you can find here JsFiddle

and for getting address from lat long you can use reverse geocoding you can find the example here with the code try this one Reverse Geocoding