Question

I am new to gmap3, is it possible to init the gmap3 using a place address? I know generally it is done with latitude and longitude. I have done markers with this this location name using this example. I have already gone through this example too, but no luck. And also i need to zoom the places on selection, i use auto complete for this purpose.

我的代码如下:

 $( #test ).gmap3(
     { action: init ,
         options:{
             address: "kerala,india"
         }
     }

 );

Answer 1

首先使用 getLatLng () 来检索位置, 当成功设置中心时 :

   $( #test1 ).gmap3(
    { action :  getLatLng ,
      address: kerala,india ,
      callback : function(result){
        if (result){
          $(this).gmap3({action:  setCenter , args:[ result[0].geometry.location ]},
                        {action:  setZoom , args:[ 12]});
      } else {
      alert( not found ! );
      }}});

Answer 2

var add="kerala,india";
var geocoder = new google.maps.Geocoder();

geocoder.geocode({ address: add, region:  no  },
function (results, status) {
 if (status.toLowerCase() ==  ok ) {
    // Get center
    var coords = new google.maps.LatLng(
        results[0][ geometry ][ location ].lat(),
        results[0][ geometry ][ location ].lng()
    );
    //alert(coords);
    $map.gmap3("get").setCenter(coords);
    $map.gmap3("get").setZoom(12);
    addMarker(coords);
 }
 else {
    alert("address not found");
 }
}    

function addMarker(marker) {
    $map = $( #googleMap );
    if (marker) {
        $map.gmap3(
            { action:  init ,
                options: {
                    center: eval(marker),
                    zoom: 12,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                }
            },
            { action:  addMarker ,
                latLng: eval(marker),
                options: {
                    draggable: true,
                    icon: new google.maps.MarkerImage( http://maps.google.com/mapfiles/marker.png )
                },
                events: {
                    dragend: function (mark) {
                        updateMarker(mark);
                    }
                }
            });
    }
}

使用上述代码,您还可以获得纬度/纬度,并拖动搜索位置标记。

Answer 3

此特性将在下一个版本( 5. 0) 中出现, 当前没有更新。

以下是工作守则:

  $( #test1 ).gmap3({ 
    action :  getLatLng ,
    address: kerala,india ,
      callback : function(result){
        if (result){
          $(this).gmap3({
            action: "init",
            options:{
                center: result[0].geometry.location,
                zoom: 12
            } 
        });
      } else {
        alert( not found ! );
      }
    }
});

通知,如果您的地图已经初始化,您可以在回调中使用

    $(this).gmap3("get").setCenter(result[0].geometry.location);
    $(this).gmap3("get").setZoom(12);

Answer 4

您也可使用以下代码:

var markerData = [];
markerData.push({ address:  kerala,india , data:    });
$( #test ).gmap3({
   action:  addMarkers ,
   markers: markerData
   }
);

友情链接