Quicklinks and Categories - Desktop Liberation

Deprecated

Google has now stopped its Earth API and Maps API is a paid for API nowadays. Some capabilities have also been either removed or changed. Therefore, I had to remove all examples of VizMap applications I had created. I didn’t remove the entire topic as I thought some of the code may still be useful with some modifications.

Page Content hide

1 Navigating using quicklinks and categories

2 Try it out first ?

3 Category Filter

4 QuickLink

5 Starting on a particular category

6 Bounding Box

7 Complete Code

Navigating using quicklinks and categories

Get the sample application

Try it out first ?

For a summary step by step explanation see How to add quickLinks to a Map
If you just want a to try it, then you can download the example application (googleMapping.xlsm) and come back here later. First you should take a look at Adding markers to Google Maps from Excel since this is just an enhancement of that.

Category Filter

The javascript necessary for these enhancements is created from Excel as usual, and a new column is available to categorize your placemarkers. You can have as many categories as you want, and they can be whatever text you want. You can also have multiple columns of categories. Here is the example setup in the VenueMaster Tab of googleMapping.xlsm. Im using two category filters – venue size and country.

You will also see that the geoCoding Parameter Sheet needs to know the name of these columns if you are going to use filtering. You can change the column name to a list of columns that you want to filter on.

This generates this on the map

Selecting a category will hide all the markers apart from those belonging to the filters selected. The filters are additive.

If you dont want or need this, you can modify the body code in the geoCoding parameters sheet to remove the <DIV> – combocategory

<body onload="initialize()">
 <div id="comboquicklink" class = "mcquicklink">Quick Links</div>
 <div id="combocategory" class = "mccategory"></div>
 <div id="heading" class ="mcheading">Excel and Google Mapping Integration</b>
 
 <a href="http://rambings.mcpher.com">
  ramblings.mcpher.com</a></div>
 <div id="map_canvas" style="width: 100%; height: 90%"></div>
   
</body>

<div id="comboquicklink" class = "mcquicklink">Quick Links</div>

<div id="heading" class ="mcheading">Excel and Google Mapping Integration</b>

ramblings.mcpher.com</a></div>

</body>

QuickLink

The quicklink combox box contains a shortcut to each marker. Selecting a marker will navigate to that marker and bring up its infowindow

If you dont want or need this, you can modify the body code in the geoCoding parameters sheet to remove the <DIV> – comboquicklink

Starting on a particular category

If you want to start with a particular category selected, you can add a column to your data that looks like this. The first category name it comes across in this column will be the one on which it opens the map/ Note that if this applies to only the first of your category filters (you may have multiple).

Bounding Box

A bounding box attempts to set an appropriate zoom level for the data being shown – here is the code.

var cj = mcpherData.cJobject;
       var bounds = new google.maps.LatLngBounds();
     for ( var i = 0 ; i < cj.length;i++) {
      bounds.extend (new google.maps.LatLng(cj[i].lat,
      cj[i].lng));
     }

     if (!qparams['zoom']) qparams['zoom'] = 2;
     myOptions['zoom'] = parseInt(qparams['zoom']);
    // create the map
     gMap = new google.maps.Map(document.getElementById("map_canvas"),
         myOptions);
     gMap.fitBounds(bounds);

var cj = mcpherData.cJobject;

var bounds = new google.maps.LatLngBounds();

for ( var i = 0 ; i < cj.length;i++) {

bounds.extend (new google.maps.LatLng(cj[i].lat,

cj[i].lng));

}

if (!qparams['zoom']) qparams['zoom'] = 2;

myOptions['zoom'] = parseInt(qparams['zoom']);

// create the map

gMap = new google.maps.Map(document.getElementById("map_canvas"),

myOptions);

gMap.fitBounds(bounds);

Complete Code

Here is the code, including the data, that is generated from Excel for the VenueMaster Example

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body {
    height: 100%;
    margin: 0;
    padding: 0 ; 
    color: Gray ;
    background-color: WhiteSmoke;
  }
  #map_canvas { height: 100%}

