Encountering an issue with Google Map default zoom. Despite changing the zoom value, it is not responding as expected. Any assistance on this matter would be greatly appreciated. Thank you in advance for your help.
<script src="http://maps.google.com/maps/api/js?key=AIzaSyDrUSGOXq4cTcc15LplHJshcnGM981dEoQ&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//Sample code written by August Li
var icon = new google.maps.MarkerImage("images/placeholder.png",
new google.maps.Size(32, 32), new google.maps.Point(0, 0),
new google.maps.Point(13, 32));
var center = null;
var map = null;
var currentPopup;
var bounds = new google.maps.LatLngBounds();
function addMarker(lat, lng, info) {
var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
position: pt,
icon: icon,
map: map
});
var popup = new google.maps.InfoWindow({
content: info,
maxWidth: 300
});
google.maps.event.addListener(marker, "click", function() {
if (currentPopup != null) {
currentPopup.close();
currentPopup = null;
}
popup.open(map, marker);
currentPopup = popup;
});
google.maps.event.addListener(popup, "closeclick", function() {
map.panTo(center);
currentPopup = null;
});
}
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(0, 0),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.ZOOM_PAN
}
});
<?php
$query = mysql_query("SELECT * FROM locations WHERE ClinicId=$location_id")or die(mysql_error());
while($row = mysql_fetch_array($query))
{
$name = $row['ClinicName'];
$lat = $row['ClinicLatitude'];
$lon = $row['ClinicLongitude'];
$desc = $row['ClinicAddress'];
echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n");
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script> #map { width: 100%; height: 300px; border: 0px; padding: 0px; }<div id="map"></div>