In Progress

Google Map InfoBubble

We have created an example of what the end result would look like at [url removed, login to view]

Google has a crude example page here: [url removed, login to view]

Infobubbles are the newest incarnation for displaying a bubble (infoWindow) above the target and displaying pertinent information such as Address, Image etc within that bubble. Usually, there is a 'pointer' that points back to the actual target associated with this bubble.

CompuMatter will be using InfoBubbles on every one of its websites. So it does us no good to create one color or design with hard coded information that would not be of any value at a different website. We need an function cm_infobubble that we can pass the parameters we want our bubble to display.

For instance, we could call cm_infoBubble and pass it a semi-colon ; separated list of variables like this

bubbleVars="bubbleWidth=300px;bubbleHeight=300px;bubbleBgColor=#F8F8F8;tabsBgColor=#999999";

bubbleTabArray=new Array("Location","Picture","Directions");

bubbleContentArray=new Array("1814 Commercial Ave<br>Anacortes,WA 98221<br>360 293 3321","<img src=[url removed, login to view]'>","<form id='directions'>Enter the address where you are coming from<input type='text' name='whereFrom'><br><input type='submit' value='View Directions'>");

cm_infoBubble(bubbleVars,bubbleTabArray,bubbleContentArray);

// inside cm_infoBubble, we can assign each value from above to its named variable like this

function cm_infoBubble(bubbleVars,bubbleTabArray,bubbleContentArray){

bubbleVarsArray=[url removed, login to view](';');

// first we parse the bubbleVars string and convert its key/vals to usable variables

for(i=0;i< [url removed, login to view];i++){

oneProperty=bubbleVarsArray[i].split("=");

// assigns the value on the right to the name on the left

this[oneProperty[0]]=oneProperty[1];

}

// below this you can parse the bubbleTabArray,bubbleContentArray arrays to add the tabs and their content

....

}

the cm_infoBubble function would then return back to the map the bubble specific for this websites needs.

Skills: AJAX, PHP

See more: google maps infobubble, google directions content infobubble, google map infobubble, google maps infobubble example, infobubble example, infobubble examples, google infobubble, infobubble google maps, google infobubble tabs, google maps infobubble form, infobubble, infobubble content, add infobubble map php, infobubble google, google map php infobubble, infobubble directions, form infobubble, submit google maps, string library, split page html, map string, create page google, google directions infobubble, infobubble google map, googlemaps infobubble

About the Employer:
( 56 reviews ) Anacortes, United States

Project ID: #1124772

Awarded to:

bdimuch

Hello, check PMB please.

$30 USD in 0 days
(32 Reviews)
5.5

7 freelancers are bidding on average $146 for this job

halezabux

Hi,Please see PM.Thanks.

$150 USD in 5 days
(42 Reviews)
6.1
surajddk

Hi, Let's start! Check PMB!

$250 USD in 5 days
(27 Reviews)
5.4
maleo

Hi Sir, Ready to work on your project right now. Please check PMB

$50 USD in 1 day
(38 Reviews)
5.1
panpod

Hi we have expert in web-technology.

$200 USD in 2 days
(1 Review)
0.0
brcount

hello i can help you

$200 USD in 5 days
(0 Reviews)
0.0
script13

Please take a look at my PM.

$120 USD in 1 day
(0 Reviews)
0.0
webwingers

Dear Sir, Webwing Software offers a wide range IT Services. We have over 14 programmers, all experts in their various respective programming disciplines plus a team of project and sales managers. Webwing missi More

$140 USD in 2 days
(0 Reviews)
0.0