I need a map which locates all the stores addresses(Less than 10). Those address must be retreived from the database. But the database don't contain any lat or long field. Therefore geocoding an address into their corresponding lat and long coordinates must be done and appropriate markers must be placed.
The code which I have at the moment is as follows:-
<?php
require_once '../model/stores.php';
$obj=new Stores();
$result=$obj->getStores();
$new_array = array();
while($row=mysql_fetch_assoc($result)){
$new_array[] = $row['stores_address'];
}
$add_js = json_encode( $new_array );
?>
<html>
<head>
<style>
#map_canvas {
width: 500px;
height: 500px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script>
$(document).ready(function () {
var map;
var elevator;
var myOptions = {
zoom: 1,
center: new google.maps.LatLng(0, 0),
mapTypeId: 'terrain'
};
map = new google.maps.Map($('#map_canvas')[0], myOptions);
//var addresses = ['Norway', 'Africa', 'Asia','North America','South America'];
var addresses = <?php echo $add_js ?>;;
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json? address=' +addresses[x]+'&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
new google.maps.Marker({
position: latlng,
map: map
});
});
}
});
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
I have looked on various forums and other web resources but no use as none of them worked out for me...Hope any genius would help me to solve the problem.