-1

I have used google-maps Api V3 map and markers are loading perfectly but the info window is not loading, Neither it doesn't shows any error, when i place an alert in the info-window it doesn't show any alert but the data is loaded into the map Let me know where i have done the mistake, Is this the correct way of loading the map using the function which i have written for Thanks in advance

function initMap() {
            // Create the map.
            // var map;
            var infoWindow = new google.maps.InfoWindow(); 
            var map = new google.maps.Map(document.getElementById('mapView'), {
              zoom: 6,
              center: {lat: 20.5937, lng: 78.9629}, 
              mapTypeId: 'roadmap'
            });
             $.getJSON('data.php', function(data){
                 // alert(data);
                 // alert(JSON.stringify(data));
                var marker = [];
                var infoWindow = [];
                var contentString = [];
                var bounds = new google.maps.LatLngBounds();
                for(var sd in data){
                    contentString[sd] = '<div id="content">'+
                        '<div id="siteNotice">'+
                        '</div>'+
                        '<h1 id="firstHeading" class="firstHeading">'+data[sd].hqname+'</h1>'+
                        '<div id="bodyContent">'+
                            '<p><b>Division: </b>'+data[sd].division+'</p>'+
                            '<p><b>From: </b>'+data[sd].fromareaname+'</p>'+
                            '<p><b>To: </b>'+data[sd].toareaname+'</p>'+
                            '<p><b>Category: </b>'+data[sd].ta+'</p>'+
                            '<p><b>Distance: </b>'+data[sd].dist+'</p>'+
                            '<p><b>Calculated Distance: </b>'+data[sd].distance+'</p>'+
                        '</div>'+
                    '</div>';

                    infoWindow[sd] = new google.maps.InfoWindow({
                      content: contentString[sd]
                      // alert(contentString)
                    });


                    if(data[sd].type == 1){
                        marker[sd] = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                            position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                            map: map,
                            infowindow: infowindow[sd]
                        });
                    }
                    if(data[sd].type == 2){
                        marker[sd] = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                            position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                            map: map,
                            infowindow: infowindow[sd]
                        });
                    }
                    if(data[sd].type == 3){
                        marker[sd] = new google.maps.Marker({
                            icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                            position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                            map: map,
                            infowindow: infowindow[sd]
                        });
                    }

                   bounds.extend(marker[sd].position);
                }

                    map.fitBounds(bounds); 

            });


    }

Edited Code

