Thursday, 20 February 2014

displaying google map on website

You first need to occur the API key of google map from google web site it is the unique key which google will provide based on your WEB site. That you need to place on top of the page like below.
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAtqTpCKL5xdhdKTH0qbCk1BTj3qButw15PEHf-_ZX8kb2LHkw7RScNMygEDMTuGQnVB2s8cVqDSdQ4g"
        type="text/javascript"></script>
Than you need to place the below code in the javasacript on the page;
<script type="text/javascript">
      
        var map = null;
        var geocoder = null;
        function load() {
            if (GBrowserIsCompatible()) {
                var point;
                // this variable will collect the html which will eventually be placed
                // in the side_bar
                var side_bar_html = "";
                // arrays to hold copies of the markers and html used by the side_bar
                // because the function closure trick doesnt work there
                var gmarkers = [];
                var i = 0;
                var lastlinkid;
                function createMarker(point, name, html, name1, name2, name3, name4) {
                    var marker = new GMarker(point);
                    //        var linkid = "link"+i;
                    GEvent.addListener(marker, "click", function () {
                        // Show the Chhattisgarh TouristPlace description
                        marker.openInfoWindowHtml('<div style="text-align:left ;" class="sectionBg1" ><font size="2" face="Arial"><b><u>' + name1 + '</u></b><br/>' + name2 + '<br/>' + name3 + '<br/>' + name4 + '<br/></font></div>');
                        //          document.getElementById(linkid).style.background="#ffff00";
                        //          lastlinkid=linkid;
                    });
                    // save the info we need to use later for the side_bar
                    gmarkers[i] = marker;
                    // add a line to the side_bar html
                    /* side_bar_html += '<div id="'+linkid+'"><a href="javascript:Linkclicked(' + i + ')">'+ name + '</a><br></div>';*/
                    i++;
                    return marker;
                }
                // This function picks up the click and opens the corresponding info window
                function Linkclicked(i) {
                    GEvent.trigger(gmarkers[i], "click");
                }
                var CGGoodAll = '<%= Details %>';
                var CgIndividual = new Array();
                CgIndividual = CGGoodAll.split('|');
                var map = new GMap2(document.getElementById("map"));
                map.addControl(new GLargeMapControl());
                map.addControl(new GMapTypeControl());
                map.setCenter(new GLatLng(CgIndividual[4], CgIndividual[5]), 13);
                var mm = new GMarkerManager(map);
                // var CGGoodAll = new Array();
                // add the points   
                // map.setCenter(new GLatLng(CgIndividual[4].CgIndividual[5]), 8);
                var point = new GLatLng(CgIndividual[4], CgIndividual[5]);
                var marker = createMarker(point, "This place", "This is", CgIndividual[0], CgIndividual[1], CgIndividual[2], CgIndividual[3]);
                //        GEvent.addListener(map,"infowindowclose", function() {
                //        document.getElementById(lastlinkid).style.background="#ffffff";
                //        });
                mm.addMarkers(gmarkers, 0, 17);
                mm.refresh();
            }
        }
    </script>
 Call the javascript in one of the body method to show the google map.
<body onunload="GUnload()" onload="load()">
 There it will show the Google map on the DIV section;
<asp:Panel ID="mapV" runat="server" Width="400px" CssClass="thickBorder">
                                        <div id="main_map_container" runat="server">
                                            <div id="map" style="width: 400px; height: 470px">
                                            </div>
                                        </div>
                                    </asp:Panel>
Now it will show the google map on the browser as like below;

No comments:

Post a Comment

Others

You will like to read it