Thursday, April 19, 2012

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

<!--
     Created By : Yogesh Prajapati
           Date : 28 March 2011
-->

<!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&amp;v=2&amp;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>
                                            &nbsp;&nbsp;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.....

No comments:

Post a Comment

Disqus for yogi's talk

comments powered by Disqus