I have been working on a map about schools in Vancouver. For days, I
am stuck with these problems. Would really appreciate if someone can
help.
First thing is that the titles of the markers doesn't always show in
FF (I'm using 8). Some do some don't. One thing I figured is that if
I move my mouse pointer outside of the maps boundary and back inside,
the one that didn't show title would then show title. I am thinking
of making the map full screen and that problem is going to make my map
unusable for 1/3 of the browser out there.
Second thing is the custom overlay image seems to be on top of the
markers. Is there a place I can stick a zIndex to so it'll appear
underneath?
Third thing is, if I link away from the map and then back, all markers
load regardless of the checkboxes status before I link away. Any
suggestion on how can I control this so the right site of markers will
show when I return to the map by clicking 'back' on the browser?
Please see my code below. Thanks in advance for helping.
******* HTML file as followed ******
<!DOCTYPE html>
<html>
<head>
<TITLE>Our School - Test Version 0.7</TITLE>
<meta http-equiv="X-UA-Compatible" content="IE=8" > <meta http-
equiv="X-UA-Compatible" content="IE=9" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /
>
<link rel="stylesheet" type="text/css" href="../css/styles.css"
media="all"/>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true";>
</script>
<script type="text/javascript" src="../scripts/mapscripts.js"></
script>
<script type="text/javascript" src="../scripts/googlemapdata.js"></
script>
</head>
<body>
<nav id="main_map">
<h2>Select schools</h2>
<ul>
<li><input type="checkbox" id="Checkbox1" checked="checked"
Onclick="if(this.checked){showOverlays(ElementaryMarkerArray)}
else{clearOverlays(ElementaryMarkerArray)}"/>
Elementary Schools</li>
<li><input type="checkbox" id="Checkbox2" checked="checked"
Onclick="if(this.checked){showOverlays(SecondaryMarkerArray)}
else{clearOverlays(SecondaryMarkerArray)}" />
Secondary Schools</li>
<li> <input type="checkbox" id="Checkbox3" checked="checked"
Onclick="if(this.checked){showOverlays(EdCentreMarkerArray)}
else{clearOverlays(EdCentreMarkerArray)}" />
Adult Education Centres</li>
<li><input type="checkbox" id="Checkbox4" checked="checked"
Onclick="if(this.checked){showOverlays(StrongStartMarkerArray)}
else{clearOverlays(StrongStartMarkerArray)}" />
StrongStart Centres</li>
<li>
<h2>Select area</h2>
<input type="checkbox" id="Checkbox5" checked="checked"
Onclick="overlay.toggle();" />
Show sectors<br /></input></li>
</nav>
<div id="map_canvas"></div>
</body>
</html>
******* mapscripts.js file as followed *******
// JavaScript Document
// version 0.6.2 2011-12-13
// For SectoralReview website ourfuture.vsb.bc.ca.
// Use Google Map V3
var map;
var marker;
var poly;
var ElementaryMarkerArray=new Array(); // data from
googlemapdata.js
var SecondaryMarkerArray=new Array();
var StrongStartMarkerArray=new Array();
var EdCentreMarkerArray = new Array();
var CurrentSchoolsArray = new Array(); // Contain Active markers
// Custom Overlay
var overlay;
VSBOverlay.prototype = new google.maps.OverlayView();
function VSBOverlay(bounds, image, map) {
// Now initialize all properties.
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
VSBOverlay.prototype.onAdd = function () {
var div = document.createElement('DIV');
div.style.border = "none";
div.style.borderWidth = "0px";
div.style.position = "absolute";
div.style.zIndex = "-1";
var img = document.createElement("img");
img.src = this.image_;
img.style.width = "100%";
img.style.height = "100%";
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayImage.appendChild(this.div_);
}
VSBOverlay.prototype.draw = function () {
var overlayProjection = this.getProjection();
var sw =
overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne =
overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
}
VSBOverlay.prototype.onRemove = function () {
this.div_.parentNode.removeChild(this.div_);
}
VSBOverlay.prototype.hide = function () {
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
VSBOverlay.prototype.show = function () {
if (this.div_) {
this.div_.style.visibility = "visible";
}
}
VSBOverlay.prototype.toggle = function () {
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
} else {
this.hide();
}
}
}
// *** End Custom Overlay
// show sectors map GIF overlay
function showsectorsmap(flag) {
var showmap = flag;
if (showmap) {sectorsmap.setMap(map); }
else { sectorsmap.setMap(null); }
}
// place markers
function setMarkers(map, locations, schoollevel) {
// set image and shadow for Elementary and Secondary schools
if (schoollevel=='e') {
var image = new google.maps.MarkerImage('../maps/assets/
map_elementary.png',
new google.maps.Size(19, 15),
new google.maps.Point(0, 0),
new google.maps.Point(0, 15));
}
else if (schoollevel=='s') {
var image = new google.maps.MarkerImage('../maps/assets/
map_secondary.png',
new google.maps.Size(26, 21),
new google.maps.Point(0, 0),
new google.maps.Point(0, 21));
}
else if (schoollevel=='ss') {
var image = new google.maps.MarkerImage('../maps/assets/
map_strong_start.png',
new google.maps.Size(19, 15),
new google.maps.Point(0, 0),
new google.maps.Point(0, 15));
}
else if (schoollevel=='ec') {
var image = new google.maps.MarkerImage('../maps/assets/
map_adult_edu.png',
new google.maps.Size(26, 21),
new google.maps.Point(0, 0),
new google.maps.Point(0, 21));
};
// place shadow same for all images
var shadow = new google.maps.MarkerImage('../maps/assets/
map_shadow_sm.png',
new google.maps.Size(22, 18),
new google.maps.Point(0, 0),
new google.maps.Point(0, 18));
var shape = {
coord: [1, 1, 1, 28, 28, 28, 28, 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var school = locations[i];
var myLatLng = new google.maps.LatLng(school[1],
school[2]);
var BasicSchoolInfo = '<div id="balloon_on_map">' + '<p>'
+ school[0] + ' at ' + school[4] + '<br/>' + '<a href="/schoolmap/
school.aspx?s=' + school[3] + '">Visit School Website</a>' + '</div>';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
zIndex: school[5],
schoolurl: '../schoolmap/school.aspx?s=' + school[3],
title: school[0] + ' at ' + school[4]
});
// setup marker arrays
if (schoollevel=='e') {
ElementaryMarkerArray.push(marker);
} else if (schoollevel=='s') {
SecondaryMarkerArray.push(marker);
} else if (schoollevel=='ss') {
StrongStartMarkerArray.push(marker);
} else if (schoollevel=='ec') {
EdCentreMarkerArray.push(marker);
};
// infowindow is currently dormant
infowindow = new google.maps.InfoWindow({
content: BasicSchoolInfo
});
// Click marker go to school page
google.maps.event.addListener(marker, 'click', function ()
{
window.open(this.schoolurl, '_self');
});
}
}
// Removes the overlays from the map, but keeps them in the marker
array
function clearOverlays(locations) {
if (locations) {
for (i in locations) {
locations[i].setMap(null);
}
}
}
// Shows any overlays currently in the array
function showOverlays(locations) {
if (locations) {
for (i in locations) {
locations[i].setMap(map);
}
}
}
// initialize map
function initialize() {
var latlng = new google.maps.LatLng(49.2605, -123.145); //
geolocation of Education Center
var myOptions = {
zoom: 12,
minZoom: 12,
streetViewControl: false,
center: latlng, // place Education Center in center of
map
mapTypeId: google.maps.MapTypeId.TERRAIN,
heading: 90
};
map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions); //
create map
// place markers for elementary schools
setMarkers(map, ElementarySchools, 'e');
// place markers for secondary schools
setMarkers(map, SecondarySchools, 's');
// place markers for strongstartschools
setMarkers(map, StrongStartSchools, 'ss');
// place markers for education centres
setMarkers(map, EdCentres, 'ec');
// Place sectors map
// var swBound = new google.maps.LatLng(49.200887,
-123.262825);
var swBound = new google.maps.LatLng(49.199900, -123.264825);
var neBound = new google.maps.LatLng(49.313821, -123.022082);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
var srcImage = '../maps/assets/sectors_map.png';
overlay = new VSBOverlay(bounds, srcImage, map);
}
google.maps.event.addDomListener(window, 'load', initialize);
********* Related CSS as followed **********
nav#main_map ul, nav#main_map ul li {margin-left:0; padding-left:0;
background:none; font-size:12px;}
.checkboxlabel {font-size:80%;}
nav#main_map h2{margin-top:0; display:inline;}
nav#main_map h2 {float:left; padding-right:10px;}
nav#main_map{width:100%;float:left; background-color:#F8F8F8; margin:
0 10px 0 0; padding: 5px 0px 5px 5px; font-family:Arial, Helvetica,
sans-serif}
nav#main_map ul {display:inline; float:left;}
nav#main_map ul li {float:left; padding-right:10px;}
div#map_canvas {float:left; width:960px; height:550px; display:block;
margin-bottom:10px;}
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" 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-js-api-v3?hl=en.