.mcquicklink {
 margin-left: 20px;
 margin-right: 20px;
 display: inline;
 font-family: sans-serif;
 float: right;
}
.mccategory {
 margin-left: 20px;
 margin-right: 20px;
 display: inline;
 font-family: sans-serif;
 float: right;
}
.mcheading {
 display: inline;
 font-family: sans-serif;

 
}
</style>
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">

function mcpherDataPopulate() {
var mcpherData =   {
   "cJobject":[      {
         "title":"Rosemount theatre",
         "content":"\<b\>Rosemount theatre\</b\>\<br\>Rosemont\<br\> IL\<br\> USA\<br\>",
         "lat":"41.9891",
         "lng":"-87.871474",
         "color":"#20FF00",
         "size":"500000",
         "category":"big",
         "image":"http://maps.google.com/mapfiles/marker_orange.png"
      },
      {
         "title":"UNO Lakefront Arena",
         "content":"\<b\>UNO Lakefront Arena\</b\>\<br\>6801 Franklin Ave\<br\> New Orleans\<br\> LA 70122\<br\> USA\<br\>",
         "lat":"30.029015",
         "lng":"-90.0522531",
         "color":"#0000FF",
         "size":"200000",
         "category":"small",
         "image":""
      },
      {
         "title":"Intex",
         "content":"\<b\>Intex\</b\>\<br\>Nankokita\<br\> Suminoe Ward\<br\> Osaka\<br\> Osaka Prefecture 559-0034\<br\> Japan\<br\>",
         "lat":"34.6381228",
         "lng":"135.4253848",
         "color":"#00609F",
         "size":"300000",
         "category":"small",
         "image":""
      },
      {
         "title":"olympic park",
         "content":"\<b\>olympic park\</b\>\<br\>Olympic Park\<br\> 88 Bangi-dong\<br\> Songpa-gu\<br\> Seoul\<br\> South Korea\<br\>",
         "lat":"37.5198209",
         "lng":"127.1227901",
         "color":"#80FF00",
         "size":"600000",
         "category":"big",
         "image":""
      },
      {
         "title":"aktiv square",
         "content":"\<b\>aktiv square\</b\>\<br\>Ban Mai\<br\> Bang Yai\<br\> Nonthaburi 11140\<br\> Thailand\<br\>",
         "lat":"13.8448335",
         "lng":"100.3610179",
         "color":"#FF0000",
         "size":"1000000",
         "category":"big",
         "image":""
      },
      {
         "title":"red square",
         "content":"\<b\>red square\</b\>\<br\>Red Square\<br\> Moscow\<br\> Russia\<br\>",
         "lat":"55.7546345",
         "lng":"37.6214955",
         "color":"#0000FF",
         "size":"200000",
         "category":"small",
         "image":""
      },
      {
         "title":"heineken hall",
         "content":"\<b\>heineken hall\</b\>\<br\>Bullewijk\<br\> Arena Boulevard 590\<br\> 1101 Zuidoost\<br\> The Netherlands\<br\>",
         "lat":"52.3123574",
         "lng":"4.9441509",
         "color":"#00609F",
         "size":"300000",
         "category":"small",
         "image":""
      }
    ]
 };
return mcpherData; }


function initialize() {
    mcpherData= mcpherDataPopulate();
    if (mcpherData.cJobject.length > 0) {
     var myOptions = {
        center: new google.maps.LatLng(mcpherData.cJobject[0].lat, mcpherData.cJobject[0].lng),
        mapTypeId: google.maps.MapTypeId.ROADMAP
     };

    // get parameters if any
     var qparams = mcpherGetqparams();

     var cj = mcpherData.cJobject;
       var bounds = new google.maps.LatLngBounds();
     for ( var i = 0 ; i < cj.length;i++) {
      bounds.extend (new google.maps.LatLng(cj[i].lat,
      cj[i].lng));
     }

     if (!qparams['zoom']) qparams['zoom'] = 2;
     myOptions['zoom'] = parseInt(qparams['zoom']);
    // create the map
     gMap = new google.maps.Map(document.getElementById("map_canvas"),
         myOptions);
     gMap.fitBounds(bounds);

    // add the excel data 

     for ( var i = 0 ; i < cj.length;i++) {
        mcpherAddMarker ( cj[i]);
     }


    // Set up combox
     quickLink();
    category();
    }
  }


