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