I added a google map with two markers (i am just testing), the code is:
function load() {
var map = new GMap2(document.getElementById("map"));
var marker = new GMarker(new GLatLng(<%=coordinates%>));
var marker2 = new GMarker(new GLatLng(31.977211,35.951729));
var html="<%=maptitle%><br/>" +
"<%=text%>";
var html2="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
"<%=maptitle%><br/>" +
"<%=text%>" + "Alper";
map.setCenter(new GLatLng(<%=coordinates%>), 5);
map.setMapType(G_HYBRID_MAP);
map.addOverlay(marker);
map.addOverlay(marker2);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
marker.openInfoWindowHtml(html);
marker2.openInfoWindowHtml(html2);
}
The problem is, only one markers text is showing (the white triangle with text inside it) the other is not visible, why?
Another thing, i have a table of Maps, its like: mapID, mapCoordinates, mapMarkerTitle, mapMarkerText, i can retrieve this table, but i want a way to be able to pass all its records to my javascript and create a Marker for each Map i have in my table, i know this is two much, but can anyone suggest or help me with the code? as i know nothing about javascript :D
The HTML OUTPUT is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Untitled Page
</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAANgu3GlobW5KtQorgXrnJ_xTHM4EYhrvsce8mdg4KdiCoPfCQKxSOZ_5sjy4O31twg6cxfZqam24TCw"
type="text/javascript"></script>
<script type="text/javascript">
function load() {
var map = new GMap2(document.getElementById("map"));
var marker = new GMarker(new GLatLng(32.523251,35.816068));
var marker2 = new GMarker(new GLatLng(31.977211,35.951729));
var html="maen<br/>" +
" maen tamemi";
var html2="<img src='simplemap_logo.jpg' width='20' height='20'/> " +
"maen<br/>" +
" maen tamemi" + "Alper";
map.setCenter(new GLatLng(32.523251,35.816068), 5);
map.setMapType(G_HYBRID_MAP);
map.addOverlay(marker);
map.addOverlay(marker2);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
marker2.openInfoWindowHtml(html2);
marker.openInfoWindowHtml(html);
}
//]]>
</script>
<script type="text/javascript">
function pageLoad() {
}
</script>
</head>
<body onload = "load()">
<form name="form1" method="post" action="Xhome.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDI5NDcxNTY4ZGTjxbb38769ZB2N9Ow9kAzPz2PIqA==" />
</div>
<div id="map" style="width:400px;height:300px" >
</div>
</form>
</body>
</html>
In response to the second part of your question:
i want a way to be able to pass all its records to my javascript and create a Marker for each Map i have in my table
I have (as an example - written a year or so ago) the following code:
In the code-behind I have something like this (c# I'm afraid):
[WebMethod]
public LatitudeLogitudeMessage[] GetPoints(string postCodes)
{
string[] postCodeArray = postCodes.Split(",".ToCharArray());
LatitudeLogitudeMessage[] pointArray =
new LatitudeLogitudeMessage[postCodeArray.Length];
int index = 0;
foreach (string postCode in postCodeArray)
{
pointArray[index] = GetPoint(postCode);
index++;
}
return pointArray;
}
LatitudeLogitudeMessage is a custom class that looks like this:
public class LatitudeLogitudeMessage
{
public decimal? Latitude { get; set; }
public decimal? Longitude { get; set; }
public string Message { get; set; }
public string Details { get; set; }
public string Address { get; set; }
public LatitudeLogitudeMessage(string addressToFind)
{
Address = addressToFind;
Details = addressToFind.Replace(",", ",<br />");
}
}
The GetPoint method bascially fills in those details.
In the code infront I then had:
PageMethods.GetPoints(address, showPoints);
Which calls the GetPoints method on the code behind, and passes the result to showPoints:
function showPoints(latLongs)
{
GLog.write("Showing points");
var points = [];
var latLngBounds = new GLatLngBounds();
for (var i = 0; i < latLongs.length; i++)
{
if ("" == latLongs[i].Message)
{
points[i] = new GLatLng(latLongs[i].Latitude, latLongs[i].Longitude);
var marker =
new GMarker(points[i], {title: latLongs[i].Details, clickable: false});
map.addOverlay(marker);
latLngBounds.extend(points[i]);
}
else
{
GLog.write(latLongs[i].Message);
}
}
if (points.length > 1)
{
var bounds = new GBounds(points);
var center = new GLatLng(
(latLngBounds.getSouthWest().lat()
+ latLngBounds.getNorthEast().lat()) /2.,
(latLngBounds.getSouthWest().lng()
+ latLngBounds.getNorthEast().lng()) /2.);
var newZoom = map.getBoundsZoomLevel(latLngBounds, map.getSize());
map.setCenter(center, newZoom);
}
else
{
map.setCenter(points[0], defaultZoomLevel);
}
}
So this takes the array of points, and iterates over them creating a marker as it goes, centering on the first item in the list (not clever, but it worked for me).
Try the Marker Manager API, it's easier to deal with. Here's the Google example:
function setupMap() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(41, -98), 4);
window.setTimeout(setupWeatherMarkers, 0);
}
}
function getWeatherMarkers(n) {
var batch = [];
for (var i = 0; i < n; ++i) {
batch.push(new GMarker(getRandomPoint(),
{ icon: getWeatherIcon() }));
}
return batch;
}
function setupWeatherMarkers() {
mgr = new GMarkerManager(map);
mgr.addMarkers(getWeatherMarkers(20), 3);
mgr.addMarkers(getWeatherMarkers(200), 6);
mgr.addMarkers(getWeatherMarkers(1000), 8);
mgr.refresh();
}
I don't think Google maps can show more than one info window at a time, so when you open the second one, the first one closes.
Edit: Markers also don't automatically open the information window automatically when you click on them. You need to attach a click handler to the marker that calls the showInfoWindowHtml method. I use a helper function that creates a marker and adds the click handler automatically.
function createMarkerHtml(point, title, html) {
var marker = new GMarker(point, { title: title });
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); });
return marker;
}
map.addOverlay(createMarkerHtml(new GLatLng(<%=coordinates%>), "Marker 1", html));
map.addOverlay(createMarkerHtml(new GLatLng(31.977211,35.951729), "Marker 2", html2));
Related
I'm having problem when trying to produce multiple marker for multiple address on the map. So basically, I'm pulling the address from my database and let the GoogleLocationService() to detect the coordinates of it. Though I'm not sure how can i pass multiple latitue and longitude for my VIEW(.CSHTML).
I'm still new on MVC so I'm kinda having trouble on passing the values from controller to view. any suggestions?
On my Code (Controller) :
public ActionResult Index() {
VerifyUserModel user = new VerifyUserModel();
user.UserName = "Kenneth Baleda";
user.AccountLevel = "MGR";
foreach (string w in a.Companies.Where(x => x.IsActive == "Active").Where(x => x.CompanyName != "tbd").Where(x => x.FullCompanyName != "Test")
.Where(x => x.FullCompanyName != "")
.Select(x => x.Address).ToArray())
{
user.CompanyAddress = w;
var location = new GoogleLocationService();
var point = location.GetLatLongFromAddress(w);
user.Latitude = point.Latitude;
user.Longtitude = point.Longitude;
}
return View(user);
}
While on my (Model) :
public class VerifyUserModel
{
public string UserName { get; set; }
public string AccountLevel { get; set; }
public double Latitude { get; set; }
public double Longtitude { get; set; }
public string CompanyAddress { get; set; }
}
Then my (.CSHTML) :
#foreach (var place in Model)
{
<text>
var latlng = new google.maps.LatLng(#Model.Latitude, #Model.Longtitude);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Latitude: ' + latlng.Ya + ' Longitude :' + latlng.Za,
draggable: true,
icon: image
});
infoWindow = new google.maps.InfoWindow({
content:"-- Test Address --"
});
infoWindow.open(map, marker);
geocoder = new google.maps.Geocoder();
//Update postal address when the marker is dragged
google.maps.event.addListener(marker, 'click', function () { //dragend
geocoder.geocode({ latLng: marker.getPosition() }, function (responses) {
if (responses && responses.length > 0) {
infoWindow.setContent(
"<div style=\"font-size:smaller;\">" + responses[0].formatted_address
+ "<br />"
+ "Latitude: " + marker.getPosition().lat() + " "
+ "Longitude: " + marker.getPosition().lng() + "</div>"
);
infoWindow.open(map, marker);
} else {
alert('Error: Google Maps could not determine the address of this location.');
}
});
map.panTo(marker.getPosition());
});
// Close the marker window when being dragged
google.maps.event.addListener(marker, 'dragstart', function () {
infoWindow.close(map, marker);
});
</text>
}
Google Earth plugin time slider stays running even though the kmz file ends. Time seems to run forever even not stopped manually. See the the page
http://www.sodanjaljet.fi/kuhmo/
Some other page has basically the same code code, but does not stay running, it ends as the kmz file is finished, see the page
http://www.sodanjaljet.fi/uncategorized/viipurinlahti-helmi-maaliskuussa-1940/
The problem code below
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var ge;
var firsttime = 0;
var timer;
google.load("earth", "1", {"other_params":"sensor=false"});
function init()
{
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance)
{
var defaultRate = 1; // 1 second in the plugin for each real second.
var speedyRate = 60*60*24*4; // 1 day for each real second.
ge = instance;
ge.getWindow().setVisibility(true);
addSampleButton('Alkuun', camera);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_SHOW);
var href = 'http://www.sodanjaljet.fi/wp-content/uploads/kmz/Kuhmo2.kmz';
google.earth.fetchKml(ge, href, function(kmlObject) {
if (kmlObject)
ge.getFeatures().appendChild(kmlObject);
if (kmlObject.getAbstractView() !== null)
ge.getView().setAbstractView(kmlObject.getAbstractView());
});
ge.getTime().getControl().setVisibility(ge.VISIBILITY_SHOW);
}
function failureCB(errorCode)
{
}
function camera()
{
var lookAt = ge.getView().copyAsLookAt(ge.ALTITUDE_RELATIVE_TO_GROUND);
lookAt.setLatitude(63.95335);
lookAt.setLongitude(30.08484);
lookAt.setRange(20000.0); //default is 0.0
lookAt.setTilt(30);
lookAt.setHeading(0);
ge.getView().setAbstractView(lookAt);
start();
}
function setRate(rate)
{
var rate = 60*60*24*4;
var extents = ge.getTime().getControl().getExtents();
if (firsttime == 0)
start();
firsttime = 1;
ge.getTime().setRate(eval(rate));
}
function setRate2(rate)
{
var rate = 60*60*24*4;
var time = ge.getTime().getTimePrimitive();
ge.getTime().setRate(eval(0));
}
function addSampleButton(caption, clickHandler)
{
var btn = document.createElement('input');
btn.type = 'button';
btn.value = caption;
if (btn.attachEvent)
btn.attachEvent('onclick', clickHandler);
else
btn.addEventListener('click', clickHandler, false);
document.getElementById('sample-ui').appendChild(btn);
}
function start()
{
var groundOverlay = ge.createGroundOverlay('');
var timeSpan = ge.createTimeSpan('');
timeSpan.getBegin().set('1940-01-01');
timeSpan.getEnd().set('1940-01-03');
groundOverlay.setTimePrimitive(timeSpan)
ge.getFeatures().appendChild(groundOverlay);
ge.getTime().setTimePrimitive(timeSpan);
}
google.setOnLoadCallback(init);
</script>
The code works other way fine, there are play, stop, and "back to begin" buttons, and they work. Time not stopping is however quite an annoying problem.
Any ideas how to get it stop?
Thanks in advance.
br
jouko
I currently have the following code:
[HttpPost]
public ActionResult Index(IList<LocalPageModel> postPages,
IEnumerable<HttpPostedFileBase> files)
{
if (ModelState.IsValid)
{
foreach (HttpPostedFileBase file in files)
{
if ((file != null) && (file.ContentLength > 0))
{
var fileName = Path.GetFileName(file.FileName);
var path = Path.Combine(Server.MapPath("~/App_Data/"),
fileName);
file.SaveAs(path);
}
}
}
else
{
ManagePagesModel mod = new ManagePagesModel
{
PostPages = postPages
};
return View("Index", mod);
}
return RedirectToAction("Index");
}
In my view, I have a JavaScript button which will add a div so that the user can post another page such as:
$("#add-page").click(function () {
$("#page").append('<div id="page"> #Html.TextBoxFor(u => u.PostPages[0].Title) </div>');
});
How do I make it so that when the user clicks on the JavaScript button, the new text will be appended to the page and u.PostPages[x] will be incremented?
If you want to do it all on the client (no AJAX), maybe don't use the MVC helpers at all, and do it manually instead - you know the HTML that will be rendered, so just do that:
var i = 0;
$("#add-page").click(function () {
$("#page").append('<input type="text" name="PostPages[' + (i++) + '].Title">');
});
Maybe clean the code up a bit so the quotes don't get too confusing, but you get the idea...
You didn't past your view, but I assume you have the following at the top:
#model = ManagePagesModel
If that's the case, you can then use the following #foreach to loop through the page models:
$("#add-page).click(function() {
#foreach(var pageModel in Model.PostPages){
$("#page").append('<div id="page"> #Html.TextBoxFor(u => pageModel.Title) </div>');
});
To increment u.PostPages[x] you may use following code:
<script>
var i = 0;
$("#add-page").click(function () {
i++
$("#page").append('<div id="page"> #Html.TextBoxFor(u => u.PostPages['+i+'].Title') </div>');
});
</script>
Here is small working example: jsfiddle
I will really appreciate help for this.
My html v2 file with some temporary key works fine. I am getting locations from some XML, create different colors markers and add some URLs also from XML attributes in Info Window(not too much complicated). Now I need to migrate this to v3. I found some equivalents for functions from v2 but I didn't find for GDownloadUrl( for loading XML) and also GIcon(G_DEFAULT_ICON); Can someone please look at both of my codes and tell me how to change to make this works also in v3. I changed most of the things so if someone can see some error I will be thankful. Thanks in advance.
Version 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=AIzaSyA4UDNP6MZ" type="text/javascript"></script>
</head>
<body onunload="GUenter code herenload()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 1250px; height: 1250px"></div>
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,alarm,markerOptions) {
var marker = new GMarker(point,markerOptions);
GEvent.addListener(marker, "click", function() {
var alarmanchor1='<span class="url"><a href="' + alarm;
var alarmanchor2='" title="www" target="_blank">Event List</a></span>';
var alarmanchor=alarmanchor1+alarmanchor2;
marker.openInfoWindowHtml(alarmanchor);
});
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
GEvent.trigger(gmarkers[i], "click");
}
// create the map
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 41.932797,21.483765), 10);
// Read the data from alarms33.xml
GDownloadUrl("alarms33.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.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 GLatLng(lat,lng);
var alarm = markers[i].getAttribute("alarm");
var label = markers[i].getAttribute("label");
var severity = parseFloat(markers[i].getAttribute("severity"));
var severityIcon = new GIcon(G_DEFAULT_ICON);
var color;
if (severity == 0) color = "66FF33";
else if (severity == 1) color = "990099";
else if (severity == 2) color = "00CCFF";
else if (severity == 3) color = "FFFF00";
else if (severity == 4) color = "FFCC00";
else if (severity == 5) color = "FF3300";
else color = "yellow";
severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
severityIcon.iconSize = new GSize(15, 30);
markerOptions = { icon:severityIcon };
// create the marker
var marker = createMarker(point,label,alarm,markerOptions);
map.addOverlay(marker);
}
});
}
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
</body>
</html>
Version 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=3&sensor=false&key=AIzaSyDsa1LyWOQ" type="text/javascript"></script>
</head>
<body onunload="initialize()">
<!-- you can use tables or divs for the overall layout -->
<table border=1>
<tr>
<td>
<div id="map" style="width: 1250px; height: 1250px"></div>
</td>
</tr>
</table>
<script type="text/javascript">
//<![CDATA[
var gmarkers = [];
// A function to create the marker and set up the event window
function createMarker(point,name,alarm,markerOptions) {
var marker = new google.maps.Marker(point,markerOptions);
google.maps.event.addListener(marker, "click", function() {
var alarmanchor1='<span class="url"><a href="' + alarm;
var alarmanchor2='" title="www.skolaznanja.com" target="_blank">Event List</a></span>';
var alarmanchor=alarmanchor1+alarmanchor2;
var infoWindow=new google.maps.InfoWindow();
infoWindow.setContent(alarmanchor);
infowindow.open(map,marker);
});
return marker;
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
// create the map
function initialize() {
var mapDiv = document.getElementById("map");
var map;
var myLatlng = new google.maps.LatLng(41.932797,21.483765);
var myOptions = {
zoom:10,
center:myLatlng,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(mapDiv, myOptions);
}
//var map = new google.maps.Map(document.getElementById("map"));
//map.addControl(new GLargeMapControl());
//map.addControl(new GMapTypeControl());
//map.setCenter(new google.maps.LatLng( 41.932797,21.483765), 10);
// Read the data from example.xml
GDownloadUrl("alarms44.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.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 alarm = markers[i].getAttribute("alarm");
var label = markers[i].getAttribute("label");
var severity = parseFloat(markers[i].getAttribute("severity"));
var severityIcon = new GIcon(G_DEFAULT_ICON);
var color;
if (severity == 0) color = "66FF33";
else if (severity == 1) color = "990099";
else if (severity == 2) color = "00CCFF";
else if (severity == 3) color = "FFFF00";
else if (severity == 4) color = "FFCC00";
else if (severity == 5) color = "FF3300";
else color = "yellow";
severityIcon.image = "http://www.googlemapsmarkers.com/v1/" + color;
severityIcon.iconSize = new GSize(15, 30);
markerOptions = { icon:severityIcon };
// create the marker
var marker = createMarker(point,label,alarm,markerOptions);
map.setMap(marker);
}
});
//]]>
</script>
</body>
</html>
As you've noted GDownloadUrl() no longer exists in GMap V3. I'd recommend jQuery.get(url)
I posted an example How to parse xml file for marker locations and plot on map.
UPDATE: As #user1191860 points out below there is a utility for GMap V3 xmlparsing. I was not aware of it. AFAIK, no reason not to use it.
You need to add
<script src="http://gmaps-samples-v3.googlecode.com/svn-history/r28/trunk/xmlparsing/util.js"></script>
to your html page.
Interesting that the author also includes a jQuery example
I use GMapImageCutter to generate tiles and js for a collage (custom map). Everything worked just fine but that was v2. I added markers, infowindows, etc and the projection worked just fine. Now I am at a loss to move this simple application to v3. Can someone direct me to a site that uses NO MAPS just its own collection of tiles - in v3? This is the GMapImageCutter js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html/xml; charset=utf-8"/>
<meta name="author" content="Richard Milton, Centre for Advanced Spatial Analysis (CASA), University College London (UCL)">
<meta name="description" content="Page automatically created by GMapImageCutter created by CASA">
<meta name="keywords" content="Google, Maps, Image, Images, Tile, Cutter, GMapImageCutter, GMapCreator">
<title>Picture Viewer</title>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2.x&key=PUTAPIKEYHERE"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var centreLat=0.0;
var centreLon=0.0;
var initialZoom=2;
var imageWraps=false; //SET THIS TO false TO PREVENT THE IMAGE WRAPPING AROUND
var map; //the GMap2 itself
/////////////////////
//Custom projection
//pass this zoom level count, wrap Boolean
/////////////////////
function CustomProjection(a,b){
this.imageDimension=65536;
this.pixelsPerLonDegree=[];
this.pixelOrigin=[];
this.tileBounds=[];
this.tileSize=256;
//use original b
this.isWrapped=b;
//define a new b
//why would anyone do this?
var b=this.tileSize;
var c=1;
for(var d=0;d<a;d++){
var e=b/2;
this.pixelsPerLonDegree.push(b/360);
this.pixelOrigin.push(new GPoint(e,e));
this.tileBounds.push(c);
b*=2;
c*=2
}
}
CustomProjection.prototype=new GProjection();
CustomProjection.prototype.fromLatLngToPixel=function(latlng,zoom){
var c=Math.round(this.pixelOrigin[zoom].x+latlng.lng()*this.pixelsPerLonDegree[zoom]);
var d=Math.round(this.pixelOrigin[zoom].y+(-2*latlng.lat())*this.pixelsPerLonDegree[zoom]);
return new GPoint(c,d)
};
CustomProjection.prototype.fromPixelToLatLng=function(pixel,zoom,unbounded){
var d=(pixel.x-this.pixelOrigin[zoom].x)/this.pixelsPerLonDegree[zoom];
var e=-0.5*(pixel.y-this.pixelOrigin[zoom].y)/this.pixelsPerLonDegree[zoom];
return new GLatLng(e,d,unbounded)
};
CustomProjection.prototype.tileCheckRange=function(tile,zoom,tilesize){
var tileBounds=this.tileBounds[zoom];
if (tile.y<0 || tile.y >= tileBounds) {return false;}
if (this.isWrapped) {
if (tile.x<0 || tile.x>=tileBounds) {
tile.x = tile.x%tileBounds;
if (tile.x < 0) {tile.x+=tileBounds}
}
}
else {
if (tile.x<0 || tile.x>=tileBounds) {return false;}
}
return true;
}
CustomProjection.prototype.getWrapWidth=function(zoom) {
return this.tileBounds[zoom]*this.tileSize;
}
////////////////////////////////////////////////////////////////////////////
function customGetTileURL(a,b) {
//converts tile x,y into keyhole string
var c=Math.pow(2,b);
var d=a.x;
var e=a.y;
var f="t";
for(var g=0;g<b;g++){
c=c/2;
if(e<c){
if(d<c){f+="q"}
else{f+="r";d-=c}
}
else{
if(d<c){f+="t";e-=c}
else{f+="s";d-=c;e-=c}
}
}
return "sqShelvesFloors03-tiles/"+f+".jpg"
}
function getWindowHeight() {
if (window.self&&self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement&&document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
return 0;
}
function resizeMapDiv() {
//Resize the height of the div containing the map.
//Do not call any map methods here as the resize is called before the map is created.
var d=document.getElementById("map");
var offsetTop=0;
for (var elem=d; elem!=null; elem=elem.offsetParent) {
offsetTop+=elem.offsetTop;
}
var height=getWindowHeight()-offsetTop-16;
if (height>=0) {
d.style.height=height+"px";
}
}
function load() {
if (GBrowserIsCompatible()) {
resizeMapDiv();
//pragmatic extents
var copyright = new GCopyright(1,
new GLatLngBounds(new GLatLng(-90, -180),
new GLatLng(90, 180)),
0,
"CASA");
var copyrightCollection = new GCopyrightCollection("GMapImgCutter");
copyrightCollection.addCopyright(copyright);
//create a custom picture layer
var pic_tileLayers = [ new GTileLayer(copyrightCollection , 0, 17)];
pic_tileLayers[0].getTileUrl = customGetTileURL;
pic_tileLayers[0].isPng = function() { return false; };
pic_tileLayers[0].getOpacity = function() { return 1.0; };
var proj=new CustomProjection(5,imageWraps);
var pic_customMap = new GMapType(pic_tileLayers, proj, "Pic",
{maxResolution:4, minResolution:0, errorMessage:"Data not available"});
//Now create the custom map. Would normally be G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP
map = new GMap2(document.getElementById("map"),{mapTypes:[pic_customMap]});
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(centreLat, centreLon), initialZoom, pic_customMap);
/////////////////////////////////////////////////////////////////////////////////////
//Add any markers here e.g.
// map.addOverlay(new GMarker(new GLatLng(x,y)));
/////////////////////////////////////////////////////////////////////////////////////
map.addOverlay(new GMarker(new GLatLng(85,170)));
map.addOverlay(new GMarker(new GLatLng(85,-170)));
map.addOverlay(new GMarker(new GLatLng(-85,-170)));
map.addOverlay(new GMarker(new GLatLng(-85,170)));
}
}
//]]>
</script>
</head>
<body onresize="resizeMapDiv()" onload="load()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
I made a video walking through how to use MapTiler (from MapTiler.org) to create a tiled v3 map. http://youtu.be/CeSFUSZLeao It doesn't quite meet your requirement of using only its own tiles, but it might get you close to what you want.
Everything you need (including examples) is here:
http://code.google.com/apis/maps/documentation/javascript/maptypes.html#Projections
It looks like you need both custom projections, and an ImageMapType.