Search code examples
javascriptgoogle-mapsshadowbox

Google maps and shadowbox


I'm building a javascript function that load google maps inside shadowbox, this is quite easy using this code (I used the plugin calld GeoPlugin to get latitude and longitude, because I don't now how to get my lat and long automatically):

function initGeoLocationOnDemand() {

    $('a.btnInitGeoLoc').click(function () {
        if (GBrowserIsCompatible()) {
            Shadowbox.open({
                player: "html",
                content: "",
                height: 300,
                width: 500,
                options: {
                    onFinish: function (item) {
                        var body = document.getElementById(Shadowbox.playerId);
                        var map = new GMap2(body);
                        //using geoPlugin to get lat and long
                        var point = new GLatLng(geoplugin_latitude(), geoplugin_longitude());
                        map.setCenter(point, 15);
                        var marker = new GMarker(point);
                        var addrFields = ['street_address'];
                        map.addOverlay(marker);

                        marker.openInfoWindow(document.createTextNode("hello");
                        // add some simple controls
                        map.addControl(new GSmallMapControl());
                        map.addControl(new GMapTypeControl());
                    }
                }
            });
        } else {
            alert("Your browser is not compatible with Google Maps!");
        }
    });
    Shadowbox.init();
}

Now I would like tu use GoogleMaps Reverse Geocoding to get inside the information window in googleMaps marker information like: city name, country name, street name, postal code, etc...

I did this code, following GoogleMaps api, but it doesn't work anymore... always using GeoPlugin:

function initGeoLocationOnDemand() {

    $('a.btnInitGeoLoc').click(function () {
        if (GBrowserIsCompatible()) {
            Shadowbox.open({
                player: "html",
                content: "",
                height: 300,
                width: 800,
                options: {
                    onFinish: function (item) {

                        var body = document.getElementById(Shadowbox.playerId);
                        var geocoder;
                        var map = new google.maps.Map(body);
                        var infowindow = new google.maps.InfoWindow();
                        var marker;
                        function initialize() {
                            geocoder = new google.maps.Geocoder();
                            var latlng = new google.maps.LatLng(geoplugin_latitude(),geoplugin_longitude());
                            var myOptions = {
                                zoom: 8,
                                center: latlng,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            }
                            map = new google.maps.Map(body, myOptions);
                        }

                        function codeLatLng() {
                            var input = document.getElementById("latlng").value;
                            var latlngStr = input.split(",", 2);
                            var lat = parseFloat(latlngStr[0]);
                            var lng = parseFloat(latlngStr[1]);
                            var latlng = new google.maps.LatLng(lat, lng);
                            geocoder.geocode({ 'latLng': latlng }, function (results, status) {
                                if (status == google.maps.GeocoderStatus.OK) {
                                    if (results[1]) {
                                        map.setZoom(11);
                                        marker = new google.maps.Marker({
                                            position: latlng,
                                            map: map
                                        });
                                        infowindow.setContent(results[1].formatted_address);
                                        infowindow.open(map, marker);
                                    }
                                } else {
                                    alert("Geocoder failed due to: " + status);
                                }
                            });
                        }
                    }
                }
            });
        } else {
            alert("Your browser is not compatible with Google Maps!");
        }
    });
    Shadowbox.init();
}

There is a way to get latitude and longitude without using plugins?

There is a way to get information about Country name, City name, street name, postal code, etc?

Thanks in advance for your help!


Solution

  • Latitude and longitude of what place do you want? The client machine?