Customize tool tip image

 Here you guys can see that the genaral google maps tool tip is customized. This is how to do it.
In your database have a column for type.
Then retrieve it with php like this.<?php echo $type?> Google maps API supports the image to be customized. It is like this.



var image = new google.maps.MarkerImage('images/markers/<?php echo $type?>.png',
         new google.maps.Size(50, 40), // dimensions of the image
                         new google.maps.Point(0,0), //  origin of the custom icon
        new google.maps.Point(56, 122)  // offset for the image
    );
var marker = new google.maps.Marker({
            position: positionOfPlace,
            icon: image //using the customized image
        });

MarkerImage is a predefined type in google api sothat you guys can directly use it. Give the desired dimensions of your image origin and the offset values as preffered. then when you plot the marker give the variable which you stored the image detalis.

By this method you can simply customize the google maps tool tip.

Google maps Information Window

This is how to add a simple information window to your google maps.
First you have to implement the google map... Here is the google documentation for how to load google maps. https://developers.google.com/maps/documentation/javascript/tutorial... here is the small code snippet which i have used to make an information window for a particular location on google maps.


var infowindow = new google.maps.InfoWindow
({
  content:chHtml,
  maxWidth:200,
maxHeight:200

 });
chHtml=var chHtml ="<h6>Follow us: </h6><h3><a href='<?php echo $link?>'"
+" target='_blank'> <?php echo $name?> </a></h3><div> "

+" <input name=\"add\" class='the_button' type=\"button\" value=\"add\" lat=\"<?php echo $email?>\"  lat=\"<?php echo $lat?>\" long=\"<?php echo $long ?>\" onclick=\"addNew(<?php echo $lat?>, <?php echo $long ?>, '<?php echo $email ?>');\"/> "
+"</div><div> <?php echo $type?>  </br>  </div>"; here chHtml means the content of your information window.  maxWidth maxHeight refers to width and height respectively.

then as the last step in the initialize() function you have to populate the information window.

infowindow.open(map, marker);