Wednesday, July 31, 2013

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.

No comments:

Post a Comment