Colorbox with Google maps

by Giorgos Grispos on June 8, 2011

Hello,

Any time I needed a lightbox effect for my projects I end up with colorbox.

It’s  really easy to install it to your project, stable and not really heavy, supports all normal functionality and follows W3C standards.

So while working on a new project Pallas restaurant which I am going to provide you more information in a later post, I needed a lightbox plugin which allow me to use Google maps within it. The question is how Lightbox and Google maps come together?  Have a look on the script below.

$(document).ready(function () {
  $(".fMap").colorbox({
    html:'<div id="map_canvas_all" style="width:600px; height:450px;"></div>',
    scrolling:false,
    width:"600px",
    height:"470px",
    onComplete:function(){ loadScriptGeneral(); }
  });
});

That is the main load function where “.fMap” is the link to open the Google maps.
My example also has custom images as markers on the map.  As you can see it includes two pngs one for the marker one for the shadow of it. It’s even simpler if you don’t need any custom marker icon.

function loadScriptGeneral() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initializeGeneral";
  document.body.appendChild(script);
};

function initializeGeneral() {
  var imageG = new google.maps.MarkerImage('/media/imgs/google.png',
      new google.maps.Size(20, 26),
      new google.maps.Point(0, 0),
      new google.maps.Point(0, 26)
  );
  var shadowG = new google.maps.MarkerImage('/media/imgs/shadow.png',
      new google.maps.Size(23, 30),
      new google.maps.Point(0, 0),
      new google.maps.Point(0, 30)
  );
  var myLatlngG = new google.maps.LatLng(35.518421,24.018758);
  var myOptionsG = {
      zoom: 16,
      center: myLatlngG,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var mapG = new google.maps.Map(document.getElementById("map_canvas_all"), myOptionsG);

  var markerG = new google.maps.Marker({
      position: myLatlngG,
      map: mapG,
      title: "Παλλάς",
      shadow: shadowG,
      icon: imageG
  });
};

The first piece of script “loadScriptsGeneral” loads the general Google maps script. Once it’s loaded callback the “initializeGeneral” function. At the end you place the Google map object to the “map_canvas_all” div which we created at the biggining of the script above.

It’s a really simple method to add you google maps to your site within a lightbox effect. I hope it helps some of you and please post any additions or recommendations.

15 comments

Yes that’s right, it works fine like this. Thank you colorbox and Giorgos! have a look at http://www.pallaschania.gr to see it in action

by John on 11/09/2011 at 12:13. Reply #

one year later……

I got this warning from firebug:

Warning: you have included the Google Maps API multiple times on this page. This may cause unexpected errors.

main.js

by ArthasMX on 24/08/2012 at 22:20. Reply #

I did the following and worked great:
Please note {entry_id} is an expressionengine tag, I have it there so I can have multiple google maps on one page.

Not that I am including the Google Map JS separately not like in the example.

$(document).ready(function () {
$(“#google_map{entry_id}”).colorbox({
html:”,
scrolling:false,
width:550,
//height:”470px”,
onComplete:function(){ loadScriptGeneral{entry_id}(); }
});
});

function loadScriptGeneral{entry_id}() {
var myLatlng = new google.maps.LatLng(‘{google_latitude}’,'{google_longitude}’);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById(“map_canvas{entry_id}”), myOptions);

var contentString = ”+
”+
”+
‘{title}’+
”+
‘{street_address}, {suburb}, {state} {postcode}’+
Phone: {phone_number}‘+
”+
”;

var infowindow = new google.maps.InfoWindow({
content: contentString
});

var marker = new google.maps.Marker({
position: myLatlng,
animation: google.maps.Animation.DROP,
map: map,
title:”{title}”
});

google.maps.event.addListener(marker, ‘click’, function() {
infowindow.open(map,marker);
});
};

by Trent on 02/09/2012 at 10:23. Reply #

That’s a great idea Trent, entry_id is a useful tip for those who need multiple instances in one page.
Thanks for sharing your thoughts! Giorgos

by giroin on 07/09/2012 at 13:22. Reply #

A fair bit of code got stripped out of the above.
Txt file here – http://www.kubikdesign.com.au/googlemap-color-box.txt

by Trent on 02/09/2012 at 10:26. Reply #

Thanks, I was able to adapt your sample to my needs ;)

