K. C. Lee
Posts: 0
Joined: Fri Oct 11, 2013 7:51 pm

How to configure MarkerWithLabel CSS and Javascript header

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.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

How to configure MarkerWithLabel CSS and Javascript header

Hi,

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

K. C. Lee
Posts: 0
Joined: Fri Oct 11, 2013 7:51 pm

How to configure MarkerWithLabel CSS and Javascript header

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

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

How to configure MarkerWithLabel CSS and Javascript header

Thank you for the feedback!

K. C. Lee
Posts: 0
Joined: Fri Oct 11, 2013 7:51 pm

How to configure MarkerWithLabel CSS and Javascript header

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;

Code: Select all

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

K. C. Lee
Posts: 0
Joined: Fri Oct 11, 2013 7:51 pm

How to configure MarkerWithLabel CSS and Javascript header

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.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

How to configure MarkerWithLabel CSS and Javascript header

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.

K. C. Lee
Posts: 0
Joined: Fri Oct 11, 2013 7:51 pm

How to configure MarkerWithLabel CSS and Javascript header

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...

    Image

K. C. Lee
Posts: 0
Joined: Fri Oct 11, 2013 7:51 pm

How to configure MarkerWithLabel CSS and Javascript header

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....

Return to “Issues”