Tip & Tricks

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);
?>