开发者

Google maps Info Window Overlay content just like that in maps.goole.com

开发者 https://www.devze.com 2023-01-19 23:29 出处:网络
I want have the info window content for a marker just a s below My code so far is loadEmbeddedMap : function() {

I want have the info window content for a marker just a s below

Google maps Info Window Overlay content just like that in maps.goole.com

My code so far is

loadEmbeddedMap : function() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initEmbeddedMap";
        document.body.appendChild(script)
    },
    initEmbeddedMap : function() {
        var myLatlng = new google.maps.LatLng(40, -80);
        var myOptions = {
                zoom: 8,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        map = new google.maps.Map(document.getElementById("embeddedGoogleMap"), myOptions);
        geocoder = new google.maps.Geocoder();
        geocoder.geocode( { 'address': $('#userMapAddress').val()}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);
                marker = new google.maps.Marker({
                    map: map, 
                    position: results[0].geometry.location
                });
                console.debug(results[0]);
                infowindow = new google.maps.InfoWindow();
                var infoWindowContent = "<div><strong>Address:</strong></div>";
                infoWindowContent    += "<div>"+results[0].address_components[0].short_name+","+results[0].address_components[1].short_name+"</div>";
                infoWindowContent    += "<div>"+results[0].address_components[5].short_name+","+results[0].address_componen开发者_高级运维ts[7].short_name+"</div>";
                //infoWindowContent    += results[0].formatted_address;
                infowindow.setContent(infoWindowContent);
                infowindow.open(map, marker);
            } else {
                //alert("Geocode was not successful for the following reason: " + status);
            }
        });
        $('#embeddedGoogleMapWrapper').show();
    },

Code above outputs this

Google maps Info Window Overlay content just like that in maps.goole.com

How to get those 'Directions', 'Search near by' stuffs..? Any helps appreciated..


I would start by reading

http://code.google.com/apis/maps/documentation/localsearch/devguide.html#hiworld

As i can see it is possible to do what you want. I cant get you a straight answer but maybe a clue. I would create my own form in infowindow at least pretty close to the original google one and handle click events by sending those search queries. Than you need to handle search results

http://code.google.com/apis/maps/documentation/localsearch/devguide.html#handle_search_results

Do some testing with

http://code.google.com/apis/ajax/playground/#the_hello_world_of_local_search

For example you can get lat from localSearch.results[i].lat and so on.

I hope you can get something out of this

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号