Showing posts with label google map api. Show all posts
Showing posts with label google map api. Show all posts

Saturday, June 7, 2014

Google Directions Points Decode

https://maps.googleapis.com/maps/api/directions/json?.....

Google Direction API membantu kita untuk mendapatkan laluan dari point A ke point B.

Kalau kita baca balik JSON(prefered) data yang google return, google akan bagi steps start & end location point. dimana kalau kita translate terus diatas peta akan nampak cacat sedikit sebab polyline tak ikut exactly atas jalan.

Goole ada sertakan detail point diantara start & end point, melalui atribute routes->legs->steps[$_]->polyline->points

Cuma, 'cuma' ia telah di encode kan supaya size data nya tidak besar. saya agak sahaja. sebab google ada bagi tips/cara yg digunakan untuk encode points ni. cuma dia tak bagi complete function kat kita.... hampeh kan?... hehehhe

Saya nak buat sendiri x reti... bila cari kat internet diaorg kata dah ada org buat guna javascript tapi saya cari x jumpa... link broken... yang saya jumpa mamat ni dah convert ker PHP code. dia translate dr javascript... saya plak nak kan yg javascript... bila cari tak jumpa... saya translate balik ke javascript.... hahahhaa.... . may be ada mistake.. tapi saya test ok jer... hehehhe

ini code nya dlm javascript function

/*
 * Copyright (c) 2008 Peter Chng, http://unitstep.net/
 * 
 * Permission is hereby granted, free of charge, to any person obtaining
 * a copy of this software and associated documentation files (the
 * "Software"), to deal in the Software without restriction, including
 * without limitation the rights to use, copy, modify, merge, publish,
 * distribute, sublicense, and/or sell copies of the Software, and to
 * permit persons to whom the Software is furnished to do so, subject to
 * the following conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/*
 * convert to javascipt by hairul@mbek@ayun, http://blog.mbek.net 
*/

function decodePolylineToArray(encoded){
  var length = encoded.length;
  var index = 0;
  var points = [];
  var lat = 0;
  var lng = 0;

  while (index < length)
  {
    // Temporary variable to hold each ASCII byte.
    var b = 0;

    // The encoded polyline consists of a latitude value followed by a
    // longitude value.  They should always come in pairs.  Read the
    // latitude value first.
    var shift = 0;
    var result = 0;
    do
    {
      // The `ord(substr(encoded, $index++))` statement returns the ASCII
      //  code for the character at $index.  Subtract 63 to get the original
      // value. (63 was added to ensure proper ASCII characters are displayed
      // in the encoded polyline string, which is `human` readable)
      //b = ord(substr(encoded, index++)) - 63;
      b = encoded.charCodeAt(index++) - 63;

      // AND the bits of the byte with 0x1f to get the original 5-bit `chunk.
      // Then left shift the bits by the required amount, which increases
      // by 5 bits each time.
      // OR the value into $results, which sums up the individual 5-bit chunks
      // into the original value.  Since the 5-bit chunks were reversed in
      // order during encoding, reading them in this way ensures proper
      // summation.
      result |= (b & 0x1f) << shift;
      shift += 5;
    }
    // Continue while the read byte is >= 0x20 since the last `chunk`
    // was not OR'd with 0x20 during the conversion process. (Signals the end)
    while (b >= 0x20);

    // Check if negative, and convert. (All negative values have the last bit
    // set)
    dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));

    // Compute actual latitude since value is offset from previous value.
    lat += dlat;

    // The next values will correspond to the longitude for this point.
    shift = 0;
    result = 0;
    do
    {
      //b = ord(substr(encoded, index++)) - 63;
      b = encoded.charCodeAt(index++) - 63;
      result |= (b & 0x1f) << shift;
      shift += 5;
    }
    while (b >= 0x20);

    dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
    lng += dlng;

    // The actual latitude and longitude values were multiplied by
    // 1e5 before encoding so that they could be converted to a 32-bit
    // integer representation. (With a decimal accuracy of 5 places)
    // Convert back to original values.
    points.push([lat * 1e-5, lng * 1e-5]);
  }

  return points;
}

Saturday, November 23, 2013

Google Map Api V2 Shutdown

Salam Semua.

Lama tak menulis.

Seperti yang semua tahu, Google map API V2 dah shutdown sepenuhnya pada 19hb Novermber 2013.

salah satu client aku yg pakai Google Map API v2 dlm module portal dia terlalu berkira utk invest supaya convert kod semamsa ke V3. aku pun tak ada pilihan selain melihat sejauh mana automagically yg Google Map team claim dlm perubahan dr v2 ke v3 ni.

As aku tunggu dan lihat.... dpt gak la email dr client yg mengatakan some module tak berjalan seperti sepatutnya... kalau ikutkan hati malas nak layan dah. as aku dah cakap awal2.

tapi pikirkan hubungan antara pelanggan... aku tgk2 gak kan la masalah berkaitan Google Map API dia.

untuk convert ke V3 mmg aku x sanggup secara percuma. as boleh dikira buat balik semua sekali.

and apa yg aku jumpa. semua yg lain jalan ok... cuma... 'point' yg kita dpt masa GEvent.addListener ada perubahan sedikit

dari:

var lat = point.x;
var lng = point y;

kepada

var lat = point.ob;
var lng = point.nb;

untuk setakat ni, itu sahaja yang aku jumpa...

****

var lng = point.nb;

Sebelum ni aku update point.pb... ok je... tapi alih2 x bleh plak... kene pakai point.nb.... hahahahha sorryyyy .... ke aku yg dah tuaaaaa....

Monday, May 17, 2010

Google MAP API | Map search within Radius

