First you need to create a custom module with single model (one model-one table).
Suppose Bd_Storelocator is a custom module and Storelocator is a model,
Then use following code in any phtml file as
<?php
$requireData = Mage::getModel('storelocator/storelocator')->getStore();
//print_r($requireData->getData());
$markers = "";
$messages = "";
foreach ($requireData as $data) {
$markers .= '{lat:' . $data["latitude"] . ',lng:' . $data["longitude"] . ',name:' . '"' . $data["storename"] . '"},';
$messages .= "'" . addslashes($data["storename"]) . "<br/ >" . addslashes($data["address"]) . "<br />" . $data["telephone"] . "', "; }
$markers1 = rtrim($markers, ",");
$messages1 = rtrim($messages, ", ");
?>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
google.maps.event.addDomListener(window, "load", initialize);
function initialize() {
var map = new google.maps.Map(document.getElementById("map_canvas"), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableAutoPan: false,
streetViewControl: false
});
var markers = [<?php echo $markers1; ?>];
var widt = document.body.offsetWidth;
document.getElementById("map_canvas").width = widt+"px";
for (index in markers) {
if(Number(index) != index) break;
addMarker(markers[index],map,index);
}
var bounds = new google.maps.LatLngBounds();
for (index in markers) {
if(Number(index) != index) break;
var data = markers[index];
bounds.extend(new google.maps.LatLng(data.lat, data.lng));
}
// Don't zoom in too far on only one marker
if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
bounds.extend(extendPoint1);
bounds.extend(extendPoint2);
}
map.fitBounds(bounds);
}
function addMarker(data,map,index) {
// Create the marker
//var image = '<?php //print $base_url . '/' . $themePath . '/images/drupal.png' ?>';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map,
//icon: image,
title: data.name
});
attachSecretMessage(marker,index,map)
}
function attachSecretMessage(marker,number,map) {
var message = [<?php echo $messages1; ?>];
var infowindow = new google.maps.InfoWindow({
content: message[number],
size: new google.maps.Size(50,50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
jQuery("#showinfo").html(message[number]);
});
}
</script>
<div class="mapBlock">
<div id="map_canvas" style="height: 473px;">
</div>
</div>
<div id="showinfo">
</div>
