Google मानचित्र API v3

Question

पर सीमाएं रीसेट करें जब उपयोगकर्ता कोई विकल्प चुनता है तो मैं GoogleMap की सीमाओं को कैसे रीसेट कर सकता हूं? बाउंड पहले से ही क्षेत्र की 'बड़ी तस्वीर' को शामिल करने के लिए सेट कर दिए गए हैं, जब मैं कोई विकल्प चुनता हूं तो मैं एक specfic क्षेत्र में ज़ूम करना चाहता हूं ... और सीमाओं को रीसेट करके ऐसा करने की आवश्यकता है। लेट/लांग शामिल करने के लिए विस्तारित नहीं होगा, क्योंकि वे पहले से ही शामिल हैं।

Answer 1

आपको new bounds object बनाना है, इसे मानचित्र बिंदु जोड़ें, और फिर मानचित्र पर सीमाएं जोड़ें।

संघनित समाधान:

//Create new bounds object 
var bounds = new google.maps.LatLngBounds(); 
//Loop through an array of points, add them to bounds 
for (var i = 0; i < data.length; i++) { 
     var geoCode = new google.maps.LatLng(data[i][1], data[i][2]); 
     bounds.extend(geoCode); 
    } 
    //Add new bounds object to map 
    map.fitBounds(bounds); 

, मौजूदा मार्कर को हटाने, ajax के माध्यम से अंक की एक अद्यतन सरणी हो रही उन्हें मानचित्र में जोड़ने, और फिर रीसेट करने नक्शा boundries के लिए मेरा पूर्ण समाधान।

<script type="text/javascript"> 

var map; 
var markers = []; 

$(document).ready(function() { 
    initialize(); 
    setInterval(function() { 
     setMarkers(); 
    }, 3000); 
}); 

google.maps.visualRefresh = true; 
function initialize() 
{ 
    var mapOptions = { 
     zoom: 2, 
     center: new google.maps.LatLng(45, -93), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    setMarkers(); 
} 

function setMarkers() 
{ 
    removeMarkers(); 

    var bounds = new google.maps.LatLngBounds(); 

    $.ajax({ 
     url: "/Your/Url?variable=123", 
     dataType: "json", 
     success: function (data) { 
      //Data returned is made up of string[3] 
      if (data != null) { 
       //loop through data 
       for (var i = 0; i < data.length; i++) { 
        var geoCode = new google.maps.LatLng(data[i][1], data[i][2]); 
        var marker = new google.maps.Marker({ 
         position: geoCode, 
         map: map, 
         title: data[i][0], 
         content: '<div style="height:50px;width:200px;">' + data[i][0] + '</div>' 
        }); 

        var infowindow = new google.maps.InfoWindow(); 
        google.maps.event.addListener(marker, 'click', function() { 
         infowindow.setContent(this.content); 
         infowindow.open(map, this); 
        }); 

        markers.push(marker); 
        bounds.extend(geoCode); 
       } 
      } 
      map.fitBounds(bounds); 
     } 
    }); 
} 

function removeMarkers() 
{ 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); 
    } 
}