Post sebelum ni aku ada postkan mysql statement utk query MySQL utk mendapatkan lat &long didalam radius yg kita perlukan.

post ini pula aku sertakan keratan javascript function utk draw radius layer on top of google map.

here's the code:

html:

Find Within Radius The circle drawn here is a circle on the surface of the Earth.

Radius: Miles Kilometers

Javascript:

function drawCircle() {
 var oUnitsMI = document.searchMap.unitsMI;
 var oUnitsKM = document.searchMap.unitsKM;
 var oRadius = document.searchMap.radiusInput;
 oRadius.value = oRadius.value ? oRadius.value : 500;
 
 
 //alert(oRadius.value);
 //circleRadius = oRadius.value;
 if (oRadius.value == '') {
  alert("Enter a number for radius");
  return;
 }
 circleRadius = parseFloat(oRadius.value);
 
 if (circleRadius > 9999) {
  alert("To Large");
  return;
 }
 
 
 if (oUnitsKM.checked) {
  circleUnits = 'KM';
 }
 else {
  circleUnits = 'MI';
 }
 
 doDrawCircle();
 
 //optional features, calling ajax if select in radius checked. uncheck to suite your ajax function
 //if(document.searchMap.inradius.checked){
  // var center = map.getCenter();
 //  var urls = '?action=search¢er=' + center + "&radius=" + circleRadius + "&unit=" + circleUnits;
 //  ajaxpage(urls,'searchcontainer'); 
 //}
}
 
 
function doDrawCircle(){
 
 if (circle) {
  map.removeOverlay(circle);
 }
 
 
 if (centerMarker) {
  map.setCenter(centerMarker.getLatLng())
 }
 else {
  centerMarker = new GMarker(map.getCenter(),{draggable:true});
  GEvent.addListener(centerMarker,'dragend',drawCircle)
  map.addOverlay(centerMarker);
 }
 
 var center = map.getCenter();
 
 var bounds = new GLatLngBounds();
 
 
 var circlePoints = Array();
 
 with (Math) {
  if (circleUnits == 'KM') {
   var d = circleRadius/6378.8; // radians
  }
  else { //miles
   var d = circleRadius/3963.189; // radians
  }
 
  var lat1 = (PI/180)* center.lat(); // radians
  var lng1 = (PI/180)* center.lng(); // radians
 
  for (var a = 0 ; a < 361 ; a++ ) {
   var tc = (PI/180)*a;
   var y = asin(sin(lat1)*cos(d)+cos(lat1)*sin(d)*cos(tc));
   var dlng = atan2(sin(tc)*sin(d)*cos(lat1),cos(d)-sin(lat1)*sin(y));
   var x = ((lng1-dlng+PI) % (2*PI)) - PI ; // MOD function
   var point = new GLatLng(parseFloat(y*(180/PI)),parseFloat(x*(180/PI)));
   circlePoints.push(point);
   bounds.extend(point);
  }
 
  if (d < 1.5678565720686044) {
   circle = new GPolygon(circlePoints, '#00BE00', 1, 1, '#3EFF3E', 0.25); 
  }
  else {
   circle = new GPolygon(circlePoints, '#00BE00', 1, 1); 
  }
  map.addOverlay(circle); 
 
  map.setZoom(map.getBoundsZoomLevel(bounds));
  
  
 }
}

kalau diperhatikan di penghujung function drawCircle ada line yg aku comment kan. line berkaitan adalah tambahan utk memanggil function ajax utk retrive data dr mysql ber dasarkan radius circle yg kita draw di atas map.

happy coding.

Saturday, May 15, 2010

Google MAP API | MySQL search within Radius

boleh mengunakan sql kod dibawah utk mencari lokasi mengunakan lat & long didalam databse mysql.

SELECT 
 *, 
 ( 
  3963.189  
   * 
  acos( 
   cos( radians($center_lat) ) * 
   cos( radians( field_lat ) ) * 
   cos( 
    radians( field_long ) - radians($center_long) 
   ) + 
   sin( radians($center_lat) ) * 
   sin( radians( field_lat ) ) 
  ) 
 ) AS distance 
FROM 
 table 
HAVING 
 distance < $radius
ORDER BY 
 distance

cuma kod ini agak lambat skit sebab mengunakan HAVING instead of WHERE statement.

kod di atas menggunakan mile/batu. kalau nka pakai Km tukar 3963.189 kepada 6378.8

utk kod utk peta saya akan pos kan kemudian...

happy coding.

Friday, April 23, 2010

Google MAP API | IE issue

Salam...

Lama betul x posting kat sini... byk keje x setel... xsempat nak post.

kebetulan tgh bermain dgn Google MAP API.. tapi menghadapi masalah paparan dgn IE... map x keluar sepenuhnya. ia belarutan apabila kita nak get map bounds utk data manipulation. bounds x diterima secara betul kesan drpada map view yg x betul td.

yg aku nampak, ia memberi kesan terutama kepada IE apabila kita byk gunakan DIV. start dr situ viewer akan jd mengong kalikong...

utk ubah semua html layout or theme adalah sesuatu yg memenatkan.... so cari punya cari... rupanya kita bleh setkan size viewer kita terus ke function berkaitan. x perlu membiarkan JS lib dlm API google itu carikan utk kita .. yg hasilnya mengong skit bergantung kepada browser...

apa yg perlu dibuat

var map = new GMap2(document.getElementById(Elemento), { size:new GSize (200 , 125) } ); 

define viewer size kita terus kat function GMap2. YA.. ini x bermakna ia static terus... kita still bleh manipulate size kita tu.... bergantung kepada keperluan... cuma yg aku nak sampaikan.... solution ni utk counter masalah map keluar separuh kalau kat IE...

happy coding...