Forum | Appery.io

Hi,
I was not sure what have happened.
But the height dimension 300
in the HTML source code changed to 300.
I was able to change it back to 300px (by inspect elements and use HTML Editor).

Not sure how I would be able to change the property in the source in the first place.
But I am glad that I am back on track.

Thanks.

Hi,

The styles must have been cached. This could cause the issue.
Do you need our further help?

I am fine for now.
I am very much appreciated of the team work and response time that I have experienced.

Thank you for the feedback!

Hi,
I am sorry that I encounter another question on infobox...

I could not get infobox to work. The following code is a working sample file from
http://www.geocodezip.com/v3_simpleMa...

I put the proper src in the external resources
https://maps.googleapis.com/maps/api/...
http://google-maps-utility-library-v3...

I delete the HTML portion and leave the Javascript along.

Run the program... Makers are ok. Cannot click to show infobox.

Thank you for your your advice on what other setting I need to do.

//******
var ib = new InfoBox();

function initialize() {

var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(52.204872,0.120163),
mapTypeId: google.maps.MapTypeId.ROADMAP,
// styles: styles,
scrollwheel: false
};
// var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
var map = new google.maps.Map($('div[dsid="googlemap1"]').get(0), mapOptions)
google.maps.event.addListener(map, "click", function() { ib.close() });

setMarkers(map, sites);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}

var sites = [
['The Frontroom', 52.202977,0.138938, 1, ' The Frontroom
23-25 Gwydir Street, Cambridge, CB1 2LG
01223 305 600
Website

'],
['Fitzwilliam Museum',52.199678,0.119931, 2, ' Fitzwilliam Museum
Trumpington St, Cambridge, CB2 1RB
01223 332900
Website

'],
['Wysing Arts centre', 52.182077,-0.06977, 3, ' Wysing Arts Centre
Fox Rd, Cambridge CB23 2TX
01954 718881
Website

'],
['Cambridge School of Art', 52.203825,0.134808, 4, ' Cambridge School of Art
East Rd, Cambridge, CB1 1PT
0845 271 3333
Website

'],
['Kettles yard', 52.210851,0.114637, 5, ' Kettles Yard
Castle St, Cambridge, CB3 0AQ
01223 748100
Website

'],
['Aid & Abet', 52.195218,0.136578, 7, ' Aid & Abet
Station Road, Cambridge, CB1 2JW
Website

'],
['The Junction', 52.190756,0.136522, 8, ' The Junction
Clifton Way, Cambridge, CB1 7GX
01223 511 511
Website

']
];

/* var sites = [
// List all locations for each pin
['The Frontroom', 52.202977,0.138938, 1, ' The Frontroom.
23-25 Gwydir Street, Cambridge, CB1 2LG
01223 305 600

']
];
*/

function createMarker(site, map){
var siteLatLng = new google.maps.LatLng(site[1], site[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: site[0],
zIndex: site[3],
html: site[4] /* ,
icon: "http://visualartscambridge.org/wp-con..." this icon no longer available */
});
// Begin example code to get custom infobox
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = marker.html;

 var myOptions = { 
          content: boxText 
         ,disableAutoPan: false 
         ,maxWidth: 0 
         ,pixelOffset: new google.maps.Size(-140, 0) 
         ,zIndex: null 
         ,boxStyle: {  
           background: "url('[url=http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/tipbox.gif]http://google-maps-utility-library-v3...[/url]') no-repeat" 
           ,opacity: 0.75 
           ,width: "280px" 
          } 
         ,closeBoxMargin: "10px 2px 2px 2px" 
         ,closeBoxURL: "[url=http://www.google.com/intl/en_us/mapfiles/close.gif]http://www.google.com/intl/en_us/mapf...[/url]" 
         ,infoBoxClearance: new google.maps.Size(1, 1) 
         ,isHidden: false 
         ,pane: "floatPane" 
         ,enableEventPropagation: false 
 }; 
 // end example code for custom infobox 

 google.maps.event.addListener(marker, "click", function (e) { 
  ib.close(); 
  ib.setOptions(myOptions); 
  ib.open(map, this); 
 }); 
 return marker; 

}

function setMarkers(map, markers) {

for (var i = 0; i < markers.length; i++) {
createMarker(markers, map);
}
}
initialize();

Hi,

Follow the instructions here: http://docs.appery.io/tutorials/addin...
To add a Label: http://stackoverflow.com/questions/11...

Hi,
Thanks for the quick response.

The new issues that I need some help is for infobox (not the markerwithlabel).
I would like to learn that if google map infobox feature is supported by Appery.

Are there any example that is working under Appery?

Thanks.

Hi,

Yes, infobox can be added in Appery.io. Here is an example, outside the Appery.io:
http://jsfiddle.net/jEhJ3/597/

Add infobox tag to a HTML Panel component.

Hi
I found CSS and HTML files from JSFIDDLE.
I am not sure what is the infobox tag and HTML panel.

1. I do not know where in Appery to create the HTML panel. I would appreciate if you could give me more instructions.

   I tried to cut the javascript out from the HTML and it does not seem to be the right way to do it.

2. I also encouuterred a problem that a market label "specified location" that I do not know where it comes from (I deleted all the marker code and it is still there).

3. I cannot delete the whole project. "the project cannot be deleted"....in red color prompt...

   

Hi,

I start having problem to update javascript. The update effect the builder.
But when save and test the program, it is the old version of program stored in the source- web resources

The whole project configuration seems out of sync...

Your help are greatly appreciated....