A couple of things with markers titles problem and custom overlay
K Lo
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;}
Marcelo
>
> Please see my code below. Thanks in advance for helping.
>
> ******* HTML file as followed ******
Massive code dump ignored.
You still haven't read the posting guidelines, as it was suggested to
you in your other thread.
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/1863801601f3f3db
--
Marcelo - http://maps.forum.nu
--
Johnny K Lo
--
--
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 google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
24/7
Johnny K Lo
http://www.strathcona-health.ca/vsb/maps/ourschoolsmap0.7.html
Any help would be appreciated.
--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/0sLXz45JDZUJ.
Johnny K Lo
http://www.strathcona-health.ca/vsb/maps/ourschoolsmap0.7.html
Any help would be appreciated.
Marcelo
> 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.
I don't have FF8. Looks fine in Chrome.
>
> 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?
Try adding the overlay before adding the markers.
They go on the same mapPane, so as you're doing it now, when you do
panes.overlayImage.appendChild(this.div_);
the markers are already there.
>
> 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?
>
It's an AJAX application, so it does not preserve the state unless you
preserve it in a server session or a cookie. However, some browsers
will preserve the state of checkboxes, so you could check the state of
the checkbox before loading the markers, for example:
//========== Untested ===================
if (document.getElementById('Checkbox1').checked) {
setMarkers(map, ElementarySchools, 'e');
Johnny K Lo
> First thing is that the titles of the markers doesn't always show inI don't have FF8. Looks fine in Chrome.
> 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.
Try adding the overlay before adding the markers.
>
> 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?
They go on the same mapPane, so as you're doing it now, when you do
panes.overlayImage.appendChild(this.div_);
the markers are already there.
It's an AJAX application, so it does not preserve the state unless you
>
> 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?
>
preserve it in a server session or a cookie. However, some browsers
will preserve the state of checkboxes, so you could check the state of
the checkbox before loading the markers, for example:
//========== Untested ===================
if (document.getElementById('Checkbox1').checked) {
setMarkers(map, ElementarySchools, 'e');
}
JLO: Thanks! It works! How do I setup markers info into the array without showing the markers on the map? Is it MarkerOptions object? Because the latlang of the 'unchecked' markers are not setup in the array when the map is initialized.
--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
Rossko
http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerOptions
Johnny K Lo
Have you tried your markers non-optimized?
http://code.google.com/apis/maps/documentation/javascript/reference.html#MarkerOptions
Johnny K Lo
Johnny K Lo
Rossko
I get a map with markers. Is there some new url we should be looking
at?
> Besides, if I call the setmarkers function every time the corresponding
> checkbox is checked, would a whole new bunch of listeners be created again?
The usual method is to create and store markers one time only, and
hide/show them under checkbox control.
Pil
On Dec 14, 6:35 pm, K Lo <klo...@gmail.com> wrote:
>
> First thing is that the titles of the markers doesn't always show in
> FF (I'm using 8). Some do some don't.
I notice this also in FF 3.6 for optimized markers.
Seems only to happen in FF.
Could be a browser bug or an API bug...
Johnny
As the nature of the problem has changed, I have posted new discussion
with new link.
The original Title problem and custom overlay problem has been solved
by setting optimized to false. I am using png files as markers.
Thanks.
Johnny
Thanks.
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/9774e8a3e535c7ef#