by Citronas on 26/12/2012 at 18:57. Reply #

I am getting this error on Firebug Console.. not sure what’s wrong.

TypeError: window.initializeGeneral is not a function

by Adrian on 20/03/2013 at 03:03. Reply #

Hi Adrian, is there any test URL to have a look?

by gio on 20/03/2013 at 11:47. Reply #

It works perfectly, thank you very much !!!

by Wakonda on 19/09/2013 at 10:05. Reply #

Thank you Wakonda, nice to hear that!

by gio on 21/09/2013 at 17:00. Reply #

Is there any way to do this just with the embed url that’s provided by google maps when you click on the “Link” icon on the left side and then copy and paste the iframe embed code?
I’d like to be able to do this a bit more simply without needing to get a google maps API code.

by Mike on 19/10/2013 at 06:49. Reply #

Hello Mike,

The fast way I can think is to have a hidden div somewhere inside your html you can use just display:none css. Within that div drop the iframe code you want and then just use any click function to display the colorbox which will use the HTML of the hidden div as data. Hope it’s close of what you need. Thanks Giorgos

by Giorgos Grispos on 26/10/2013 at 14:16. Reply #

hye gio. . i tried to combine some of yours with mine in other to display such like that. .but it couldn’t work. could you please check my code ?

p/s : i dont use database to generate the location output.

Simple markers

html, body, #map-canvas
{
height: 90%;
margin: 15px;
padding: 15px;
width: 800px;
}
.content{
min-width:100px;
min-Height:100px;
}

function loadScriptGeneral()
{
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “http://maps.google.com/maps/api/js?sensor=false&callback=initializeGeneral”;
document.body.appendChild(script);
};
$(document).ready(function ()
{
$(“.fMap”).colorbox({
html:”,
scrolling:false,
width:”600px”,
height:”470px”,
onComplete:function(){ loadScriptGeneral(); }
});
});

