Google地图信息窗口叠加内容就像maps.goole.com中的内容 [英] Google maps Info Window Overlay content just like that in maps.goole.com

问题描述

我想让标记的信息窗口内容如下

到目前为止我的代码是

  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>地址：< / 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_components [7] .short_name +< / div>; 
 // inf oWindowContent + =结果[0] .formatted_address; 
 infowindow.setContent（infoWindowContent）; 
 infowindow.open（map，marker）; 
} else {
 // alert（由于以下原因，地理编码不成功：+ status）; 
} 
}）; 
 $（'＃embeddedGoogleMapWrapper'）。show（）; 
}，
  

以上输出代码

如何获取那些'路线'，'搜索附近'的东西..？任何有帮助的赞赏..

解决方案

我会从阅读开始

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

正如我所看到的那样，您可以做到自己想做的事。我不能给你一个直接的答案，但也许是一个线索。
我会在infowindow中创建自己的表单，至少非常接近原始的Google表单，并通过发送这些搜索查询来处理点击事件。
比您需要处理搜索结果

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

使用

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

例如，您可以从localSearch.results获取lat [我] .lat等等。

我希望你能从中得到一些东西。

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

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_components[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

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

这篇关于Google地图信息窗口叠加内容就像maps.goole.com中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！