Redrawing map based on lat and long google map

I have a google map generate by the following script in the below URL

http://apryll.co.in/maps/index.php

    var locations = [
      ['', -33.890542, 151.274856, 4],
      ['', -33.923036, 151.259052, 5],
      ['', -34.028249, 151.157507, 3],
      ['', -33.80010128657071, 151.28747820854187, 2],
      ['', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP

    });

    var flagIcon_front = new google.maps.MarkerImage("images/marker.png");

    var flagIcon_shadow = new google.maps.MarkerImage("images/marker_shadow.png")
    flagIcon_shadow.size = new google.maps.Size(105, 53);
    flagIcon_shadow.anchor = new google.maps.Point(20, 52);

    var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; padding: 5px; display:block; ";                                                              

        var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-261, -268)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('images/metro-plot-bg-1.png') no-repeat -286px -1361px"
              ,opacity: 1
              ,width: "393px"
              ,height: "233px"
             }
            ,closeBoxMargin: "11px 32px 2px 2px"
            ,closeBoxURL: "images/close.png"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false

        };

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i<locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon: flagIcon_front,
        shadow: flagIcon_shadow,         
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          //infowindow.setContent(locations[i][0]);
          //infowindow.open(map, marker);
          ib.setContent(locations[i][0]);
          ib.open(map, marker);
        }
      })(marker, i));
      var ib = new InfoBox(myOptions);
        //ib.open(map, marker);
    }
     

I have a drop down at the page for choosing different location.

http://apryll.co.in/maps/index.php

When I Choose drop down it brings latitudes and longitudes of different location as response for ajax call.

Now i want to redraw the google map with the newly received lat and longs in the response text

Thanks in Adavance

---

No idea of php so cant provide you sample code, but this what you can do-

As your are fetching the latlngs from the database on making a selection from the combobox, you can also add this functionality to it.

Firstly you should move your marker placing code into a seperate function. The values that are fetched from database should be passed to an array. Let this array be declared in this function only. Then this array can be used to the place the markers, as this function would be executed every time a selection is changed in the combo box.

You can see some Asp.net code in this Question of mine. Hope it helps you.

---

Latlng = new google.maps.LatLng(some_lat,some_lon);
map.panTo(Latlng);

You could also use

map.setCenter(Latlng);

The difference will be that panTo will do it with a nice animation if the original latitude and longitude are close enough to the new one.

Check out the documentation here: https://developers.google.com/maps/documentation/javascript/reference

---

You would have to create a bounds using google.maps.LatLngBounds() and then extend it with your location array.

bounds = new google.maps.LatLngBounds();
for(var count=0;count<locations.length;count++){
    bounds.extend(new google.maps.LatLng(locations[count][1],locations[count[2]);
}
map.fitBounds(bounds);

You can also use map.panToBounds(bounds) if you want to get fancy

and then somewhere later

链接地址: http://www.djcxy.com/p/81508.html

上一篇: 谷歌地图刷新灰色

下一篇: 根据纬度和长谷歌地图重新绘制地图