Yogi's Talk . . .: Create your own mini google map Search Engine

First of all see the example

in this demo google api is used for Map and searching
Markers and search box is placed custom.

this is just a standalone HTML code you can copy and paste to your favourite writer
and save as html.

for doing such a thing use following code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title> Search Demo </title>
        <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
        type="text/javascript"></script>

        <script type="text/javascript">
            var map;
            function initialize() {

                if (GBrowserIsCompatible()) {

                    function doGenerateMarkerHtmlCallback(marker,html,result) {
                        html.innerHTML+="<b>Result Coordinates: "+result.lat+","+result.lng+"</b><br>";
                        html.innerHTML+="<b>Marker Location: "+marker.getLatLng().toUrlValue()+"</b>";
                        return html;
                    }

                    var options = {
                        resultList : document.getElementById('results'),
                        onMarkersSetCallback : function(markers) {
                            fillTable(markers);
                        },
                        onGenerateMarkerHtmlCallback:doGenerateMarkerHtmlCallback
                        //onGenerateMarkerHtmlCallback : function(marker, div, result) {div.innerHTML = result.title + "<br/>"; return div; }
                    };

                    map = new GMap2(document.getElementById("map_canvas"), {googleBarOptions: options});
                    map.setCenter(new GLatLng(23.450, 72.483), 8);
                    map.addControl(new GSmallMapControl());
                    map.enableGoogleBar();

                    var myLayer = new GLayer("com.google.webcams");
                    map.addOverlay(myLayer);

                }
            }

            function deleteAllRows()
            {
                for(var i = document.getElementById("tblResult").rows.length; i > 0;i--)
                {
                    document.getElementById("tblResult").deleteRow(i -1);
                }
            }

            function setCenterOnMap(lat,lng){
                map.setCenter(new GLatLng(lat,lng), 15);
            }

            function fillTable(markers){
                deleteAllRows();
                var table = document.getElementById('tblResult');

                var counter=65;

                for(i=0;i<markers.length;i++){
                    var row = table.insertRow(i);
                    var cell0 = row.insertCell(0);
                    var newImage = "url(http://www.google.com/mapfiles/marker" + String.fromCharCode(counter) + ".png)";
                    cell0.style.backgroundImage = newImage;
                    cell0.style.backgroundRepeat="no-repeat";
                    cell0.style.width="18px";
                    cell0.style.height="35px";
                    cell0.align="center";
                    cell0.vAlign="top";
                    counter++;

                    var cell1 = row.insertCell(1);
                    cell1.innerHTML = "<a href=javascript:void() onClick=javascript:setCenterOnMap(" + markers[i].marker.getPoint().lat() + "," + markers[i].marker.getPoint().lng() + ")>" + markers[i].result.title + "</a>";
                    cell1.vAlign="top";

                    //alert(markers[i].marker.getPoint().lat() + " - " + markers[i].marker.getPoint().lng());
                }
            }

        </script>
    </head>

    <body onload="initialize()" onunload="GUnload()" style="background-color:aliceblue">
        <table border="0" width="100%" >
            <tr>
                <td style="width: 250px;" align="center" style="vertical-align: top">
                    <div id="results" style="visibility: collapse;height: 0px"></div>
                    <table border="0" width="100%" style="height: 450px">
                        <tr>
                            <td style="height: 10px">

                                <table border="0" width="100%">
                                    <tr>
                                        <td align="right" style="width: 65px">
                                            <img src="http://www.google.com/mapfiles/marker.png"/>
                                        </td>
                                        <td>
                                              Search Results
                                        </td>
                                    </tr>
                                </table>
                                <table border="0">
                                    <tr>
                                        <td>
                                            <img src="myLine.png" width="210px" height="1px" style="vertical-align: top"/>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top">
                                <table id="tblResult" border="0" width="100%" cellspacing="5" >
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <div id="map_canvas" style="width: 100%; height: 550px;"></div>
                </td>
            </tr>

            <tr>
                <td align="right" colspan=2>
                    Demo Created By : <b>Yogesh Prajapati</b><br/>
                </td>
            </tr>
        </table>

    </body>

</html>

for any help related to Map contact.....

Yogi's Talk . . .

Thursday, April 19, 2012

Create your own mini google map Search Engine

No comments:

Post a Comment

Disqus for yogi's talk