function initialize(nama)
{
//Paramater call from unchange method
var thisVal = document.getElementById(nama).value;

//declare 2 array untuk setiap negeri
if (thisVal == 1)//Johor
{
var latitude = [1.45687,1.59910,1.49802,1.45842,1.49290,1.64304,1.60864,2.06093,2.02879,1.86416];
var longitude = [103.76629,103.82074,103.74860,103.76479,103.87478,103.61749,103.64517,102.58575,103.31538,103.10802];
var myLatlng = new google.maps.LatLng(1.45687,103.76629);
var location = ["Kaunter Zakat Johor Bahru,RA Premier ConsultancyNo.58 & 60, Jalan Tun Abdul Razak,80000 Johor Bahru,JohorTel:07 - 222 3333 / 017-7653840",
"Kaunter Zakat Ulu Tiram,Haryati & AssociatesNo. 11b, Jalan Raya,Taman Tiram Baru,81800 Ulu Tiram,JohorTel: 07 - 861 8458Fax: 07-8632155",
"Kaunter Zakat Larkin,Mdz & Co 11-02, Jln Dato' Jaafar180350 Larkin, Johor Bahru,JohorTel: 07 - 222 2700",
"Kaunter Zakat Jalan Segget,Koperasi Permodalan Melayu Negeri JohorNo50-B, Tingkat 5,Bangunan Kpmnj,Jln Segget,80000 Johor Bahru,Johor",
"Kaunter Zakat Masai,Prima Tax Management Consultant46 - A, Jalan Ara 1,Taman Rinting,81750 Masai, JohorTel: 07 - 252 9542 / 07 - 251 9848Fax: 07 - 2519848",
"Kaunter Zakat Kulai,AMC Management & ServicesA,Tingkat 1,Jalan Kenanga 29/9,Taman Indahpura,81000 Kulai,JohorTel: 07 - 662 1201/ 016 - 695 3147 / 012 - 799 3277Fax: 07 - 663 1800 / 07 - 755 4097",
"Kaunter Zakat Senai,Perunding Aeli1419 - A, Jalan Senai Utama 1/8,Taman Senai Utama,81400 Senai,JohorTel: 07 - 598 1105 / 07 - 599 8416Fax: 07 - 5998416",
"Kaunter Zakat Muar,Khairul & Norbil Business ServicesNo. 1, Lorong Kurau 2,Taman Sungai Abong,84000 Muar,JohorTel: 017 - 680 6054Fax: 06 - 9539507",
"Kaunter Zakat Kluang,Koperasi Perunding Takaful Ikhlas Johor BerhadNo. 3, Tingkat Bawah,Jalan Langsat,Peti Surat 14286000 Kluang JohorTel:07 - 771 9788Fax:07 - 774 4788",
"Kaunter Zakat Parit Raja,N.A.S Management ServicesNo.8a, Jln Raja 1Taman Sri Raja86400 Parit RajaBatu Pahat,JohorTel: 019 - 773 3004"
];
}
else if (thisVal == 2)//Melaka
{
var latitude = [2.22167,2.14479,2.30476,2.22143,2.35039,2.38726,2.51075];
var longitude = [102.27556,102.42248,102.42577,102.24894,102.10779,102.21546,102.26624];
var myLatlng = new google.maps.LatLng(2.22167,102.27556);
var location = ["Pusat Zakat Melaka,No.1 & 3,Jalan KPPAA 1,Kompleks Perniagaan Al-Azim,Bukit Baru,75150 MelakaTel:06-2812441/06 - 2812442Fax:06 - 2818154",
"Kaunter Zakat Cawangan Merlimau,Jb 2869 ,Jln Debunga 1,Taman Debunga 1,73000 Merlimau,MelakaTel:06-2633148",
"Kaunter Zakat Cawangan Jasin,Kompleks Pejabat Agama Islam & Mahkamah Syariah Daerah Jasin,77000 Jasin, MelakaTel:06 - 5294635",
"Kaunter Zakat Cawangan Melaka Sentral,No. 40d, Melaka Sentral,Jalan Tun Razak,75450 MelakaTel:06 - 5294635",
"Kaunter Zakat Cawangan Masjid Tanah,Tingkat Bawah,Bangunan Tabung Haji,78300 Masjid Tanah,MelakaTel:06 - 3845453",
"Kaunter Zakat Cawangan Alor Gajah,Kompleks Pejabat Agama Islam & Mahkamah Syariah Daerah Alor Gajah,Taman Seri Bayu,78000 Alor Gajah,MelakaTel:06 - 5562340",
"Kaunter Zakat Cawangan Pulau Sebang,Masjid Al-Aleyah Kuala Ina,Pulau Sebang,73000 Alor Gajah,MelakaTel:06 - 5562340"
];
}
else if (thisVal == 3)//N9
{
var latitude = [2.72495,2.68719,2.53642,2.74896,2.59598,2.94715,2.81331,2.70270,2.80458,2.46535,2.57778];
var longitude = [101.95427,101.91765,101.80681,102.25021,102.09110,102.08545,101.79393,101.99133,102.38760,102.23158,102.59579];
var myLatlng = new google.maps.LatLng(2.72495,101.95427);
var location = ["Pusat Zakat Negeri Sembilan,No. 25,Betaria Business Centre,Jalan Durian Emas 4,Off Jalan Dato' Siamang Gagap,70100 Seremban,Negeri SembilanTel: 06 - 765 1402Fax: 06 - 765 1407",
"Kaunter Zakat Cawangan Seremban 2,No. 7 (Tingkat Bawah),Jalan S2 D38,City Centre,Seremban 2,70300 Seremban, Negeri SembilanTel: 06 - 601 7155Fax: 06 - 601 7181",
"Kaunter Zakat Cawangan Port Dickson,No. 56,Tingkat Bawah,Jalan Mahajaya,PD Centre Point,71000 Port Dickson, Negeri SembilanTel: 06 - 647 7420Fax: 06 - 646 3207",
"Kaunter Zakat Cawangan Kuala Pilah,No. 3, Tingkat Bawah,Jalan Angkasa Jaya,Taman Bukit Pilah Perdana,72000 Kuala Pilah, Negeri SembilanTel: 06 - 484 1240Fax: 06 - 484 3352",
"Kaunter Zakat Cawangan Rembau,No. 9, Sudut Korporat,Jalan Dato' Undang,71300 Rembau, Negeri SembilanTel: 06 - 685 4309Fax: 06 - 685 8342",
"Kaunter Zakat Cawangan Jelebu,No. 203, Jalan Syed Ali,Pekan Kuala Klawang,Jalan Simpang Pertang,71600 Kuala Klawang, Negeri SembilanTel: 06-613 9482Fax:06-613 6211",
"Kaunter Zakat Cawangan Nilai,PT 7442(G), Jalan BBN 1/2F,Putra Point Putra Nilai,71800 Nilai, Negeri SembilanTel: 06 - 799 6900Fax: 06 - 799 1705",
"Kaunter Zakat Cawangan Senawang,No. 549-G, Jalan Bandar Senawang 16,Pusat Bandar Senawang,70450 Seremban, Negeri SembilanTel: 06 - 6773780Fax: 06 - 6773748",
"Kaunter Zakat Cawangan Jempol,No. 1, Jalan Dato' Mustafa,72100 Bahau, Negeri SembilanTel: 06 - 454 1928Fax: 06 - 454 0629",
"Kaunter Zakat Cawangan Tampin,PT 757-G,Jalan Pasar Tampin73000 Tampin, Negeri SembilanTel: 06 - 443 2653Fax:06-441 4128",
"Kaunter Zakat Cawangan Gemas,PT. 4615 Tingkat 2,Bangunan Tabung Haji,Bandar Baru Gemas,73400 Gemas, Negeri SembilanTel: 07 - 948 5091Fax: 07 - 948 3833"
];
}
else if (thisVal == 4)//Selangor
{
var latitude = [3.10601,3.11132,3.22375,3.25694,2.99229,2.81128,2.80998,3.14501,3.33061];
var longitude = [101.44246,101.63397,101.55724,101.65744,101.78977,101.50096,101.73401,101.76941,101.25480];
var myLatlng = new google.maps.LatLng(3.10601,101.44246);
var location = ["Kaunter Zakat Cawangan Klang,Aras3, Kompleks MAIS,Persimpangan Jalan Meru/Kapar,41050 Klang,SelangorTel: 03 - 3345 3838Fax:03 - 3343 5908",
"Kaunter Zakat Cawangan Petaling Jaya,No.12,The RightAngle,Jalan 14/22,46100 Petaling Jaya,SelangorTel:03 - 7958 3681Fax:03 - 7956 1870",
"Kaunter Zakat Cawangan Sungai Buluh,No.4, (G & LG),Jalan BRP1/2,Bukit Rahman Putra,47000 Sungai Buluh,SelangorTel: 03 - 6156 7422Fax: 03 - 6141 1306",
"Kaunter Zakat Cawangan Selayang,No. 17, Jalan 2/16,DataranTempler,Bandar Baru Selayang,68100 Batu Caves,SelangorTel: 03 - 6137 0215Fax:03-6137 4736",
"Kaunter Zakat Cawangan Kajang,No.13, Jalan Raja Haron,43000 Kajang,SelangorTel:03 - 8736 4187Fax:03 - 8736 1488",
"Kaunter Zakat Cawangan Kuala Langat,No. 142A, Tingkat 1,Jalan Bunga Pekan,42700 Banting,SelangorTel:03 - 3180 4350Fax:03 - 3187 7130",
"Kaunter Zakat Cawangan Sepang,Pejabat Agama Islam Sepang,Bandar Baru Salak Tinggi,43900 Sepang,SelangorTel:03 - 8706 3527 / 6918Fax: 03-8706 2961",
"Kaunter Zakat Cawangan Bandar Baru Ampang,No.17G,Jalan Wawasan 2/2,Bandar Baru Ampang,68000 Ampang,SelangorTel: 03 - 4297 4635Fax: 03 - 4297 6014",
"Kaunter Zakat Cawangan Kuala Selangor, No.4, Jalan Melati 3/19,Bandar Malawati,45000 Kuala Selangor,Selangor Tel:03-3289 7202Fax: 03-3281 3870"
];
}
else if (thisVal == 5)//Perak
{
var latitude = [4.60449,5.04768,4.01241,5.10537,4.47374,4.86069,3.83486,4.20399,4.31157,4.77270,5.68742,4.20625];
var longitude = [101.07795,100.63607,101.01801,100.48539,101.04101,100.74195,101.40178,101.26097,101.15251,100.94031,100.98833,100.91405];
var myLatlng = new google.maps.LatLng(4.60449,101.07795);
var location = ["Pusat Zakat Perak,Majlis Agama Islam dan Adat Melayu PerakTingkat 1, Kompleks Islam Darul Ridzuan,Jalan Panglima Bukit Gantang Wahab,3000 Ipoh,PerakTel:05 - 208400Fax: 05 - 541 4257",
"Kaunter Zakat Cawangan Bagan Serai,Pejabat Pentadbiran Daerah Bagan Serai,Jalan Matang Buluh,34300 Bagan Serai,PerakTel: 05 - 721 2926Fax: 05 - 721 9862",
"Kaunter Zakat Cawangan Teluk Intan,Pejabat Pentadbiran Agama Islam Daerah Teluk Intan,Kompleks Tadbiran Agama Islam,Jalan Raja Muda Musa,36000 Teluk Intan, PerakTel:05 - 621 6194Fax: 05 - 621 2263",
"Kaunter Zakat Cawangan Parit Buntar,Pejabat Pentadbiran Agama Islam Daerah Parit Buntar, JKR 1540N, Jalan Persiaran Permai,Taman Kerian Permai, 34200 Parit Buntar, PerakTel:05 - 716 7060Fax: 05 - 716 2141",
"Kaunter Zakat Cawangan Batu Gajah,Pejabat Pentadbiran Agama Islam Daerah Batu Gajah, No 5a, Lorong Dewangsa 2,31000 Batu Gajah PerakTel:05 - 365 1290Fax: 05 - 365 3504",
"Kaunter Zakat Cawangan Taiping,Pejabat Pentadbiran Agama Islam Daerah Taiping,Jalan Muzium,34000 PerakTel:05 - 806 6564Fax: 05 - 806 6564",
"Kaunter Zakat Cawangan Slim River,Pejabat Pentadbiran Agama Islam Daerah Slim River,Jalan Rumah Rehat,35800 Slim River , PerakTel:05 - 452 0653Fax: 05 - 452 6221",
"Kaunter Zakat Cawangan Tapah,Pejabat Pentadbiran Agama Islam Daerah Tapah,Kompleks Tadbiran Agama Islam,Jalan Raja,35000 Tapah, PerakTel:05 - 401 4858Fax: 05 - 401 0490",
"Kaunter Zakat Cawangan Kampar,Majlis Agama Islam Dan Adat Melayu Perak,Pejabat Pentadbiran Daerah Kampar,No 105, Jalan Idris,31900 Kampar, PerakTel:05 - 465 1143Fax: 05 - 465 1151",
"Kaunter Zakat Cawangan Kuala Kangsar,Pejabat Pentadbiran Agama Islam Daerah Kuala Kangsar, Jalan Raja Chulan, Persiaran Permai,33000 Kuala Kangsar, PerakTel:05 -776 8371 Fax: 05 - 777 3400",
"Kaunter Zakat Cawangan Pengkalan Hulu,Majlis Agama Islam Dan Adat Melayu Perak,Pejabat Pentadbiran Daerah Pengkalan Hulu,Jalan Tasek,33100 Pengkalan Hulu, PerakTel:05 - 477 8077Fax: 05 - 477 8917",
"Kaunter Zakat Cawangan Kampong Gajah,Majlis Agama Islam Dan Adat Melayu Perak, Pejabat Pentadbiran Daerah Kampong Gajah,Tingkat 2 , Kompleks Pentadbiran Daerah Kampong Gajah,Jalan Tanjung Tualang,36800 Kampong Gajah, PerakTel: 05 - 631 2208Fax: 05 - 631 3078",
];
}
else if (thisVal == 6)//Penang
{
var latitude = [5.36754,5.32334,5.52102,5.41690,5.19492,5.40177,5.37722];
var longitude = [100.43785,100.27914,100.43682,100.33602,100.49690,100.36714,100.21439];
var myLatlng = new google.maps.LatLng(5.36754,100.43785);
var location = ["Pusat Zakat Pulau Pinang,No 4,Jalan Perda Selatan,Bandar Perda,Seberang Perai Tengah,14000 Bukit Mertajam,Pulau PinangTel: 04 - 549 8088Fax: 04-530 6466",
"Kaunter Zakat Cawangan Bayan Baru,No.81, G/F Persiaran Mahsuri,1/3 Sunway Tunas,11900 Bayan Lepas, Pulau PinangTel: 04 - 646 9980 Fax: 04 - 646 9981",
"Kaunter Zakat Cawangan Kepala Batas,No.1204, Wisma Abdullah Fahim,Seberang Perai Utara13200 Kepala Batas,Pulau PinangTel: 04 - 578 3300",
"Kaunter Zakat Cawangan Lebuh Buckingham,No 34, Lebuh Buckingham,10200 Georgetown,Pulau PinangTel: 04 - 250 1000Fax: 04 - 250 1001",
"Kaunter Zakat Cawangan Nibong Tebal,No. 40,Jalan Jawi Jaya 1,Taman Jawi Jaya,Seberang Perai Selatan14300 Nibong Tebal,Pulau PinangTel: 04 - 583 3088",
"Kaunter Zakat Cawangan Butterworth,No. 65,Jalan Selat,Taman Selat12000 Butterworth,Pulau PinangTel: 04 - 331 3686 Fax: 04 - 332 1272",
"Kaunter Zakat Cawangan Balik Pulau,Masjid Daerah Barat Daya,(Bilik Kaunseling, Pejabat Pentadbiran Masjid)11000 Balik Pulau,Pulau Pinang"
];
}
else if (thisVal == 7)//Kedah
{
var latitude = [6.13112];
var longitude = [100.37786];
var myLatlng = new google.maps.LatLng(6.13112,100.37786);
var location = ["Pusat Zakat Kedah,Aras 3-5,Menara Zakat,Jalan Teluk Wanjah,05200 Alor Setar,KedahTel: 04 - 733 1740 Fax: 04 - 731 6280 "];
}
else if (thisVal == 8)//Perlis
{
var latitude= [6.43330];
var longitude = [100.18709];
var myLatlng = new google.maps.LatLng(6.43330,100.18709);
var location = ["Pusat Zakat Perlis,A2,Taman Pengkalan Asam,Jalan Kangar - Alor Setar01000 Kangar,PerlisTel: 04 - 979 4439 (Bangunan Baru) / 04-9794438 ( Bangunan Lama)Fax: 04 - 978 2400"];
}
else if (thisVal == 9)//Pahang
{
var latitude = [3.80506,3.80506,3.45316,3.79384,3.50072,2.79773,3.08746,3.76822,3.94684,3.52367,4.18721];
var longitude = [103.32650,103.32650,102.42449,101.85696,103.39012,103.48534,103.05861,102.54622,102.37988,101.90766,102.05474];
var myLatlng = new google.maps.LatLng(3.80506,103.32650);
var location = ["Pusat Zakat Pahang,No.111A, Tingkat 1Bangunan MUIP,Jalan Mahkota25000 Kuantan,PahangTel: 09 - 513 1515 / 09-513 1616 / 09-517 1985Fax: 09 - 515 2541",
"Kaunter Zakat Cawangan Kuantan,Lot 123, Tingkat BawahBangunan MUIP,Jalan Mahkota25000 Kuantan,PahangTel: 09 - 516 2525Fax: 09-5162626",
"Kaunter Zakat Cawangan Temerloh,No 52, Tingkat BawahJalan Ibrahim28000 Temerloh,PahangTel: 09 - 296 6616Fax: 09 - 296 7616",
"Kaunter Zakat Cawangan Raub,Perkarangan Masjid Tengku Abu BakarJalan Padang27600 Raub,PahangTel: 09 - 355 0515 Fax: 09 - 356 1516",
"Kaunter Zakat Cawangan Pekan,No 3, Tingkat BawahPusat Komersil PekanJalan Sultan Abu Bakar26600 Pekan,PahangTel:09 - 422 1515Fax: 09 - 422 1515",
"Kaunter Zakat Cawangan Rompin,A-3, Tingkat 1Arked Mara26800 Kuala Rompin,PahangTel: 09 - 414 7517Fax: 09 - 414 7517",
"Kaunter Zakat Cawangan Muadzam Shah,Bangunan Pulatis26700 Muadzam Shah,PahangTel: 09 - 452 2515Fax: 09 - 452 2515",
"Kaunter Zakat Cawangan Jengka,No 24, Lorong Jed 126400 Bandar Jengka,PahangTel: 09 - 467 5616Fax: 09 - 467 5616",
"Kaunter Zakat Cawangan Jerantut,No 8, Wisma Yayasan PahangJalan Dulang 1Bandar Baru27000 Jerantut,PahangTel: 09 - 266 9916Fax:09 - 266 9916",
"Kaunter Zakat Cawangan Bentong,Perkarangan Masjid LamaBandar Baru BentongJalan Ah Peng28700 Bentong,PahangTel: 09 - 223 1626Fax:09 - 223 1626",
"Kaunter Zakat Cawangan Lipis,No 3, Gerai MUIPLot 1, Seksyen 7,27200 Kuala Lipis,Pahang Tel: 09 - 312 1216Fax:09 - 312 1216",
];
}
else if (thisVal == 10)//Terengganu
{
var latitude = [5.31159,5.73544];
var longitude = [103.13395,102.49400];
var myLatlng = new google.maps.LatLng(5.31159,103.13395);
var location = ["Pusat Zakat Terengganu,Tingkat Bawah,Pusat Pentadbiran Islam Negeri,Kompleks Seri Iman, Jalan Sultan Mohamad,20519 Kuala Terengganu,TerengganuTel: 09 - 630 3030 Samb. 3021Fax: 09 - 624 7917",
"Kaunter Zakat Cawangan Besut,Lot 374, Tingkat Bawah, Bangunan PMINT,Jalan Bukit Mok Mek,22000 Jerteh, Besut, TerengganuTel: 09 - 697 5323 Fax: 09 - 690 3237"
];
}
else if (thisVal == 11)//Kelantan
{
var latitude = [5.76105,5.83286,6.04585,5.80743,6.19726,4.86005,6.07794,5.69902];
var longitude = [102.21925,102.40528,102.14469,102.15102,102.17212,101.96336,102.38648,101.84641];
var myLatlng = new google.maps.LatLng(5.76105,102.21925);
var location = ["Pusat Zakat Kelantan,Masjid Sultan Yahya Petra, Machang18500 Machang,KelantanTel: 09 - 975 4150",
"Kaunter Zakat Cawangan Pasir Puteh,Masjid Bandar Ibrahimi,Pasir Puteh16800 Pasir Puteh, KelantanTel: 09 - 786 2796",
"Kaunter Zakat Cawangan Pasir Mas,Masjid Bandar Pasir Mas, Pasir Mas17000 Pasir Mas, KelantanTel: 09 - 790 6749",
"Kaunter Zakat Cawangan Tanah Merah,Masjid Ismail Petra, Tanah Merah17500 Tanah Merah,KelantanTel: 09 - 955 7535",
"Kaunter Zakat Cawangan Tumpat,Masjid Ismaili, Tumpat16200 Tumpat,KelantanTel: 09 - 725 4317",
"Kaunter Zakat Cawangan Gua Musang,Masjid Muhammad Faiz Petra, Gua Musang18300 Gua Musang, KelantanTel: 09 - 975 4150",
"Kaunter Zakat Cawangan Bachok,Masjid Mahmudi,Bachok,Perupok,16300 Bachok, KelantanTel: 09 - 778 3260Fax: 09 - 778 3260",
"Kaunter Zakat Cawangan Jeli,Masjid Bandar Jeli,17600 Jeli,Kelantan"
];
}
else if (thisVal == 12)//Sarawak
{
var latitude = [1.53098];
var longitude = [110.34422];
var myLatlng = new google.maps.LatLng(1.53098,110.34422);
var location = ["Pusat Zakat Sarawak,Lot 71, Seksyen 8,KTLD,Jalan Haji Muhamad Kassim,93400 Kuching, SarawakTel: 082 - 415563Fax: 082 - 253786"];
}
else if (thisVal == 13)//Sabah
{
var latitude = [5.97647,4.36094,5.87758];
var longitude = [116.11578,117.97176,118.05393];
var myLatlng = new google.maps.LatLng(5.97647,116.11578);
var location = ["Pusat Zakat Sabah,Tingkat 1, Blok A, Wisma MUIS, Peti Surat 11666,88818 Kota Kinabalu,SabahTel: 088 - 240160 Fax: 088 - 260246 ",
"Kaunter Zakat Cawangan Tawau,Tingkat 1, TB 4441,Blok E, Sabindo Square,91000 Tawau,SabahTel: 089 - 777 027Fax:089 - 776 028",
"Kaunter Zakat Cawangan Sandakan,Tingkat 1,Bangunan Urusetia,Batu 7, Jalan Labuk, W.D.T 167,90500 Sandakan,SabahTel: 089 - 675 067Fax:089 - 660 149",
];
}

var mapOptions =
{
zoom: 9,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
zoomControlOptions:
{ position: google.maps.ControlPosition.LEFT_BOTTOM}
}

//setkn map tu view kat area maner..(view sahaja blom kuarkn marker lg..)
var map = new google.maps.Map(document.getElementById(‘map-canvas’), mapOptions);

var iconURL = ‘http://maps.google.com/mapfiles/ms/icons/’;
var icons = [iconURL + 'red-dot.png',
iconURL + 'green-dot.png',
iconURL + 'blue-dot.png',
iconURL + 'orange-dot.png',
iconURL + 'purple-dot.png',
iconURL + 'pink-dot.png',
iconURL + 'yellow-dot.png'];
var icons_length = icons.length;

var infowindow = new google.maps.InfoWindow({ minWidth: 160 }); //declare the size window pop up
var markers = new Array();
var iconCounter = 0;

//looping and set coordinate
for(i=0;i<latitude.length;i++)
{
var marker = new google.maps.Marker ///cari feature marker
({
position : new google.maps.LatLng(latitude[i],longitude[i]),
map: map,
animation: google.maps.Animation.DROP,
draggable:true,
icon : icons[iconCounter]
});

markers.push(marker);
google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
return function() {
infowindow.setContent("”+location[i]+”");
infowindow.open(map, marker);
}
})(marker, i));

iconCounter++;
if (iconCounter >= icons_length)
{
iconCounter = 0;
}
}

AutoCenter();
}
function AutoCenter() {
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds();
// Go through each…
$.each(markers, function (index, marker)
{
bounds.extend(marker.position);
});
// Fit these bounds to the map
map.fitBounds(bounds);
}
function toggleBounce()
{
if (marker.getAnimation() != null)
{ marker.setAnimation(null);}
else
{ marker.setAnimation(google.maps.Animation.BOUNCE);}
}

Pilih Negeri
Sila Pilih
Johor
Melaka
Negeri Sembilan
Selangor
Perak
Pulau Pinang
Kedah
Perlis
Pahang
Terengganu
Kelantan
Sarawak
Sabah

by adah on 30/10/2013 at 15:32. Reply #

Is there a way to use the url that is attached to the link for the fmap class instead of using the myLatingG variable? I have multiple maps that I want colorbox to use it would be easier to just use the url. Any suggestions?

by Stephen on 26/11/2013 at 22:23. Reply #

Hi Stephen, could you give some more information on what you want to acheive. Multiple colorbox items with different Google maps on the same page is not a problem. Is this what you need to have? Best, Giorgos!

by Giorgos Grispos on 27/11/2013 at 10:08. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.