infobox


Infobox not working


I'm not a developer and i'm trying to learn javascript step by step. Now, I need to add a simple infobox in the gmaps that I'm working on. The problem is that, I add the code as explained in the google reference but it doesn't work: in the beginning i was using infowindow wich worked well but wasn't so customized. I also put the infobox.js link in that page and it is the last release.
This is test page: http://www.squassabia.com/aree_espositive_prova2.asp
What i need to do is to display the message you see in the code (boxText.innerHTML), just to understand it step by step and to keep things simple. After that I'm going to style it and add data from xml (which I think is not going to be that difficult).
As i didn't fint any solution in any of the old posts, if anyone of you can give me a clue on how to solve the problem, would be very appreciated, I've tried everything and put infobox stuff pretty much everywhere :(
Cheers
I give you the initialize() code:
//icone custom
var customIcons = {
negozio: {icon: '/images/gmaps/mc.png'},
outlet: {icon: '/images/gmaps/pin_fuc_outlet.png'},
sede: {icon: '/images/gmaps/pin_fuc_home.png'}
};
var clusterStyles = [
{
textColor: 'white',
url: '/images/gmaps/mc.png',
height: 48,
width: 48
}];
function initialize() {
//creo una istanza della mappa
var map = new google.maps.Map(document.getElementById("mapp"), {
center: new google.maps.LatLng(45.405, 9.867),
zoom: 9,
mapTypeId: 'roadmap',
saturation: 20, //scrollwheel: false
});
//stile della mappa
var pinkroad = [ //creo un array di proprietà
{
featureType: "all", //seleziono la feature
stylers: [{gamma: 0.8 },{ lightness: 50 },{ saturation: -100}]
},
{
featureType: "road.highway.controlled_access",
stylers: [{ hue: "#FF3366" },{ saturation: 50 },{ lightness: -5 }]
}
];
map.setOptions({styles: pinkroad});
var name;
//Creates content and style
var boxText = document.createElement("div");
boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
boxText.innerHTML = "Prova Infobox<br >Successo!!Test Text";
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, 0)
,zIndex: null
,boxStyle: {background: "url('tipbox.gif') no-repeat", opacity: 0.75, width: "280px"}
,closeBoxMargin: "10px 2px 2px 2px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
//creo il marker
downloadUrl("xml/negozi.xml", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
var type = markers[i].getAttribute("tipo");
var address = markers[i].getElementsByTagName("indirizzo")[0].childNodes[0].nodeValue;
var city = markers[i].getElementsByTagName("citta")[0].childNodes[0].nodeValue;
var phone = markers[i].getElementsByTagName("telefono")[0].childNodes[0].nodeValue;
name = markers[i].getElementsByTagName("nome")[0].childNodes[0].nodeValue;
var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
var html = name + '<br />' + address + '<br />' + city + '<br />' + phone;
var icon = '/images/gmaps/pin_fuc.png';
var marker = new google.maps.Marker({map: map, position: point, icon :'/images/gmaps/pin_fuc.png'});
/*google.maps.event.addListener(marker,"click", function(){
map.panTo(this.position);
});*/
createMarkerButton(marker);
google.maps.event.addListener(marker, "click", function (e) {
ib.open(map);
});
}
});
function createMarkerButton(marker) {
//Creates a sidebar button
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode(name));
ul.appendChild(li);
//Trigger a click event to marker when the button is clicked.
google.maps.event.addDomListener(li, "mouseover", function(){
marker.setAnimation(google.maps.Animation.BOUNCE);
setTimeout (function (){marker.setAnimation(null);}, 750);
});
google.maps.event.addDomListener(li, "mouseout", function(){
google.maps.event.trigger(marker, "mouseout");
});
}
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}

Related Links

Infobox not working

Categories

HOME
hashmap
cvs
sqlite-net-extensions
leon
dxl
jpeg
callback
fingerprint
pheatmap
contact
awesome-wm
windows-10-universal
vault
row
modx-revolution
google-cloud-ml
caml
openedx
karma-jasmine
xlsxwriter
tar
captiveportal
rundeck
su
jspm
libuv
http-status-code-503
.net-4.0
catel
phpfreechat
environment-modules
devextreme
withings
unspecified
hilbert-curve
cookiecutter-django
ws-security
eclipse-scout
ncalc
elmah
google-closure
glew
.net-4.6.2
galleria
typescript1.8
qtwebview
flutterwave
migradoc
parallel-data-warehouse
probability-density
slicknav
database-optimization
firebaseui
contact-list
hill-climbing
goose
uid
libressl
ibaction
dereference
bigbluebutton
jsonpickle
javafx-webengine
wordpress-theme-customize
titanium-modules
gulp-less
websocket4net
sgen
valueconverter
rtmfp
balanced-payments
geos
ftps
easy-install
batterylevel
android-hardware
distutils
funscript
libc++
xtype
self-extracting
recent-documents
ecl
gamequery
dentrix
gin
meego
procedural-music
data-acquisition

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App