Onclick open Popup with details in Google Map Api

Question

I am using Google Map Api.

How to open a popup when click on specific point.

That popup should contain Info about the point.

Here is my code:

var myCenter=new google.maps.LatLng(51.508742,-0.120850);

function initialize()
{
    var mapProp = {
        center:myCenter,
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
        };

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    var arr =  [{latitude_chargement:60.05,longitude_chargement:-43.1667},{latitude_chargement:45.7604,longitude_chargement:5.68552},{latitude_chargement:48.853873,longitude_chargement:2.351074}];


    for(i = 0; i < arr.length; i++) 
    {  
        marker =  new google.maps.Marker({
        position: new google.maps.LatLng(arr[i].latitude_chargement, arr[i].longitude_chargement),
        map: map,
        icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
        });
    }
    marker.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

https://developers.google.com/maps/documentation/javascript/infowindows — epoch, Dec 12 '13 at 07:54
Here is the detailed link to my post, please check this: http://stackoverflow.com/questions/20538192/google-map-api-popup-is-opening-on-only-one-point-not-on-others — Hassan Sardar, Dec 12 '13 at 08:15

score 0 · Answer 1 · answered Dec 12 '13 at 08:06

I guess this is way to do it:

for(i = 0; i < arr.length; i++) 
{  
    marker =  new google.maps.Marker({
    position: new google.maps.LatLng(arr[i].latitude_chargement, arr[i].longitude_chargement),
    map: map,
    icon: 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png'
    content: '<div class="mydivclass"> <h2>Myheading</h2> <p>mytextblock</p> </div>',
    });
}

Nouphal.M · Answer 2 · 2013-12-12T08:48:17.470

First get the latitude longitude of the location of mouse click. Then using reverse geocoding of google map get the place address. Create a new marker and info window if the reverse geocoding is successful.

The following code does your job :

//Attach click event to google map
google.maps.event.addListener(map, 'click', function(event) {
    marker.push(new google.maps.Marker({position: event.latLng, map: map}));//Push the new marker into marker array 
var markIndex = marker.length-1;
//use geocoder to get address via reverse geocoding
geocoder.geocode({'latLng': event.latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) { // check if reverse geocoding is success
   //create new info window
   infowindow[marker.length-1] = new google.maps.InfoWindow({
          content: results[1].formatted_address
    });
//Add click event for marker for showing info window 
google.maps.event.addListener(marker[markIndex], 'click', function() {
            infowindow[markIndex].open(map,marker[markIndex]);
    });
}

});

You can find the working demo here

Onclick open Popup with details in Google Map Api

2 Answers2