function initMap() {
        // Create the map.
        <!-- // var map; -->
        //alert("map ");

        var infoWindow = new google.maps.InfoWindow(); 
        var map = new google.maps.Map(document.getElementById('mapView'), {
          zoom: 6,
          center: {lat: 20.5937, lng: 78.9629}, 
          mapTypeId: 'roadmap'
        });
         $.getJSON('data.php', function(data){
              // alert(data);
               // alert(JSON.stringify(data));
            var marker = [];
            var infowindow = [];
            var contentString = [];
            var bounds = new google.maps.LatLngBounds();
            for(var sd in data){
                // alert(sd);
                contentString[sd] = '<div id="content">'+
                    '<div id="siteNotice">'+
                    '</div>'+
                    '<h1 id="firstHeading" class="firstHeading">'+data[sd].shopname+'</h1>'+
                    '<div id="bodyContent">'+
                        '<p><b>Subarea: </b>'+data[sd].subarea+'</p>'+
                        '<p><b>Mobile: </b>'+data[sd].mobile+'</p>'+
                        '<p><b>Category: </b>'+data[sd].category+'</p>'+
                        '</div>'+
                '</div>';

                infowindow[sd] = new google.maps.InfoWindow({
                  content: contentString[sd]
                });



                if(data[sd].type == 1){
                   marker[sd] = new google.maps.Marker({
                        icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
                        position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                        map: map,
                        infowindow: infowindow[sd]
                    });
                }
                if(data[sd].type == 2){
                    marker[sd] = new google.maps.Marker({
                        icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
                        position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                        map: map,
                        infowindow: infowindow[sd]
                    });
                }
                if(data[sd].type == 3){

                marker[sd] = new google.maps.Marker({
                        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                        position: {lat : parseFloat(data[sd].center.latitude),lng : parseFloat(data[sd].center.longitude)},
                        map: map,
                        infowindow: infowindow[sd]
                    });
                }

               bounds.extend(marker[sd].position);
              google.maps.event.addListener(marker[sd], 'click', function() { infowindow[sd].open(map,marker[sd]); }); 
            }

                map.fitBounds(bounds); 

        });




}
Sairam Duggi
  • 165
  • 3
  • 14
  • 1
    I couldn't see a function for opening the 'infowindow' in your code. Can you include an eventListner with a click function for opening the 'infowindow' and please try below: `marker[sd].addListener('click', function() { infowindow[sd].open(map, marker[sd]); }); or google.maps.event.addListener(marker[sd], 'click', function() { infowindow[sd].open(map,marker[sd]); }); ` // If you want to open the infowindow on page load and without on click, please try adding this line of code after the click function `infowindow[sd].open(map,marker[sd]);` – soccerway Nov 27 '17 at 23:46
  • I have placed the code as per your suggestion but when i click on any marker it shows only the same marker details , the markers details are not changing please check it once i am placing the edited code @soccerway – Sairam Duggi Nov 28 '17 at 04:46
  • You need function closure on (at least) `sd` in the marker click listener. [Example](https://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) – geocodezip Nov 28 '17 at 05:02
  • i didn't get you can show where the changes should be made @geocodezip – Sairam Duggi Nov 28 '17 at 05:05
  • Please provide a [mcve] that demonstrates the issue. – geocodezip Nov 28 '17 at 10:02

1 Answers1

2

Similar question: Google Maps JS API v3 - Simple Multiple Marker Example

You need function closure on sd in the marker click listener.

example from the documentation (using a named function)

Using an Immediately Invoked Function Expression (IIEF):

google.maps.event.addListener(marker[sd], 'click', (function(sd) {
   return function() {
  infowindow[sd].open(map, marker[sd]);
}}(sd)));

proof of concept fiddle

screen shot of resulting map

code snippet:

function initMap() {
  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById('mapView'), {
    zoom: 6,
    center: {
      lat: 20.5937,
      lng: 78.9629
    },
    mapTypeId: 'roadmap'
  });
  google.maps.event.addListener(map, "click", function(evt) {
    console.log(evt.latLng.toUrlValue(6));
  })
  // $.getJSON('data.php', function(data){
  var marker = [];
  var infowindow = [];
  var contentString = [];
  var bounds = new google.maps.LatLngBounds();
  for (var sd in data) {
    // alert(sd);
    contentString[sd] = '<div id="content">' +
      '<div id="siteNotice">' +
      '</div>' +
      '<h1 id="firstHeading" class="firstHeading">' + data[sd].shopname + '</h1>' +
      '<div id="bodyContent">' +
      '<p><b>Subarea: </b>' + data[sd].subarea + '</p>' +
      '<p><b>Mobile: </b>' + data[sd].mobile + '</p>' +
      '<p><b>Category: </b>' + data[sd].category + '</p>' +
      '</div>' +
      '</div>';

    infowindow[sd] = new google.maps.InfoWindow({
      content: contentString[sd]
    });

    if (data[sd].type == 1) {
      marker[sd] = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
        position: {
          lat: parseFloat(data[sd].center.latitude),
          lng: parseFloat(data[sd].center.longitude)
        },
        map: map,
        infowindow: infowindow[sd]
      });
    }
    if (data[sd].type == 2) {
      marker[sd] = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png',
        position: {
          lat: parseFloat(data[sd].center.latitude),
          lng: parseFloat(data[sd].center.longitude)
        },
        map: map,
        infowindow: infowindow[sd]
      });
    }
    if (data[sd].type == 3) {

      marker[sd] = new google.maps.Marker({
        icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
        position: {
          lat: parseFloat(data[sd].center.latitude),
          lng: parseFloat(data[sd].center.longitude)
        },
        map: map,
        infowindow: infowindow[sd]
      });
    }

    bounds.extend(marker[sd].position);
    google.maps.event.addListener(marker[sd], 'click', (function(sd) {
      return function() {
        infowindow[sd].open(map, marker[sd]);
      }
    }(sd)));
  }

  map.fitBounds(bounds);

  // });
}
google.maps.event.addDomListener(window, "load", initMap);
// test data
var data = [{
    shopname: "fred",
    subarea: "area 1",
    mobile: "yes",
    category: "cat 1",
    center: {
      latitude: 23.644524,
      longitude: 74.487305
    },
    type: 1
  },
  {
    shopname: "george",
    subarea: "area 2",
    mobile: "yes",
    category: "cat 2",
    center: {
      latitude: 21.943046,
      longitude: 81.936035
    },
    type: 2
  },
  {
    shopname: "frank",
    subarea: "area 3",
    mobile: "yes",
    category: "cat 3",
    center: {
      latitude: 20.179724,
      longitude: 77.189941
    },
    type: 3
  }
];
html,
body,
#mapView {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapView"></div>
geocodezip
  • 158,664
  • 13
  • 220
  • 245