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
Related
I need get cookie in iframes peer console command in script,
i need help with code:
I'll leave my code to help me if possible:
<div id="test"></div>
<script src="https://www.website.com">
<script>
var getCookies = function(){
var pairs = document.cookie.split(";");
var cookies = {};
for (var i=0; i<pairs.length; i++){
var pair = pairs[i].split("=");
cookies[(pair[0]+'').trim()] = unescape(pair.slice(1).join('='));
}
return cookies;
}
myCookies = getCookies();
console.log("x")
const x = (myCookies)
document.getElementById('test').innerHTML = x
</script>
How can I get the iframes on the page? I want to get an external options(width, height, id, src) and inner HTML.
It's all I can get only if the iframes on the page are not dynamically added. If they are dynamically added, the order of the IFRAME in the DOM and in the frameid (switchToFrame(frameid)) differs, and I can not compare them.
HTML:
<iframe src="iframe.php?id=1"></iframe>
<iframe src="iframe.php?id=2"></iframe>
<div id="dynamic_iframe"></div>
<div id="dynamic_iframe2"></div>
<iframe src="iframe.php?id=3"></iframe>
<script>
var el = document.createElement("iframe");
el.src = 'iframe.php?id=21';
document.getElementById('dynamic_iframe').appendChild(el);
var el = document.createElement("iframe");
el.src = 'iframe.php?id=22';
document.getElementById('dynamic_iframe2').appendChild(el);
</script>
PhantomJS:
getAllIFramesFromPage = function(page){
return page.evaluate(function() {
var matches = document.querySelectorAll('iframe');
ifames = [];
for(var i = 0; i < matches.length; ++i){
ifames.push(matches[i].src);
}
return ifames;
});
};
out:
iframe.php?id=1
iframe.php?id=2
iframe.php?id=21
iframe.php?id=22
iframe.php?id=3
PhantomJS:
var cnt = page.framesCount;
for(var i = 0; i < cnt; i++){
page.switchToFrame(i);
console.log(page.framePlainText);
page.switchToMainFrame();
}
out:
1
2
3
21
22
I was able to get out of a problem like this:
When I pass all the iframe into the DOM I put in them hidden value
page.switchToMainFrame();
page.evaluate(function() {
var matches = document.querySelectorAll('iframe');
ifames = [];
for(var i = 0; i < matches.length; ++i){
var iframeWindow = matches[i].contentWindow || matches[i].contentDocument.parent;
var frmBody = iframeWindow.document.getElementsByTagName("body")[0].frame_id = i;
}
});
Already inside an iframe I can get this value as follows:
var cnt = this.page.framesCount;
for(var i = 0; i < cnt; i++){
page.switchToFrame(i);
frameIndex = this.page.evaluate(function() {
if (document.getElementsByTagName("body")[0].frame_id !== undefined){
return document.getElementsByTagName("body")[0].frame_id;
}
return false;
});
this.page.switchToParentFrame();
}
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 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.
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));