CODEWITHSUNDEEP
javascriptgoogle-maps
Preethy
Preethy

Reputation: 722

tooltip content undefined - google map

I added code for tool tip display when hovering the pointers in the google map.It is showing the tool tip but the content is "undefined". How can put the corresponding content related to the pointer into the tool tip box.The code is : 

function initialize() {

      var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(29.7,-95.4),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("salon_map"), myOptions);

      var locations = [
         __newmapdetls__
      ];

      for (var i = 0; i < locations.length; i++) {
        var location = locations[i];
        var image = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
        new google.maps.Size(20, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34));


        var myLatLng = new google.maps.LatLng(location[1], location[2]);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title: location[0],
            zIndex: location[3],
            tooltip:"testinggg"+i
        });

        google.maps.event.addListener(marker, 'mouseover', function() {
            infowindow1.open(map, this);
        });
        google.maps.event.addListener(marker, 'mouseout', function() {
            infowindow1.close(map, this);
        });
        var infowindow1 = new google.maps.InfoWindow({
            content:  "'"+this.tooltip+"'"
        });
      }
    }

Also url is : http://myshopsalon.com/find-a-shop-salon

Upvotes: 1

Views: 1506

Answers (3)

Michael Geary
Michael Geary

Reputation: 28850

A couple of things I noticed when looking at your page source:

  • Your page is loading both jQuery 1.10.1 and 1.7.2. But it isn't using noConflict(). So these two jQuery versions are stepping on each other.
  • You're also loading three copies of the Maps API: two copies of version 3 and a copy of the deprecated version 2 API.

Now to your question:

  • Use a closure to save your variables for each iteration of the marker loop. You can do this by simply calling a function in each iteration.
  • Instead of using this when you call infowindow.open(), use marker. (this and marker may be the same in this context, but use marker for consistency.)
  • The .close() method of an infowindow does not take any parameters.
  • Don't set the tooltip property when you create the marker. That may work, but it isn't documented that you can add your own properties in this fashion. Instead, simply use a local variable or parameter for tooltip.
  • I would create the infowindow before adding the event listeners. This will actually work fine in either order (since the event listeners are asynchronous), but it looks better to see the infowindow created first.

So, change your for loop to:

for (var i = 0; i < locations.length; i++) {
    addMarker( locations[i], "testinggg" + i );
}

function addMarker( location, tooltip ) {
    var image = new google.maps.MarkerImage(
        "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+location[3]+"|FF0000|000000",
        new google.maps.Size(20, 34),
        new google.maps.Point(0, 0),
        new google.maps.Point(10, 34)
    );

    var myLatLng = new google.maps.LatLng(location[1], location[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: location[0],
        zIndex: location[3]
    });


    var infowindow = new google.maps.InfoWindow({
        content:  "'" + tooltip + "'"
    });
    google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow.open(map, marker);
    });
    google.maps.event.addListener(marker, 'mouseout', function() {
        infowindow.close();
    });
}

That said, you may not like the result you get when you open an infowindow in response to moving the mouse over a marker. What if the marker is near the top of the window? The page will immediately move to make the infowindow fit on the screen, and now the marker won't be under the mouse any more.

You're already setting the title property when you create the marker. This should cause a normal browser tooltip to appear when the mouse is hovered over the marker, and it won't cause the map to move as the infowindow may do. Any reason not to just use that tooltip instead of the infowindow? You could just remove all of the infowindow code, or let the infowindow open on a click as it normally would.

Upvotes: 2

Dr.Molle
Dr.Molle

Reputation: 117314

Set the content of the infowindow onmouseover(you may access there the tooltip-property of the specific marker)

 google.maps.event.addListener(marker, 'mouseover', function() {
        infowindow1.setContent(this.tooltip);
        infowindow1.open(map, this);
    });

the initializing of infowindow1 move to outside the loop and leave the arguments empty.

Upvotes: 1

Code Lღver
Code Lღver

Reputation: 15603

Use the below code:

var infowindow1 = new google.maps.InfoWindow({
    content:  "'"+marker.tooltip+"'"
});

EDIETD:

 var contentString = "testinggg"+i;
 var infowindow1[i] = new google.maps.InfoWindow({
      content: contentString
  });

  var marker = new google.maps.Marker({
     position: myLatLng,
     map: map,
     icon: image,
     title: location[0],
     zIndex: location[3],
     tooltip:"testinggg"+i
  });
  google.maps.event.addListener(marker, 'mouseover', function() {
     infowindow1[i].open(map, marker);
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
    infowindow1[i].close(map, marker);
  });

You can not get the property of marker in the info window. So you need to define the content in other variable.

Upvotes: 1

Related Questions