marker issue in google-map

Question

can anyone please help me with this javascript for drawing polyline in googlemap....i've drawn two polyline in google-map with markers, but the problem is when i click the marker the details is printing only on one marker...... also the details is not fully printed inside the information window

http://jsfiddle.net/wLeBh/16/

my code is as given below

$(function(){
 var map    = new google.maps.Map(document.getElementById("map"), {
                  center: new google.maps.LatLng(11.275387916698238, 75.8015380957031),
                  zoom: 12
               }),
     routes = [{origin:'p t usha road, kozhikode', 
               destination:'cooperative hospital, eranjipalam, kozhikode'
               }, 
               {origin:'IIM, Kozhikode',
               destination:'VELLIMADUKUNNU, KOZHIKODE'
               }
              ],
     rendererOptions = {
                preserveViewport: true,
                map:map,
                polylineOptions:{strokeColor:'#FF3300',
                                 strokeWeight: 10},        
                suppressMarkers:true,
                routeIndex:0
              },
     directionsService = new google.maps.DirectionsService();

      $.each(routes,
        function(i,obj){//<--anonymous function

        var request = {
                origin: obj.origin,
                destination: obj.destination,
                travelMode: google.maps.TravelMode.DRIVING
              },

            directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
            directionsService.route(request, function(result, status) {

              if (status == google.maps.DirectionsStatus.OK) {

var lat = result.routes[0].legs[0].start_location.lat();
var lon = result.routes[0].legs[0].start_location.lng();

    var lat1 = result.routes[0].legs[0].end_location.lat();
var lon1 = result.routes[0].legs[0].end_location.lng();             



                  try{  

                  marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
        map: map
      });

                                                   var iws = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker, "click", function (e) { iws.open(map, marker); });

                  }catch(e){alert(e)}


                       try{  

                  marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat1, lon1),
        map: map
      });

                            var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });
     google.maps.event.addListener(marker, "click", function (e) { iw.open(map, marker); });


                  }catch(e){alert(e)}

                  directionsDisplay.setDirections(result);
              }
            });  

        });});

score 0 · Accepted Answer · answered Oct 08 '13 at 02:20

You have two different infowindows but the marker click listener only applies to the marker variable. Make two unique markers and apply a click listener to each that opens the appropriate InfoWindow.

try{  
  var marker1 = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lon),
    map: map
  });

  var iws = new google.maps.InfoWindow({
    content: "Home For Sale 1"
   });
   google.maps.event.addListener(marker1, "click", function (e) { iws.open(map, marker1); });

}catch(e){alert(e)}


try{  

  var marker2 = new google.maps.Marker({
    position: new google.maps.LatLng(lat1, lon1),
    map: map
  });

  var iw = new google.maps.InfoWindow({
    content: "Home For Sale 2"
   });
   google.maps.event.addListener(marker2, "click", function (e) { iw.open(map, marker2);});


}catch(e){alert(e)}

updated fiddle

sir its working!!!!thanks!!! why does the previous infowindow does'nt hide when click on another marker — , Oct 08 '13 at 02:28
Your code makes a separate InfoWindow for each marker. If you only want one, only create one and open it with updated content on each marker. Sounds like this question is really a duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example/3059129#3059129) — geocodezip, Oct 08 '13 at 02:31

marker issue in google-map

1 Answers1