Redrawing map based on lat and long google map

Question

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

Answer 1

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.

Answer 2

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

Answer 3

To solve above issue i had done below things. I hope it will help you.

1 i have create two separate

div with id="map" and id="map1".

<div id="map" style="width: 700px; height: 400px;"></div>
<div id="map1" style="width: 700px; height: 400px;"></div>

2. below are my map script.

   <script type="text/javascript">
   
   window.onload = mapdata(38.8833,77.0167,<?php echo $jsonarray; ?>);
   function mapdata(lat,lng,data){
       var locations = data;
       var map = new google.maps.Map(document.getElementById('map'), {
         zoom: 3,
         center: new google.maps.LatLng(lat,lng),
         mapTypeId: google.maps.MapTypeId.ROADMAP
       });
   
       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]),
           map: map
         });
   
         google.maps.event.addListener(marker, 'click', (function(marker, i) {
           return function() {
             infowindow.setContent(locations[i][0]);
             infowindow.open(map, marker);
           }
         })(marker, i)); 
       }
   }
   </script>
   

is array of my data which i displayed in map.

3.

<script> 
$(document).on("click",'#search',function(){
    var zipcode=$("#zipcode").val();
    if (zipcode!='') {
        var market=$("#market").val();
        var country=$("#country").val();
        jQuery.ajax({ //passing value using the jquery
           type:"POST",
           data:"zipcode="+zipcode+"&market="+market+"&country="+country,           
           dataType:'json', 
           url: "<?php echo Yii::app()>createUrl('/front/front/mapsearch/')?>",
           success: function(data){
                if(data.detail != ''){
                    mapdata(data.lat,data.lng,data.detail);
                }else{
                    $("#map").hide();
                    $("#map1").show();
                    $("#map1").html("Data Not Found...!!");
                }
           }
       });
    }       
});
</script>

Now when user will change drop down value that time i am passing my variable in controller and than pass response from controller to view file. and call mapdata function to regenerate map.

below id my returned array.

$result = array('lat'=>$lat,'lng'=>$lng,'detail'=>$marker);
$jsonarray = json_encode($result);
echo $jsonarray; 

Answer 4

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