Re: [WebDNA] Google map mashups

This WebDNA talk-list message is from

2010

It keeps the original formatting. numero = 104455
interpreted = N
texte = --0015175cac72f2b829047d0e8323Content-Type: text/plain; charset=UTF-8Part 3. Code to display mapBe sure to call in the Google Maps javascript with your API key in theheader of this page:

	[!][/!]

Where the 'gmaps_flaccentres.js' is: if (GBrowserIsCompatible()) {// ==== first part of the select box ===var select_html = '' +' - Select a centre - <\/option>';// =====================================// arrays to hold copies of the markers and html used by the side_bar// because the function closure trick doesnt work therevar gmarkers = [];var htmls = [];var i = 0;// A function to create the marker and set up the event windowfunction createMarker(point,name,html) { var marker = new GMarker(point, {title:name}); GEvent.addListener(marker, "click", function() { map.setZoom(10); marker.openInfoWindowHtml(html); }); // save the info we need to use later for the side_bar gmarkers[i] = marker; htmls[i] = html; // ======= Add the entry to the select box ===== select_html += ' ' + name + '<\/option>'; // ========================================================== i++; return marker;} // ======= This function handles selections from the select box ====// === If the dummy entry is selected, the info window is closed ==function handleSelected(opt) { var i = opt.selectedIndex - 1; if (i > -1) { map.setZoom(7); GEvent.trigger(gmarkers[i],"click"); } else { map.closeInfoWindow(); }}// create the mapvar map = new GMap2(document.getElementById("map"));map.addControl(new GSmallZoomControl());// map.addControl(new GMapTypeControl());// ====== Restricting the range of Zoom Levels =====// Get the list of map types// var mt = map.getMapTypes();// Overwrite the getMinimumResolution() and getMaximumResolution() methods// for (var j=0; j AmaxX) {X = AmaxX;}if (Y < AminY) {Y = AminY;}if (Y > AmaxY) {Y = AmaxY;}//alert ("Restricting "+Y+" "+X);map.setCenter(new GLatLng(Y,X));}}else {alert("Sorry, the Google Maps API is not compatible with this browser");}// This Javascript is based on code provided by the// Blackpool Community Church Javascript Team// http://www.commchurch.freeserve.co.uk/// http://www.econym.demon.co.uk/googlemaps/--0015175cac72f2b829047d0e8323Content-Type: text/html; charset=UTF-8Content-Transfer-Encoding: quoted-printable

Part 3. Code to display m=ap

Be sure to call in the Google Maps javascript w=ith your API key in the header of this page:



<!-- you can use tables or divs =for the overall layout -->

<table style=3D"border: 1px= solid #efefef; background: #efefef; padding: 0; width: 100%;" cellspa=cing=3D"0">



<tr>

<td class=3D"mapButtons&qu=ot;><div id=3D"selection"></div></td>

<=div><td align=3D"right" class=3D"mapButtons">[!]&=lt;input type=3D"button" value=3D"Hide ICON Area" oncli=ck=3D"insert1.hide()" />



<input type=3D"button" value=3D"Show ICON Area"= onclick=3D"insert1.show()" />[/!]</td></tr>

=

<tr>

<td colspan=3D"2">=</td></tr>



</table>

<div id=3D"map" s=tyle=3D"height: 540px; background: #efefef; background: url(/common/im=ages/maps/ajax-loader.gif) 50% 15% no-repeat; border: 1px solid #efefef;&qu=ot;></div>



<noscript>

<p><=strong>JavaScript must be enabled in order for you to use Google Maps.&l=t;/strong>=C2=A0

However, it seems JavaScript is either disabl=ed or not supported by your browser.=C2=A0



To view Google Maps, enable JavaScript by changing your browser option=s, and then=C2=A0

try again.</p>

&=lt;/noscript>

<script src=3D"/common/js=/gmaps_flaccentres.js" type=3D"text/javascript"></scri=pt>



Where the 'gmaps_flaccentres.js'= is:

=C2=A0=C2=A0 =C2=A0if (GBrowserIsCompati=ble()) {

// =3D=3D=3D=3D first part= of the select box =3D=3D=3D



var select_html =3D '&l=t;select onChange=3D"handleSelected(this)">' +

<=span style=3D"white-space: pre; ">'<option> - Select a= centre - <\/option>';



// =3D=3D=3D=3D=3D=3D=3D=3D==3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D==3D=3D=3D=3D

// arrays to hold copies of the markers and html used =by the side_bar



// because the function clo=sure trick doesnt work there

=var gmarkers =3D [];

<=/span>var htmls =3D [];



var i =3D 0;

=

// A f=unction to create the marker and set up the event window

function createMarker(point,name,html) {=



=C2=A0=C2=A0var marker =3D =new GMarker(point, {title:name});

=C2=A0=C2=A0GEvent.addListener(marker, "click", funct=ion() {

=C2=A0=C2=A0 ==C2=A0map.setZoom(10);



=C2=A0=C2=A0 =C2=A0marker.o=penInfoWindowHtml(html);

=C2=A0=C2=A0});

=C2==A0=C2=A0// save the info we need to use later for the side_bar



=C2=A0=C2=A0gmarkers[i] =3D= marker;

=C2=A0=C2=A0h=tmls[i] =3D html;

=C2=A0=C2=A0// =3D=3D=3D=3D=3D=3D=3D Add the entry to the select= box =3D=3D=3D=3D=3D



=C2=A0=C2=A0select_html +==3D '<option> ' + name + '<\/option>';

=C2=A0=C2=A0// =3D=3D=3D=3D=3D==3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D==3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D==3D=3D=3D



=C2=A0=C2=A0=i++;

=C2=A0=C2=A0retur=n marker;

}

=



=C2=A0=C2=A0 =C2=A0 // =3D=3D=3D=3D=3D=3D=3D This function handles sel=ections from the select box =3D=3D=3D=3D

// =3D=3D=3D If the dummy entry is selected, the info wi=ndow is closed =3D=3D

=function handleSelected(opt) {



=C2=A0=C2=A0var i =3D opt.s=electedIndex - 1;=C2=A0

=C2=A0=C2=A0if (i > -1) {

=C2=A0=C2=A0map.setZoom(7);



=C2=A0=C2=A0 =C2=A0GEvent.t=rigger(gmarkers[i],"click");

=C2=A0=C2=A0}

=C2=A0=C2=A0else {

=C2=A0=C2=A0 =C2=A0map.closeInfo=Window();

=C2=A0=C2=A0=}

}

// create the map



var map =3D new GMap2(doc=ument.getElementById("map"));

map.addControl(new GSmallZoomControl());

//map.addControl(new GMapTypeContr=ol());



// =3D=3D==3D=3D=3D=3D Restricting the range of Zoom Levels =3D=3D=3D=3D=3D

// Get the list of map types<=span style=3D"white-space: pre; ">



//var mt =3D map.getMapTy=pes();

// Overwrite =the getMinimumResolution() and getMaximumResolution() methods

//<=span style=3D"white-space: pre; ">for (var j=3D0; j<mt.length;= j++) {



//mt[j].getMinimumResolu=tion =3D function() {return 6;}

//mt[j].getMaximumResolution =3D function() {return 7;}

<=div>//}

<=span style=3D"white-space: pre; ">map.setCenter(new GLatLng(53.24=226352500856, -8.031005859375), 7);

//enable smooth zooming



map.enableContinuousZoom(=);

map.enableDoubleC=lickZoom();

// Read the data from 100.xml





GDownloadUrl("/xml/gmap_flaccentres.xml&quo=t;, function (doc) {

==C2=A0=C2=A0var xmlDoc =3D GXml.parse(doc);



=C2=A0=C2=A0var markers =3D= xmlDoc.documentElement.getElementsByTagName("marker");

=C2=A0=C2=A0for =(var i =3D 0; i < markers.length; i++) {



=C2=A0=C2=A0 =C2=A0// obtai=n the attribues of each marker

=C2=A0=C2=A0 =C2=A0var lat =3D parseFloat(markers[i].getAttribute(="lat"));

=C2==A0=C2=A0 =C2=A0var lng =3D parseFloat(markers[i].getAttribute("lng&qu=ot;));



=C2=A0=C2=A0 =C2=A0var poin=t =3D new GLatLng(lat,lng);

<=/span>=C2=A0=C2=A0 =C2=A0var html =3D markers[i].getAttribute("html&qu=ot;);

=C2=A0=C2=A0 =C2==A0var label =3D markers[i].getAttribute("label");



=C2=A0=C2=A0 =C2=A0// creat=e the marker

=C2=A0=C2==A0 =C2=A0var marker =3D createMarker(point,label,html);

=C2=A0=C2=A0 =C2=A0map.addOverlay(marker=);



=C2=A0=C2=A0}

=C2=A0// =3D=3D=3D==3D=3D final part of the select box =3D=3D=3D=3D=3D

=C2=A0=C2=A0select_html +=3D '</sele=ct>';



=C2=A0=C2=A0document.getEle=mentById("selection").innerHTML =3D select_html;

});



// Add a m=ove listener to restrict the bounds range

GEvent.addListener(map, "move", function() ={



checkBounds();

});

=// The allowed region which th=e whole map must be within



var allowedBounds =3D new= GLatLngBounds(new GLatLng(50.5,-10), new GLatLng(56,-6.06));



// If the map position is out of range, move it back=



function checkBounds() {<=/div>

// Perform the chec=k and return if OK

=if (allowedBounds.contains(map.getCenter())) {



return;

}

// It`s not OK, so find the nearest allowed point a=nd move there



var C =3D map.getCenter(=);

var X =3D C.lng(=);

var Y =3D C.lat(=);



var AmaxX= =3D allowedBounds.getNorthEast().lng();

var AmaxY =3D allowedBounds.getNorthEast().lat();

var AminX =3D allowedBounds.g=etSouthWest().lng();

var AminY =3D allowedBounds.getSouthWest().lat();

if (X < AminX) {X =3D Am=inX;}



if (X > AmaxX) {X =3D= AmaxX;}

if (Y <= AminY) {Y =3D AminY;}

if (Y > AmaxY) {Y =3D AmaxY;}



//alert ("Restricti=ng "+Y+" "+X);

=map.setCenter(new GLatLng(Y,X));

}



}

=else {

alert("S=orry, the Google Maps API is not compatible with this browser");



}

=// This Javascript is based on code provided by the

// Blackpool =Community Church Javascript Team

//=C2=A0http://www.commchurch.freeserve.co.uk/=C2=A0=C2=A0=C2=A0



//=C2=A0http://www.econym.demon.co.=uk/googlemaps/

--0015175cac72f2b829047d0e8323-- Associated Messages, from the most recent to the oldest:

Re: [WebDNA] Google map mashups (Terry Wilson 2010) Re: [WebDNA] Google map mashups (Tom Duke 2010) Re: [WebDNA] Google map mashups (Tom Duke 2010) Re: [WebDNA] Google map mashups (Tom Duke 2010) Re: [WebDNA] Google map mashups (Jym Duane 2010) Re: [WebDNA] Google map mashups ("Terry Wilson" 2010) Re: [WebDNA] Google map mashups (Tom Duke 2010) Re: [WebDNA] Google map mashups ("Terry Wilson" 2010) Re: [WebDNA] Google map mashups (Carl Sky 2010) Re: [WebDNA] Google map mashups ( 2010) [WebDNA] Google map mashups (Terry Wilson 2010)

--0015175cac72f2b829047d0e8323Content-Type: text/plain; charset=UTF-8Part 3. Code to display mapBe sure to call in the Google Maps javascript with your API key in theheader of this page:

	[!][/!]



Where the 'gmaps_flaccentres.js' is: if (GBrowserIsCompatible()) {// ==== first part of the select box ===var select_html = '' +' - Select a centre - <\/option>';// =====================================// arrays to hold copies of the markers and html used by the side_bar// because the function closure trick doesnt work therevar gmarkers = [];var htmls = [];var i = 0;// A function to create the marker and set up the event windowfunction createMarker(point,name,html) { var marker = new GMarker(point, {title:name}); GEvent.addListener(marker, "click", function() { map.setZoom(10); marker.openInfoWindowHtml(html); }); // save the info we need to use later for the side_bar gmarkers[i] = marker; htmls[i] = html; // ======= Add the entry to the select box ===== select_html += ' ' + name + '<\/option>'; // ========================================================== i++; return marker;} // ======= This function handles selections from the select box ====// === If the dummy entry is selected, the info window is closed ==function handleSelected(opt) { var i = opt.selectedIndex - 1; if (i > -1) { map.setZoom(7); GEvent.trigger(gmarkers[i],"click"); } else { map.closeInfoWindow(); }}// create the mapvar map = new GMap2(document.getElementById("map"));map.addControl(new GSmallZoomControl());// map.addControl(new GMapTypeControl());// ====== Restricting the range of Zoom Levels =====// Get the list of map types// var mt = map.getMapTypes();// Overwrite the getMinimumResolution() and getMaximumResolution() methods// for (var j=0; j AmaxX) {X = AmaxX;}if (Y < AminY) {Y = AminY;}if (Y > AmaxY) {Y = AmaxY;}//alert ("Restricting "+Y+" "+X);map.setCenter(new GLatLng(Y,X));}}else {alert("Sorry, the Google Maps API is not compatible with this browser");}// This Javascript is based on code provided by the// Blackpool Community Church Javascript Team// http://www.commchurch.freeserve.co.uk/// http://www.econym.demon.co.uk/googlemaps/--0015175cac72f2b829047d0e8323Content-Type: text/html; charset=UTF-8Content-Transfer-Encoding: quoted-printable

Part 3. Code to display m=ap

Be sure to call in the Google Maps javascript w=ith your API key in the header of this page:



<!-- you can use tables or divs =for the overall layout -->

<table style=3D"border: 1px= solid #efefef; background: #efefef; padding: 0; width: 100%;" cellspa=cing=3D"0">



<tr>

<td class=3D"mapButtons&qu=ot;><div id=3D"selection"></div></td>

<=div><td align=3D"right" class=3D"mapButtons">[!]&=lt;input type=3D"button" value=3D"Hide ICON Area" oncli=ck=3D"insert1.hide()" />



<input type=3D"button" value=3D"Show ICON Area"= onclick=3D"insert1.show()" />[/!]</td></tr>

=

<tr>

<td colspan=3D"2">=</td></tr>



</table>

<div id=3D"map" s=tyle=3D"height: 540px; background: #efefef; background: url(/common/im=ages/maps/ajax-loader.gif) 50% 15% no-repeat; border: 1px solid #efefef;&qu=ot;></div>



<noscript>

<p><=strong>JavaScript must be enabled in order for you to use Google Maps.&l=t;/strong>=C2=A0

However, it seems JavaScript is either disabl=ed or not supported by your browser.=C2=A0



To view Google Maps, enable JavaScript by changing your browser option=s, and then=C2=A0

try again.</p>

&=lt;/noscript>

<script src=3D"/common/js=/gmaps_flaccentres.js" type=3D"text/javascript"></scri=pt>



Where the 'gmaps_flaccentres.js'= is:

=C2=A0=C2=A0 =C2=A0if (GBrowserIsCompati=ble()) {

// =3D=3D=3D=3D first part= of the select box =3D=3D=3D



var select_html =3D '&l=t;select onChange=3D"handleSelected(this)">' +

<=span style=3D"white-space: pre; ">'<option> - Select a= centre - <\/option>';



// =3D=3D=3D=3D=3D=3D=3D=3D==3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D==3D=3D=3D=3D

// arrays to hold copies of the markers and html used =by the side_bar



// because the function clo=sure trick doesnt work there

=var gmarkers =3D [];

<=/span>var htmls =3D [];



var i =3D 0;

=

// A f=unction to create the marker and set up the event window

function createMarker(point,name,html) {=



=C2=A0=C2=A0var marker =3D =new GMarker(point, {title:name});

=C2=A0=C2=A0GEvent.addListener(marker, "click", funct=ion() {

=C2=A0=C2=A0 ==C2=A0map.setZoom(10);



=C2=A0=C2=A0 =C2=A0marker.o=penInfoWindowHtml(html);

=C2=A0=C2=A0});

=C2==A0=C2=A0// save the info we need to use later for the side_bar



=C2=A0=C2=A0gmarkers[i] =3D= marker;

=C2=A0=C2=A0h=tmls[i] =3D html;

=C2=A0=C2=A0// =3D=3D=3D=3D=3D=3D=3D Add the entry to the select= box =3D=3D=3D=3D=3D



=C2=A0=C2=A0select_html +==3D '<option> ' + name + '<\/option>';

=C2=A0=C2=A0// =3D=3D=3D=3D=3D==3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D==3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D==3D=3D=3D



=C2=A0=C2=A0=i++;

=C2=A0=C2=A0retur=n marker;

}

=



=C2=A0=C2=A0 =C2=A0 // =3D=3D=3D=3D=3D=3D=3D This function handles sel=ections from the select box =3D=3D=3D=3D

// =3D=3D=3D If the dummy entry is selected, the info wi=ndow is closed =3D=3D

=function handleSelected(opt) {



=C2=A0=C2=A0var i =3D opt.s=electedIndex - 1;=C2=A0

=C2=A0=C2=A0if (i > -1) {

=C2=A0=C2=A0map.setZoom(7);



=C2=A0=C2=A0 =C2=A0GEvent.t=rigger(gmarkers[i],"click");

=C2=A0=C2=A0}

=C2=A0=C2=A0else {

=C2=A0=C2=A0 =C2=A0map.closeInfo=Window();

=C2=A0=C2=A0=}

}

// create the map



var map =3D new GMap2(doc=ument.getElementById("map"));

map.addControl(new GSmallZoomControl());

//map.addControl(new GMapTypeContr=ol());



// =3D=3D==3D=3D=3D=3D Restricting the range of Zoom Levels =3D=3D=3D=3D=3D

// Get the list of map types<=span style=3D"white-space: pre; ">



//var mt =3D map.getMapTy=pes();

// Overwrite =the getMinimumResolution() and getMaximumResolution() methods

//<=span style=3D"white-space: pre; ">for (var j=3D0; j<mt.length;= j++) {



//mt[j].getMinimumResolu=tion =3D function() {return 6;}

//mt[j].getMaximumResolution =3D function() {return 7;}

<=div>//}

<=span style=3D"white-space: pre; ">map.setCenter(new GLatLng(53.24=226352500856, -8.031005859375), 7);

//enable smooth zooming

map.enableContinuousZoom(=);

map.enableDoubleC=lickZoom();

// Read the data from 100.xml

GDownloadUrl("/xml/gmap_flaccentres.xml&quo=t;, function (doc) {

==C2=A0=C2=A0var xmlDoc =3D GXml.parse(doc);

=C2=A0=C2=A0var markers =3D= xmlDoc.documentElement.getElementsByTagName("marker");