Tuesday 23 October 2012

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>



No comments:

Post a Comment