function mcpherAddMarker(cj) {
 var p = new google.maps.LatLng(cj.lat,cj.lng);

  if (cj.size) {
      var circle =  {
         strokeColor: cj.color,
         strokeOpacity: 0.8,
         strokeWeight: 1,
         fillColor: cj.color,
         fillOpacity: 0.20,
         map: gMap,
         center: p,
         radius: parseFloat(cj.size),
      };
     var drawCirle =
          new google.maps.Circle(circle);    
  }

  var marker = new google.maps.Marker({
      position:  p,
      map: gMap,
      title: cj.title
   });
   cj.marker = marker;
   infowindow=null;
   if(cj.image)marker.setIcon(cj.image);
   if (cj.content){
      infowindow = new google.maps.InfoWindow({
          content: cj.content
     });
     google.maps.event.addListener(marker, 'click', function() {
         infowindow.open(gMap,marker);
     });
   }
   cj.infowindow =infowindow;
   return marker;
}

function mcpherGetqparams(){
     var qparams = new Array();
  var htmlquery = window.location.search.substring(1);
  var htmlparams = htmlquery.split('&');
  for ( var i=0; i < htmlparams.length;i++) {
   var k = htmlparams[i].indexOf('=');
   if (k > 0) qparams[ htmlparams[i].substring(0,k) ] = decodeURI(htmlparams [i].substring(k+1));
   return qparams;
  }
   }

 function dealWithQuickLink(selValue) {
    var cj = mcpherData.cJobject[selValue];
     if (cj.infowindow) {
      cj.infowindow.open(gMap,cj.marker);
     }
    return cj.infowindow;
 }
 function dealWithCategories(selValue) {
     var cats = createCategories();
    var cj = mcpherData.cJobject;
      for (i=0; i < cj.length;i++ ) {
        cj[i].marker.setVisible (selValue ==0 || cats[selValue]== cj[i].category);
      }
    return cats[selValue];
 }
 function quickLink() {
  var comboElem = document.getElementById('comboquicklink');
  if (comboElem) {
        var selElem = document.createElement('select');
    var cj = mcpherData.cJobject;
    mcpherAddEvent (selElem,"change",function(){
        dealWithQuickLink(selElem.value);
        },false ,true) ;
    for ( var i=0; i < cj.length;i++){
        var o = document.createElement('option');
           o.text = cj[i].title;
        o.value = i;
        try {
            selElem.add(o,null);
        }
        catch(error) {
            selElem.add(o);
        }
    }
    comboElem.appendChild(selElem);
  }
}
function createCategories() {
    var cats =[];
     cats.push('all categories');
    var cj = mcpherData.cJobject;
    for ( var i=0; i < cj.length;i++){
        if (cats.indexOf(cj[i].category) == -1 ) cats.push(cj[i].category);
    }
    return cats;
}
function category() {
  var comboElem = document.getElementById('combocategory');
  if (comboElem) {
    var selElem = document.createElement('select');
     var cats = createCategories();
    mcpherAddEvent (selElem,"change",function(){
        dealWithCategories(selElem.value);
        },false ,true) ;
    for ( var i=0; i < cats.length;i++){
        var o = document.createElement('option');
           o.text = cats[i];
        o.value = i;
        try {
            selElem.add(o,null);
        }
        catch(error) {
            selElem.add(o);
        }
    }
    comboElem.appendChild(selElem);
  }
}
 function mcpherAddEvent (o,e,f,b,complain){
  // because IE is different
  if(o.addEventListener)
   return(o.addEventListener(e, f, b));

  else
   if (o.attachEvent)
    return(o.attachEvent('on' + e, f));
   else
    if (complain)
     alert ('browser doesnt support events');


  return(null);

 }
var mcpherData;
var gMap;
</script>
</head>

<body onload="initialize()">
 <div id="comboquicklink" class = "mcquicklink">Quick Links</div>
 <div id="combocategory" class = "mccategory">Category Filter</div>
 <div id="heading" class ="mcheading">Excel and Google Mapping Integration</b>
 
 <a href="http://rambings.mcpher.com">
  ramblings.mcpher.com</a></div>
 <div id="map_canvas" style="width: 100%; height: 90%"></div>
   
