I am a beginner programmer. Please help me with this.
I have successfully pull data from XML file and initialize() google
map with all marker and infowindow popup correctly. My client want to
customize the look of infowindow bubble. I realized that I need to use
extinfowindow instead of regular infowindow to get control of style
infowindow bubble.
I know there is a way to make this work by switching local var to
global var, but my limited program ability drive me crazy to make this
work. The below is my working codes by using infowinow method, can
someone please help me or giving me a clue how to make it work with
extinfowindow please ?? Thanks
//<![CDATA[
// this variable will collect the html which will eventually be
placed in the side_bar
var side_bar_html = "";
var gmarkers = [];
var gicons = [];
var map = null;
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 50),
maxWidth: 300
});
gicons["red"] = new google.maps.MarkerImage("http://www.solo-
mosaic.com/wp-content/themes/SoLoMosaic/images/marker_Core.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(80, 55),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is at 9,34.
new google.maps.Point(40, 55));
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('http://www.solo-
mosaic.com/wp-content/themes/SoLoMosaic/images/logoMAP.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(100, 100),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is at 9,34.
new google.maps.Point(50, 100));
var iconShadow = new google.maps.MarkerImage('http://www.solo-
mosaic.com/wp-content/themes/SoLoMosaic/images/logoMAP_shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main
image.
new google.maps.Size(130, 50), new google.maps.Point(0, 0), new
google.maps.Point(65, 50));
// Shapes define the clickable region of the icon.
// The type defines an HTML <area> element 'poly' which
// traces out a polygon as a series of X,Y points. The final
// coordinate closes the poly by connecting to the first
// coordinate.
var iconShape = {
coord: [9, 0, 6, 1, 4, 2, 2, 4, 0, 8, 0, 12, 1, 14, 2, 16, 5,
19, 7, 23, 8, 26, 9, 30, 9, 34, 11, 34, 11, 30, 12, 26, 13, 24, 14,
21, 16, 18, 18, 16, 20, 12, 20, 8, 18, 4, 16, 2, 15, 1, 13, 0],
type: 'poly'
};
function getMarkerImage(iconColor) {
if ((typeof (iconColor) == "undefined") || (iconColor == null)
|| (iconColor == "Core")) {
iconColor = "red";
}
if (!gicons[iconColor]) {
gicons[iconColor] = new google.maps.MarkerImage("http://
www.solo-mosaic.com/wp-content/themes/SoLoMosaic/images/marker_" +
iconColor + ".png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(50, 50),
// The origin for this image is 0,0.
new google.maps.Point(0, 0),
// The anchor for this image is at 6,20.
new google.maps.Point(25, 50));
}
return gicons[iconColor];
}
function category2color(category) {
var color = "red";
switch (category) {
case "Schools":
color = "Schools";
break;
case "Shopping":
color = "Shopping";
break;
case "Restaurants":
color = "Restaurants";
break;
case "Transportation":
color = "Transportation";
break;
case "Trails":
color = "Trails";
break;
case "Amenities":
color = "Amenities";
break;
case "Core":
color = "Core";
break;
default:
color = "red";
break;
}
return color;
}
gicons["Schools"] = getMarkerImage(category2color("Schools"));
gicons["Shopping"] = getMarkerImage(category2color("Shopping"));
gicons["Restaurants"] =
getMarkerImage(category2color("Restaurants"));
gicons["Trails"] = getMarkerImage(category2color("Trails"));
gicons["Transportation"] =
getMarkerImage(category2color("Transportation"));
gicons["Amenities"] = getMarkerImage(category2color("Amenities"));
gicons["Core"] = getMarkerImage(category2color("Core"));
// A function to create the marker and set up the event window
function getzzjIndex(latlng, category) {
var zzjIndex = 0;
switch (category) {
case "Core":
zzjIndex = 500;
break;
default:
zzjIndex = Math.round(latlng.lat() * -100000) << 5;
break;
}
return zzjIndex;
}
function createMarker(latlng, name, html, category) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: gicons[category],
shadow: iconShadow,
map: map,
title: name,
animation: google.maps.Animation.DROP,
zIndex: getzzjIndex(latlng, category) /* zIndex:
Math.round(latlng.lat()*-100000)<<5*/
/*Previous way to get zIndex*/
});
// === Store the category and name info as a marker properties
===
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(contentString);
infowindow.open(map, marker);
});
}
// == shows all markers of a particular category, and ensures the
checkbox is checked ==
function show(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category + "box").checked = true;
}
// == hides all markers of a particular category, and ensures the
checkbox is cleared ==
function hide(category) {
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category + "box").checked = false;
// == close the info window, in case its open on a marker that
we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box, category) {
if (category == "All") {
if (box.checked) {
show("Schools");
show("Shopping");
show("Restaurants");
show("Transportation");
show("Trails");
show("Amenities");
} else {
hide("Schools");
hide("Shopping");
hide("Restaurants");
hide("Transportation");
hide("Trails");
hide("Amenities");
}
} else {
if (box.checked) {
show(category);
} else {
hide(category);
}
}
// == rebuild the side bar
// makeSidebar();
}
function myclick(i) {
gmarkers[i].setVisible(true);
google.maps.event.trigger(gmarkers[i], "click");
}
// == rebuilds the sidebar to match the markers currently
displayed ==
// function makeSidebar() {
// var html = "";
// for (var i=0; i<gmarkers.length; i++) {
// if (gmarkers[i].getVisible()) {
// html += '<a href="javascript:myclick(' + i + ')">' +
gmarkers[i].myname + '<\/a><br>';
// }
// }
// document.getElementById("side_bar").innerHTML = html;
// }
function makeSidebar() {
var html = "";
var AvailableCategoryLists = ['Shopping', 'Amenities',
'Restaurants', 'Schools', 'Trails', 'Transportation'];
var getCurrentCategory = "blank";
for (var j = 0; j < AvailableCategoryLists.length; j++) {
html += '<div class="zzjMapCategoryBox" id=' +
AvailableCategoryLists[j] + '><ul>';
for (var i = 0; i < gmarkers.length; i++) {
if (gmarkers[i].mycategory ==
AvailableCategoryLists[j])
{
html += '<li><a href="javascript:myclick(' + i +
')">' + gmarkers[i].myname + '<\/a></li>';
} //end of html contents
} //end of small i Loop
html += '</ul></div>';
} //end of big j Loop
document.getElementById("gMapSideBar").innerHTML = html;
}
function initialize() {
var myOptions = {
zoom: 13,
center: new google.maps.LatLng(49.049261, -122.798181),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"),
myOptions);
google.maps.event.addListener(map, 'click', function () {
infowindow.close();
});
// Read the data
downloadUrl("http://www.solo-mosaic.com/wp-content/themes/
SoLoMosaic/SoloMapExcelSheet.xml", function (doc) {
var xml = xmlParse(doc);
var markers =
xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat, lng);
var address = markers[i].getAttribute("address");
var name = markers[i].getAttribute("name");
var html = "<b>" + name + "<\/b><p>" + address;
var category = markers[i].getAttribute("category");
// create the marker
var marker = createMarker(point, name, html,
category);
}
// == show or hide the categories initially ==
hide("Schools");
hide("Shopping");
hide("Restaurants");
hide("Transportation");
hide("Trails");
show("Amenities");
// == create the initial sidebar ==
makeSidebar();
});
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/example_categories.htm
//]]>
--
You received this message because you are subscribed to the Google Groups
"Google Maps API V2" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-api?hl=en.
