Main HTML Page
<script type="text/javascript">
var infowindow = null;
var lat, lng;
var map;
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
$(document).ready(function () { initialize('1'); }); // on doc ready call initialize
function initialize(id) {
//alert(id);
directionsDisplay = new google.maps.DirectionsRenderer(); // create direction render object
<?php $city_name = Configure::read('pre_city_select'); ?> // select city name to create canvas
<?php //$city_name = '2/3A 2nd Floor, Medavakkam, Chennai'; ?>
geocoder = new google.maps.Geocoder(); // create new geocoder object to find lat lang
/* find lat and lng for city name */
geocoder.geocode({ 'address': '<?php echo $city_name; ?>' }, function(results, status) {
//var myLatLng = results[0].geometry.location;
var myLatLng = new String(results[0].geometry.location);
var removebrace = myLatLng.replace(/\(/g,"");
var str = removebrace.replace(/\)/g, '');
var latlng1 = str.split(',');
lat = parseFloat(latlng1[0]);
lng = parseFloat(latlng1[1]);
//alert(lat);
//alert(lng);
var centerMap = new google.maps.LatLng(lat, lng);
/* Setting options for new map */
var myOptions = {
zoom: 11,
center: centerMap,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
/* Drawing map in the page */
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
//setMarkers(map, sites);
/* Create new global info window */
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
if(id == 'SearchMap') {
var loc = document.getElementById('LocationmasterName').value;
var cat = document.getElementById('SubcatName').value;
var QueryString = loc + '&subcatname=' + cat;
/* get input for placing markers */
/* Note - dataType should be specified as json in ajax call, so that it can interpret */
$.ajax({
type : "POST",
//data : $('#UserAjaxloginForm').serialize(),
url : myBaseUrl+('/deals/search_map?locationname=')+QueryString,
dataType: 'json',
//url : "/dealzbuyp4sep15/index.php/users/ajaxlogin?un="+(($('#UserUsername').val())),
success : function(opt){
alert(opt);
setMarkers(map, opt);
}
});
}
else {
$.ajax({
type : "POST",
//data : $('#UserAjaxloginForm').serialize(),
url : myBaseUrl+('/deals/maplatlng?id=')+id,
dataType: 'json',
//url : "/dealzbuyp4sep15/index.php/users/ajaxlogin?un="+(($('#UserUsername').val())),
success : function(opt){
//alert(id);
setMarkers(map, opt);
}
});
}
});
}
/* Actual Input for marker should be like this */
/* var sites = [
['Mount Evans', 39.58108, -105.63535, 4, 'This is Mount Evans.'],
['Irving Homestead', 40.315939, -105.440630, 2, 'This is the Irving Homestead.'],
['Badlands National Park', 43.785890, -101.90175, 1, 'This is Badlands National Park'],
['Flatirons in the Spring', 39.99948, -105.28370, 3, 'These are the Flatirons in the spring.']
]; */
/* Function to place markers in the map drawn */
function setMarkers(map, markers) {
/* Setting up image for marker. If not set, default from google will be used. */
markerimage = myBaseUrl+'/theme/dealzbuy/img/z1.png'
for (var i = 0; i < markers.length; i++) {
var siteLatLng = new google.maps.LatLng(markers[i][1], markers[i][2]);
var title = markers[i][0];
//var zIndex = markers[i][2];
var html = markers[i][3];
var marker = new google.maps.Marker({
position: siteLatLng,
animation: google.maps.Animation.DROP,
icon: markerimage,
map: map,
title: title,
//zIndex: zIndex,
html: html
});
var contentString = "Some content";
/* On click of marker open info window */
google.maps.event.addListener(marker, "click", function () {
//alert(this.html);
infowindow.setContent(this.html);
infowindow.open(map, this);
});
$('#container').slideUp(2000);
// $('#container2').show();
}
}
/* Function to find direction from start to destination */
function calcRoute(a,b) {
//var stlat = google.loader.ClientLocation.latitude;
//var stlng = google.loader.ClientLocation.langitude;
//var start = new google.maps.LatLng(stlat, stlng);
/* Get start place from user */
var startplace = prompt("Please type your origin point");
var start = startplace;
var end = new google.maps.LatLng(a, b);
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
Finding Lat Lng for place in a php page
/* Set up an google URL to get details */
/* Note -
Address should be specified in the same format as shown below. There should not be any spaces or new line characters. Better is to replace them with a plus symbol.
Sensor=false is mandatory.
*/
$url = 'http://maps.googleapis.com/maps/api/geocode/json?address=123,+100feet+road,+Velachery,+Chennai+600042&sensor=false';
$google_response = json_decode(file_get_contents($url));
$lat = $google_response->results[0]->geometry->location->lat;
$lng = $google_response->results[0]->geometry->location->lng;
PHP Page to provide dynamic input on ajax call
<?php
$input = array(
array("Bondi Beach", "-33.890542", "151.274856", "4", "This is Bondi Beach."),
array("Coogee Beach", "-34.028249", "151.157507", "3", "This is Coogee Beach.")
);
echo json_encode($input);
?>