</body>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

<!DOCTYPE html>

<html>

<head>

html { height: 100% }

body {

height: 100%;

margin: 0;

padding: 0 ;

color: Gray ;

background-color: WhiteSmoke;

}

#map_canvas { height: 100%}

.mcquicklink {

margin-left: 20px;

margin-right: 20px;

display: inline;

font-family: sans-serif;

float: right;

}

.mccategory {

margin-left: 20px;

margin-right: 20px;

display: inline;

font-family: sans-serif;

float: right;

}

.mcheading {

display: inline;

font-family: sans-serif;

}

</style>

src="http://maps.googleapis.com/maps/api/js?sensor=false">

</script>

function mcpherDataPopulate() {

var mcpherData = {

"cJobject":[ {

"title":"Rosemount theatre",

"content":"\<b\>Rosemount theatre\</b\>\<br\>Rosemont\<br\> IL\<br\> USA\<br\>",

"lat":"41.9891",

"lng":"-87.871474",

"color":"#20FF00",

"size":"500000",

"category":"big",

"image":"http://maps.google.com/mapfiles/marker_orange.png"

{

"title":"UNO Lakefront Arena",

"content":"\<b\>UNO Lakefront Arena\</b\>\<br\>6801 Franklin Ave\<br\> New Orleans\<br\> LA 70122\<br\> USA\<br\>",

"lat":"30.029015",

"lng":"-90.0522531",

"color":"#0000FF",

"size":"200000",

"category":"small",

"image":""

{

"title":"Intex",

"content":"\<b\>Intex\</b\>\<br\>Nankokita\<br\> Suminoe Ward\<br\> Osaka\<br\> Osaka Prefecture 559-0034\<br\> Japan\<br\>",

"lat":"34.6381228",

"lng":"135.4253848",

"color":"#00609F",

"size":"300000",

"category":"small",

"image":""

{

"title":"olympic park",

"content":"\<b\>olympic park\</b\>\<br\>Olympic Park\<br\> 88 Bangi-dong\<br\> Songpa-gu\<br\> Seoul\<br\> South Korea\<br\>",

"lat":"37.5198209",

"lng":"127.1227901",

"color":"#80FF00",

"size":"600000",

"category":"big",

"image":""

{

"title":"aktiv square",

"content":"\<b\>aktiv square\</b\>\<br\>Ban Mai\<br\> Bang Yai\<br\> Nonthaburi 11140\<br\> Thailand\<br\>",

"lat":"13.8448335",

"lng":"100.3610179",

"color":"#FF0000",

"size":"1000000",

"category":"big",

"image":""

{

"title":"red square",

"content":"\<b\>red square\</b\>\<br\>Red Square\<br\> Moscow\<br\> Russia\<br\>",

"lat":"55.7546345",

"lng":"37.6214955",

"color":"#0000FF",

"size":"200000",

"category":"small",

"image":""

{

"title":"heineken hall",

"content":"\<b\>heineken hall\</b\>\<br\>Bullewijk\<br\> Arena Boulevard 590\<br\> 1101 Zuidoost\<br\> The Netherlands\<br\>",

"lat":"52.3123574",

"lng":"4.9441509",

"color":"#00609F",

"size":"300000",

"category":"small",

"image":""

}

]

};

return mcpherData; }

function initialize() {

mcpherData= mcpherDataPopulate();

if (mcpherData.cJobject.length > 0) {

var myOptions = {

center: new google.maps.LatLng(mcpherData.cJobject[0].lat, mcpherData.cJobject[0].lng),

mapTypeId: google.maps.MapTypeId.ROADMAP

};

// get parameters if any

var qparams = mcpherGetqparams();

var cj = mcpherData.cJobject;

var bounds = new google.maps.LatLngBounds();

for ( var i = 0 ; i < cj.length;i++) {

bounds.extend (new google.maps.LatLng(cj[i].lat,

cj[i].lng));

}

if (!qparams['zoom']) qparams['zoom'] = 2;

myOptions['zoom'] = parseInt(qparams['zoom']);

// create the map

gMap = new google.maps.Map(document.getElementById("map_canvas"),

myOptions);

gMap.fitBounds(bounds);

// add the excel data

for ( var i = 0 ; i < cj.length;i++) {

mcpherAddMarker ( cj[i]);

}

// Set up combox

quickLink();

category();

}

function mcpherAddMarker(cj) {

var p = new google.maps.LatLng(cj.lat,cj.lng);

if (cj.size) {

var circle = {

strokeColor: cj.color,

strokeOpacity: 0.8,

strokeWeight: 1,

fillColor: cj.color,

fillOpacity: 0.20,

map: gMap,

center: p,

radius: parseFloat(cj.size),

};

var drawCirle =

new google.maps.Circle(circle);

}

var marker = new google.maps.Marker({

position: p,

map: gMap,

title: cj.title

});

cj.marker = marker;

infowindow=null;

if(cj.image)marker.setIcon(cj.image);

if (cj.content){

infowindow = new google.maps.InfoWindow({

content: cj.content

});

google.maps.event.addListener(marker, 'click', function() {

infowindow.open(gMap,marker);

});

}

cj.infowindow =infowindow;

return marker;

}

function mcpherGetqparams(){

var qparams = new Array();

var htmlquery = window.location.search.substring(1);

var htmlparams = htmlquery.split('&');

for ( var i=0; i < htmlparams.length;i++) {

var k = htmlparams[i].indexOf('=');

if (k > 0) qparams[ htmlparams[i].substring(0,k) ] = decodeURI(htmlparams [i].substring(k+1));

return qparams;

}

function dealWithQuickLink(selValue) {

var cj = mcpherData.cJobject[selValue];

if (cj.infowindow) {

cj.infowindow.open(gMap,cj.marker);

}

return cj.infowindow;

}

function dealWithCategories(selValue) {

var cats = createCategories();

var cj = mcpherData.cJobject;

for (i=0; i < cj.length;i++ ) {

cj[i].marker.setVisible (selValue ==0 || cats[selValue]== cj[i].category);

}

return cats[selValue];

}

function quickLink() {

var comboElem = document.getElementById('comboquicklink');

if (comboElem) {

var selElem = document.createElement('select');

var cj = mcpherData.cJobject;

mcpherAddEvent (selElem,"change",function(){

dealWithQuickLink(selElem.value);

},false ,true) ;

for ( var i=0; i < cj.length;i++){

var o = document.createElement('option');

o.text = cj[i].title;

o.value = i;

try {

selElem.add(o,null);

}

catch(error) {

selElem.add(o);

}

comboElem.appendChild(selElem);

}

function createCategories() {

var cats =[];

cats.push('all categories');

var cj = mcpherData.cJobject;

for ( var i=0; i < cj.length;i++){

if (cats.indexOf(cj[i].category) == -1 ) cats.push(cj[i].category);

}

return cats;

}

function category() {

var comboElem = document.getElementById('combocategory');

if (comboElem) {

var selElem = document.createElement('select');

var cats = createCategories();

mcpherAddEvent (selElem,"change",function(){

dealWithCategories(selElem.value);

},false ,true) ;

for ( var i=0; i < cats.length;i++){

var o = document.createElement('option');

o.text = cats[i];

o.value = i;

try {

selElem.add(o,null);

}

catch(error) {

selElem.add(o);

}

comboElem.appendChild(selElem);

}

function mcpherAddEvent (o,e,f,b,complain){

// because IE is different

if(o.addEventListener)

return(o.addEventListener(e, f, b));

else

if (o.attachEvent)

return(o.attachEvent('on' + e, f));

else

if (complain)

alert ('browser doesnt support events');

return(null);

}

var mcpherData;

var gMap;

</script>

</head>

<div id="comboquicklink" class = "mcquicklink">Quick Links</div>

<div id="combocategory" class = "mccategory">Category Filter</div>

<div id="heading" class ="mcheading">Excel and Google Mapping Integration</b>

ramblings.mcpher.com</a></div>

</body>

In the meantime why not join our forum, follow the blog or follow me on twitter to ensure you get updates when they are available, or read more about Overlaying circles and heatmaps or Mapping and adding markers to maps