I've following php page which get a single latitude and longitude from mysql db and it's editable by Mouse. I mean i can move the position by click on the marker.
Well, now, I've few lat and long in my db. I want to show all lat and long on the map. How can i do this.
Javascript code:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>
<script type="text/javascript">
// Map Initialize function
function initialize()
{
// Set static latitude, longitude value
var latlng = new google.mpaps.LatLng(<?php echo $lat_d; ?>, <?php echo $long_d; ?>);
// Set map options
var myOptions = {
zoom: 16,
center: latlng,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Create map object with options
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create and set the marker
marker = new google.maps.Marker({
map: map,
draggable:true,
position: latlng
});
// Register Custom "dragend" Event
google.maps.event.addListener(marker, 'dragend', function() {
// Get the Current position, where the pointer was dropped
var point = marker.getPosition();
// Center the map at given point
map.panTo(point);
// Update the textbox
document.getElementById('txt_latlng').value=point.lat()+", "+point.lng();
});
}
</script>
Html Code:
<div style="float:left; position:relative; width:550px; border:0px #000 solid;">
<div id="map_canvas" style="width:550px;height:400px;border:solid black 1px;"></div>
</div>
Php code:
$id = (int) $_GET['id'];
$sql = mysql_query("SELECT * FROM parkings WHERE LocId = '$id'");
$res = mysql_fetch_array($sql);
$lat_d = $res['latitude'];
$long_d = $res['longitude'];
Any idea or how can i do this ?
Something like this should do the trick.
<?php
// this code block contains some test stuff
$lat_d = 40.709;
$long_d = -74.007;
// mimic a result array from MySQL
$result = array(array('latitude'=>$lat_d,'longitude'=>$long_d));
?>
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api
/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
// Set static latitude, longitude value
var latlng = new google.maps.LatLng(<?php echo $lat_d; ?>, <?php echo $long_d; ?>);
// Set map options
var myOptions = {
zoom: 16,
center: latlng,
panControl: true,
zoomControl: true,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
// Create map object with options
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<?php
// uncomment the 2 lines below to get real data from the db
// $result = mysql_query("SELECT * FROM parkings");
// while ($row = mysql_fetch_array($result))
foreach($result as $row) // <- remove this line
echo "addMarker(new google.maps.LatLng(".$row['latitude'].", ".$row['longitude']."), map);";
?>
}
function addMarker(latLng, map) {
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true, // enables drag & drop
animation: google.maps.Animation.DROP
});
return marker;
}
</script>
</head>
<body onload="initialize()">
<div style="float:left; position:relative; width:550px; border:0px #000 solid;">
<div id="map_canvas" style="width:550px;height:400px;border:solid black 1px;"></div>
</div>
</body>
</html>