Fine Tuning Question
Hi All,
I've managed to build a Google Maps module for a CMS (php/mySQL) that I
use, http://cpgnuke.com. It allows members to click on the map and
enter their position, which can then be seen as a marker by everyon
else. If you click on a members marker an info window gives you a link
to that members profile.
The map seems to display fine in both Firefox and IE. The issue I am
having is that in Firfox, when you click on a member's marker, only a
textual link pops up, not the pretty icon containing the link as it
does in IE.
When the member's marker is clicked, Firefox's javascript console
reports the following error:
Error: this.point has no properties
Source File: http://maps.google.com/mapfiles/maps.27a.js
Line: 340
Here's the relevant section of the page's source (with all the CMS
content that wraps it snipped out):
<div class="table1">
<center><img src="modules/MemGooMap/images/memgoomap.jpg">
<p><hr><p><a href="admin.php?op=MemGooMap">Map Start
Location/Zoom</a> | <a
href="admin.php?op=MemGooMap&oper=GetKey">Site Key</a> | <a
href="admin.php?op=MemGooMap&oper=GetIcons">Icons</a> | <a
href="admin.php?op=MemGooMap&oper=GetMapOptions">Map Options</a> |
<a href="admin.php?op=MemGooMap&oper=GetDeleteMarker">Delete
Location</a>
<p><hr><p><b>Member Locations - Click Marker For link to Member
Profile</b>
<p><img src="modules/MemGooMap/images/member.png"> - Member <img
src="modules/MemGooMap/images/moderator.png"> - Moderator <img
src="modules/MemGooMap/images/admin.png"> - Admin <img
src="modules/MemGooMap/images/me.png"> - Your Location
<script
src="http://maps.google.com/maps?file=api&v=1&key=MYKEYEDITEDOUT"
type="text/javascript"></script>
<script type="text/javascript">
//Check to make sure browser can handle Google Maps API
if (GBrowserIsCompatible()) {
var baseIcon = new GIcon();
baseIcon.image = "modules/MemGooMap/images/marker_blue.png";
baseIcon.shadow = "modules/MemGooMap/images/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
var icon1 = new GIcon();
icon1.image = "modules/MemGooMap/images/mm_20_red.png";
icon1.iconSize = new GSize(12, 20);
icon1.iconAnchor = new GPoint(6, 20);
icon1.infoWindowAnchor = new GPoint(5, 1);
icon1.infoShadowAnchor = new GPoint(1,1);
function WindowOnload(f) {
var prev=window.onload;
window.onload=function(){ if(prev)prev(); f(); }
}
// Creates a marker whose info window displays the given
number
function createMarker(point, text, marker_icon)
{
var icon = new GIcon(icon1);
icon.image = marker_icon;
var marker = new GMarker(point, icon);
var html = text;
GEvent.addListener(marker, "click", function()
{marker.openInfoWindowHtml(html);});
return marker;
};
function InitMap()
{
var map = new GMap(document.getElementById("mainmap"));
map.registerKeyHandlers( window );
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.centerAndZoom(new GPoint(-107.402344, 52.696361), 14);
var point = new GPoint(-114.009040,50.839050);
var marker = createMarker(point, '<b><a href=
"Your_Account/profile=2.html">Profile For Ronin</a></b>',
'modules/MemGooMap/images/me.png');
map.addOverlay(marker);
GEvent.addListener(map, 'click', function(overlay, point) {
icon1.image = "modules/MemGooMap/images/admin.png";
marker = new GMarker(point, icon1);
map.addOverlay(marker);
var zoom_config = map.getZoomLevel();
marker.openInfoWindowHtml("<form name='update_member'
method='post' action='MemGooMap/oper=UpdateMember.html'><table><tr><td
align='right'>Lat: </td><td><input name='lat' type='text' id='lat'
value='"+point.y+"' size='12'></td></tr><tr><td
align='right'>Lon: </td><td><input name='lon' type='text' id='lon'
value='"+point.x+"' size='12'></td></tr><tr><td></td><td><input
name='Submit' type='submit' value='Update Location for
Ronin'></td></tr></table></form>");
});
};
WindowOnload( InitMap );
} else
{
alert("'._BAD_BROWSER.'");
}
</script>
<div id="mainmap" style="width: 800px; height: 600px"></div>
</center>
</div>
Any ideas?
Cheers,
Paul
0 Comments:
Yorum Gönder
<< Home