Tuesday 23 October 2012

Bing Map using JavaScript


<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3&mkt=en-us">
</script>

<script type="text/javascript">
        var map = null;
        var pinPoint = null;
        var pinPixel = null;

        $(document).ready(function () {
            jQuery.support.cors = true;
            $("#btnGetInfo").click(function () {
                $.ajax({
                    type: 'POST',
                    cache: false,
                    url: 'http://maps.google.com/maps/geo?q=ahmedabad&output=csv',
                    contentType: 'application/json; charset=utf-8',
                    success: onSuccess,
                    error: onError
                });

                function onSuccess(e) {

                    if (e != "") {
                        var LL = new VELatLong(e.split(',')[2], e.split(',')[3]);
                    }
                    else {
                        return false;
                    }
                    map = new VEMap('myMap');
                    map.LoadMap(LL, 15, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
                    AddPin();
                }
                function onError(e) { alert(e.d); }
            });
        });

        
        function AddPin() {
            // Add a new pushpin to the center of the map.
            pinPoint = map.GetCenter();
            pinPixel = map.LatLongToPixel(pinPoint);
            map.AddPushpin(pinPoint);
        }
    </script>

<body onload="GetMap()">
    <form id="form1" runat="server">
    <div>
        <div id='myMap' style="position: relative; width: 1000px; height: 450px;">
        </div>
        <input id="btnGetInfo" type="button" value="Get Scene Information" name="getinfo">
        <br />
    </div>
    </form>
</body>

Google Map Using JavaScript


<script type="text/javascript">
        var map, geocoder, lat, long, loc;
        var infowindow;
        function initialize(latitude, longitude, location) {
 lat = latitude;
 long = longitude;
 loc = location;
 InitializeMap();
         }

        function InitializeMap() {
            var latlng = new google.maps.LatLng(lat, long);
            var myOptions = {
                zoom: 16,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: true,
                mapTypeControlOptions:
            {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                poistion: google.maps.ControlPosition.TOP_RIGHT,
                mapTypeIds: [google.maps.MapTypeId.ROADMAP,
                                     google.maps.MapTypeId.TERRAIN,
                                     google.maps.MapTypeId.HYBRID,                 
                                     google.maps.MapTypeId.SATELLITE]
            },
                navigationControl: true,
                navigationControlOptions:
            {
                style: google.maps.NavigationControlStyle.ZOOM_PAN
            },
                scaleControl: true,
                disableDoubleClickZoom: true,
                streetViewControl: true,
                draggableCursor: 'move'

            };
            map = new google.maps.Map(document.getElementById("dvMap"),
                             myOptions);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, long),
                map: map,
                title: 'Click me'
            });
            infowindow = new google.maps.InfoWindow({
                content: '<div style="font-family:verdana; font-size: 9pt; color:  
                                #444444;">Location info: ' + loc + '<br/>Latitude: '
                               + lat + '<br/>Longitude: ' + long + '</div>'
            });
            google.maps.event.addListener(marker, 'click', function () {
                infowindow.open(map, marker);
            });

        }

        function FindLocaiton() {
            geocoder = new google.maps.Geocoder();
            InitializeMap();

            var address = document.getElementById("addressinput").value;
            loc = address;
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    var marker1 = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                    });
                    lat = results[0].geometry.location.Xa;
                    long = results[0].geometry.location.Ya;
                    infowindow = new google.maps.InfoWindow({
                        content: "<div style='font-family:verdana; font-size: 9pt;
                                      color: #444444;'>Location info: " + loc + "<br/>
                                     Latitude: " + lat + "<br/>Longitude: " + long + "</div>"
                    });

                    google.maps.event.addListener(marker1, 'click', function () {
                        infowindow.open(map, marker1);
                    });

                }
                else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });


        }

        function Button1_onclick() {
            FindLocaiton();
        }
 </script>
<table>
        <tr>
            <td>
                <input id="addressinput" type="text" style="width: 447px" />
            </td>
            <td>
                <input id="Button1" type="button" value="Find"
                          onclick="return Button1_onclick()" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="dvMap" style="width: 700px; height: 420px">
                </div>
            </td>
        </tr>
    </table>