mercredi 6 janvier 2016

how to change map locations based on radio button clicked

I am trying to show map in site. unfortunately its working good. Now my concept is divide into three parts of page. half for map and 25% for check boxs (generated by DB. name of the check boxs from db).balance 25% for images(based on check box image changed( this image from db). everything working good. like when i click check box image updated nice. but the map not update. (i want this, when i click check box get latitude and a longitude from my db and update the map), now my map not showing. image only update.

<script src="http://ift.tt/UE5hJi" type="text/javascript"></script>
<!--************************     END OF MAP   ************************************-->

    <div id="map_canvas"> <!-- Map will display -->
        <div> <!-- Fullscreen Loading & Fullscreen Buttons area -->
            <span style="color:Gray;">Loading map...</span>
        </div> 
    </div><!-- Map Ends display -->
<?php include '../includes/mapscript.php'; ?>

<script type="text/javascript">
    var locations = [
    <?php
        $result=mysql_query($query);
        { 
            if ($num=mysql_num_rows($result)) 
            {
                $i=0;
                while ($i<$num) 
                {
                    $id=mysql_result($result,$i,"id");
                    $title=mysql_result($result,$i,"title");
                    $lapt=mysql_result($result,$i,"lapt");
                    $longd=mysql_result($result,$i,"longd");
                    $aimage=mysql_result($result,$i,"aimage");
                    $categoryid=mysql_result($result,$i,"categoryid");
                    $short_title=mysql_result($result,$i,"short_title");
                    echo "['<div class=info><h4>$title</h4><br><a href=http://www..testsite.com/blog/id=$id><img src=images/map/$aimage></a><br><p>$short_title</p></div>', $lapt, $longd],";
                    $i++;
                }
            }
            else 
            {
                echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
            }
        }
    ?>
    ];
    // Setup the different icons and shadows
    var iconURLPrefix = 'map_images/';

    var icons = [  
      iconURLPrefix + 'marker1.png',
      iconURLPrefix + 'marker2.png',
      iconURLPrefix + 'marker3.png',
      iconURLPrefix + 'marker4.png',
      iconURLPrefix + 'marker5.png',
      iconURLPrefix + 'marker6.png',      
      iconURLPrefix + 'marker7.png'
    ]
    var icons_length = icons.length;


    var shadow = {
      anchor: new google.maps.Point(5,13),
      url: iconURLPrefix + 'msmarker.shadow.png'
    };

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: -5,
      center: new google.maps.LatLng(40.715618, -74.011133),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      disableDefaultUI: true,
      panControl: false,
      zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });

    var infowindow = new google.maps.InfoWindow({
      maxWidth: 400,
      maxHeight: 350
    });

    var marker;
    var markers = new Array();

    var iconCounter = 0;

    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2], locations[i][3], locations[i][4], locations[i][5]),
        map: map,
        icon : icons[iconCounter],
        shadow: shadow
      });

      markers.push(marker);

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));

      iconCounter++;
      // We only have a limited number of possible icon colors, so we may have to restart the counter
      if(iconCounter >= icons_length){
        iconCounter = 0;
      }
    }

    function AutoCenter() {
      //  Create a new viewpoint bound
      var bounds = new google.maps.LatLngBounds();
      //  Go through each...
      $.each(markers, function (index, marker) {
        bounds.extend(marker.position);
      });
      //  Fit these bounds to the map
      map.fitBounds(bounds);
    }
    AutoCenter();
</script> 




Aucun commentaire:

Enregistrer un commentaire