Solved

How to trigger Google Map Marker on External HTML or Javascript

Posted on 2010-09-06
12
975 Views
Last Modified: 2012-05-10
Hi,

I have this page
http://international.glasscurtains.net/buy-glass-curtains.asp?access=ABC123

I want to be able to open the markers - I want to have a list of all the designated distribution points and as you click on them it will open the marker in the google map. I would rather not use an infowindow for styling reasons.

Any ideas?

Thanks,

Ben
<script type="text/javascript">

//<![CDATA[

var map;

var icon0;

var newpoints = new Array();

 

function addLoadEvent(func) { 

	var oldonload = window.onload; 

	if (typeof window.onload != 'function'){ 

		window.onload = func

	} else { 

		window.onload = function() {

			oldonload();

			func();

		}

	}

}

 

addLoadEvent(loadMap);

addLoadEvent(addPoints);

 

function loadMap() {

	map = new GMap2(document.getElementById("map"));

	map.addControl(new GLargeMapControl());

	map.addControl(new GMapTypeControl());

	map.setCenter(new GLatLng( 9.1088986592431382, -56.6015625), 2);

	map.setMapType(G_NORMAL_MAP);

 

	icon0 = new GIcon();

	icon0.image = "http://www.google.com/mapfiles/marker.png";

	icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";

	icon0.iconSize = new GSize(20, 34);

	icon0.shadowSize = new GSize(37, 34);

	icon0.iconAnchor = new GPoint(9, 34);

	icon0.infoWindowAnchor = new GPoint(9, 2);

	icon0.infoShadowAnchor = new GPoint(18, 25);

}

 

function addPoints() {

 // Spain

	newpoints[0] = new Array(36.542372, -4.652312, icon0, 'Glass Curtains International Headquarters', '<h1>Glass Curtains International HQ</h1><img class="alignright" src="images/logo-contact.jpg" />Camino de Coín, Km 2, Nave 8<br>Poligono Industrial La Vega del Cañadon <br>29650 Mijas Costa Málaga - España<br><br><span class="address">Tel:</span> +34 952 465 746 <br><span class="address">Fax:</span> +34 952 468 076 <br><span class="address">Email:</span> <a href="mailto:info@glasscurtains.es">info@glasscurtains.es</a><br>');



	// Australia

	newpoints[1] = new Array(-33.8319444, 151.2094444, icon0, 'Brio', '<h1>BRIO</h1>C5, 391 Park Road,<br>Regents Park, NSW Australia, 2143<br><br><span class="address">Tel:</span> +61 2 8718 6718 <br><span class="address">Email:</span> <a href="mailto:pvernon@brio.com.au">pvernon@brio.com.au</a><br><span class="address">Web:</span> <a href="http://www.brio.com.au" target="_blank">www.brio.com.au</a> ');

	newpoints[2] = new Array(-33.846522, 151.072174, icon0, 'Brio', '<h1>Steve Kirby</h1>P.O. Box 16, North Sidney, NSW Australia, 2143<br><br><span class="address">Tel:</span> +61 04 2066 9971 <br>');

	

	// Brazil

	newpoints[3] = new Array(-23.5135506, -46.7194463, icon0, 'NEOVIDRO Vidros e Serviços Ltda', '<h1>NEOVIDRO Vidros e Serviços Ltda</h1>Rua Alvarenga Peixoto, 527<br>Vila Anastácio - São Paulo - SP<br>CEP 05095-010-Brasil<br><br><span class="address">Tel:</span> +55 11 7763 4010<br><span class="address">NexTel:</span> 85*52852 <br><span class="address">Email:</span> <a href="mailto:sergio@neovidro.br">sergio@neovidro.br</a><br><span class="address">Web:</span> <a href="http://www.neovidro.com.br" target="_blank">www.neovidro.com.br</a>');

		

	// Canada

	newpoints[4] = new Array(49.884948, -97.1825808, icon0, 'AluMen Ltd', '<h1>AluMen Ltd</h1>595 Wall Street, Winnipeg<br>MB R3G 2T5<br>Canada<br><br><span class="address">Tel:</span> (204) 415-6116<br><span class="address">Fax:</span> (204) 415-6177 <br><span class="address">Email:</span> <a href="mailto:phil@alumen.ca">phil@alumen.ca</a><br><span class="address">Web:</span> <a href="http://www.alumen.ca" target="_blank">www.alumen.ca</a>');

	

	// Chile

	newpoints[5] = new Array(-33.4356132, -70.6785194, icon0, 'Tecnovent Ltda. ', '<h1>Tecnovent Ltda. </h1>San Pablo 3125. Santiago. <br>Chile<br><br><span class="address">Tel:</span>(56 2) 681 5585<br><span class="address">Fax:</span> (56 2) 682 4808 <br><span class="address">Email:</span> <a href="mailto:ssarmiento@tecnovent.cl">ssarmiento@tecnovent.cl</a><br><span class="address">Web:</span> <a href="http://www.tecnovent.cl/" target="_blank">www.tecnovent.cl</a>');

	

	newpoints[6] = new Array(-33.4241935, -70.6114762, icon0, 'P y S  INGENIEROS ASOCIADOS Ltda. ', '<h1>P y S INGENIEROS ASOCIADOS Ltda. </h1>Av. 11 de Septiembre,<br>2155 Edificio Panorámico,<br>Torre A Oficina 804 Providencia<br><br>Chile<br><br><span class="address">Tel:</span>(56 2) 334 1140 <br><span class="address">Email:</span> <a href="mailto:pzabala@pys.cl">pzabala@pys.cl</a><br><span class="address">Web:</span> <a href="http://www.pys.cl/" target="_blank">www.pys.cl</a>');

	

	// Egypt

	newpoints[7] = new Array(31.1880781, 29.9212258, icon0, 'SKYY Glass Co.', '<h1>SKYY Glass Co.</h1>358 Canal Mahmoudeya st.<br>Alexandria<br>Egypt<br><br><span class="address">Tel:</span> 2 03 2025168 <br><span class="address">Fax:</span> 2 03 4283331 <br><span class="address">Email:</span> <a href="mailto:info@eldibgroup.com">info@eldibgroup.com</a><br><span class="address">Web:</span> <a href="http://www.eldibgroup.com/" target="_blank">www.eldibgroup.com</a>');

	

	// Iceland

	newpoints[8] = new Array(64.1367206, -21.9037127, icon0, 'Gler og Stal ehf.', '<h1>Gler og Stal ehf.</h1>Brautarholti 18<br>105 Reykjavík<br>Iceland<br><br><span class="address">Tel:</span> 354 562 04 04<br><span class="address">Email:</span> <a href="mailto:stigi@stigi.is">stigi@stigi.is</a><br><span class="address">Web:</span> <a href="http://www.stigi.is" target="_blank">www.stigi.is</a>');

	

	// Indonesia

	 newpoints[9] = new Array(-6.2087284, 106.9299579, icon0, 'TRUVUE DOORS ', '<h1>TRUVUE DOORS </h1>Kawasan Industri Pulo Gadung<br>Jl. Pulo Gadung no 31</br>Jakarta - 13930, Indonesia<br><br><span class="address">Tel:</span> 622193300015<br><span class="address">Fax:</span> +62 21 460 0092  <br><span class="address">Email:</span> <a href="mailto:sales@truvuedoors.co.id ">sales@truvuedoors.co.id</a><br><span class="address">Web:</span> <a href="http://www.truvuedoors.co.id " target="_blank">www.truvuedoors.co.id </a>');

	

	// Lebanon

	newpoints[10] = new Array(33.8886289, 35.4954794, icon0, 'MIDDLE EAST BUSINESS GROUP FOR IMPORT & EXPORT ', '<h1>MIDDLE EAST BUSINESS GROUP FOR IMPORT & EXPORT </h1>Jisr El Bacha Street - Boulos Building<br>P.O.Box: 45-422 Hazmieh</br>Beirut, Lebanon<br><br><span class="address">Tel:</span> +961 1 511 081 / +961 1 511 028<br><span class="address">Fax:</span> +961 1 511 071 <br><span class="address">Email:</span> <a href="mailto:mebg@wise.net.lb">mebg@wise.net.lb</a><br>');

	

	// Malta

	

	// Mexico

	newpoints[11] = new Array(19.5533567, -99.1551943, icon0, 'Mexiglass Solutions', '<h1>Mexiglass Solutions</h1>Boulevard Quintana Colosio,<br>SM. 309 M. 11, LO4-01<br>Bodega 14 Cancun<br>Quitana, ROD<br>Mexico 77560<br><br><span class="address">Tel:</span> +998-882-1073<br>');

		

	// Netherlands

	newpoints[12] = new Array(51.4993153, 5.4037038, icon0, 'Aluma B.V.', '<h1>Aluma B.V.</h1>Magazijnweg 3 5683 CV Best <br>The Netherlands<br><br><span class="address">Tel:</span> +499 393538<br><span class="address">Mob:</span> 06 22545233<br><span class="address">Fax:</span> +499 390026 <br><span class="address">Email:</span> <a href="mailto:m.vanheeswijk@aluma.nl">m.vanheeswijk@aluma.nl</a>');





	//Portugal

	newpoints[13] = new Array(37.1439597, -8.5364418, icon0, 'Flexiespelho Lda.  ', '<h1>Flexiespelho Lda.  </h1>Ur. Vila Rosa, Lt 9, Loja 7<br>8500 Portimão<br>Algarve, Portugal<br><br><span class="address">Tel:</span> +351 91 960 21 50<br>');

	

	//Qatar

	newpoints[14] = new Array(25.354826, 51.183884, icon0, 'Spectra Arts', '<h1>Spectra Arts</h1>Qatar<br>United Arab Emirates<br><br><span class="address">Tel:</span> +974 4 581112<br><span class="address">Email:</span> <a href="mailto:info@spectraarts.com">info@spectraarts.com</a><br><span class="address">Web:</span> <a href="http://www.spectraarts.com/" target="_blank">www.spectraarts.com 	</a>');

	

	//UAE	

	newpoints[15] = new Array(25.1166667, 56.35, icon0, 'Alpha Aluminium &amp; Glass', '<h1>Alpha Aluminium &amp; Glass</h1>Fujairah, United Arab Emirates<br><br><span class="address">Tel:</span> +971 2 227895');

	newpoints[16] = new Array(25.2666503, 55.3337049, icon0, 'Aramis Interiors LLC', '<h1>Aramis Interiors LLC</h1>Building No.1, Street No.21<br>Al Khabaisi, Dubai, U.A.E<br><br><span class="address">Tel:</span> +971 4 2692777<br>');

	newpoints[17] = new Array(25.2644444, 55.3116667, icon0, 'Glass Curtains Middle East HQ', '<h1>Glass Curtains Middle East HQ</h1><img class="alignright" src="images/logo-contact.jpg" />Emirate Towers Office,<br>Level 26B <br>P.O. BOX 504929, Dubai<br><br><span class="address">Tel:</span> 00 971 433 00110  <br><span class="address">Fax:</span> 00 971 433 00112  <br><span class="address">Email:</span> <a href="mailto:info@glasscurtains.es">info@glasscurtains.es</a><br>');

	

	//UK

	newpoints[18] = new Array(51.9130666, -0.4810728, icon0, 'Sunseeker Doors Ltd', '<h1>Sunseeker Doors Ltd</h1>Unit 1, Bay Close,<br>Progress Way, Luton<br>LU4 9UP<br>U.K.<br><br><span class="address">Tel:</span> +01582 492 730<br><span class="address">Email:</span> <a href="mailto:info@sunseekerdoors.co.uk">info@sunseekerdoors.co.uk</a><br><span class="address">Web:</span> <a href="http://www.sunseekerdoors.co.uk " target="_blank">www.sunseekerdoors.co.uk </a>');

	

	newpoints[19] = new Array(53.8716218, -1.9046369, icon0, 'Emerald Glass Ltd', '<h1>Emerald Glass Ltd</h1>Unit A, Spearhead Way<br>Keighley BD21 3LA<br>U.K.<br><br><span class="address">Tel:</span> +01535 681525<br>');

	

	newpoints[20] = new Array(53.4893278, -2.1073145, icon0, 'Apropos Tectonic Ltd', '<h1>Apropos Tectonic Ltd</h1>Greenside House, Richmond Street,<br>Ashton-under-Lyne OL6 7ES<br>U.K.<br><br><span class="address">Tel:</span> +44 (0) 161-342-8200<br><span class="address">Fax:</span> +44 (0) 161-342-8249<br><span class="address">Email:</span> <a href="mailto:info@apropos-tectonic.com">info@apropos-tectonic.com</a><br><span class="address">Web:</span> <a href="http://www.apropos-tectonic.com " target="_blank">www.apropos-tectonic.com </a>');

	

	

	//USA

	newpoints[21] = new Array(32.8877266, -117.091176, icon0, 'Truwindows', '<h1>Truwindows</h1>10107 Carroll Canyon road<br>San Diego, CA 92131<br>U.S.A.<br><br><span class="address">Tel:</span> +310-702-4957<br><span class="address">Email:</span> <a href="mailto:davidg@truwindows.com">davidg@truwindows.com</a><br><span class="address">Web:</span> <a href="http://www.truwindows.com" target="_blank">www.truwindows.com</a>');

	

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

		var point = new GPoint(newpoints[i][1],newpoints[i][0]);

		var popuphtml = newpoints[i][4] ;

		var marker = createMarker(point,newpoints[i][2],popuphtml);

		map.addOverlay(marker);

	}

}

 

function createMarker(point, icon, popuphtml) {

	var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";

	var marker = new GMarker(point, icon);

	GEvent.addListener(marker, "click", function() {

		marker.openInfoWindowHtml(popuphtml);

	});

	return marker;

}





//]]>

</script>



</head>

<body>

I want to place the link in here somewhere...

Open in new window

0
Comment
Question by:intangiblemedia
  • 6
  • 5
12 Comments
 
LVL 18

Expert Comment

by:Matthew Kelly
ID: 33622689
You should be able to call openInfoWindowHtml from javascript outside of the map by referencing the marker index, like the code below.


Alternatively you can have javascript populate a div programmatically, here are some examples:

http://econym.org.uk/gmap/basic2.htm

If you view source on the example it makes things clearer.
http://econym.org.uk/gmap/example_map2.htm

Those methods should allow to open a Google Maps marker from outside the map
<a href="#" onclick="javascript:newpoints[20].openInfoWindowHtml('<h1>Apropos Tectonic Ltd</h1>Greenside House, Richmond Street,<br>Ashton-under-Lyne OL6 7ES<br>U.K.<br><br><span class="address">Tel:</span> +44 (0) 161-342-8200<br><span class="address">Fax:</span> +44 (0) 161-342-8249<br><span class="address">Email:</span> <a href="mailto:info@apropos-tectonic.com">info@apropos-tectonic.com</a><br><span class="address">Web:</span> <a href="http://www.apropos-tectonic.com " target="_blank">www.apropos-tectonic.com </a>');">Apropos Tectonic Ltd</a>

Open in new window

0
 

Author Comment

by:intangiblemedia
ID: 33623369
I tried it but it doesnt work ??
0
 
LVL 18

Expert Comment

by:Matthew Kelly
ID: 33623596
Here is working solution outputting all of them to the sidebar:
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAATH9QDyayJ8XDP5oxjDMKwRRhKTcy-fmZ8M2OWNCsiKyqs5LbChQnkSFn4q-lmr1FazjuYlRIOmFAPA"></script> 
<script type="text/javascript">
//<![CDATA[
      

      // this variable will collect the html which will eventually be placed in the side_bar
      var side_bar_html = "";
    
      // arrays to hold copies of the markers and html used by the side_bar
      // because the function closure trick doesnt work there
      var gmarkers = [];

var map;
var icon0;
var newpoints = new Array();
 
function addLoadEvent(func) { 
	var oldonload = window.onload; 
	if (typeof window.onload != 'function'){ 
		window.onload = func
	} else { 
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
 
addLoadEvent(loadMap);
addLoadEvent(addPoints);
 
function loadMap() {
	map = new GMap2(document.getElementById("map"));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.setCenter(new GLatLng( 9.1088986592431382, -56.6015625), 2);
	map.setMapType(G_NORMAL_MAP);
 
	icon0 = new GIcon();
	icon0.image = "http://www.google.com/mapfiles/marker.png";
	icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
	icon0.iconSize = new GSize(20, 34);
	icon0.shadowSize = new GSize(37, 34);
	icon0.iconAnchor = new GPoint(9, 34);
	icon0.infoWindowAnchor = new GPoint(9, 2);
	icon0.infoShadowAnchor = new GPoint(18, 25);
}
 
function addPoints() {

 // Spain
	newpoints[0] = new Array(36.542372, -4.652312, icon0, 'Glass Curtains International Headquarters', '<h1>Glass Curtains International HQ</h1><img class="alignright" src="images/logo-

contact.jpg" />Camino de Coín, Km 2, Nave 8<br>Poligono Industrial La Vega del Cañadon <br>29650 Mijas Costa Málaga - España<br><br><span class="address">Tel:</span> +34 952 465 746 <br><span 

class="address">Fax:</span> +34 952 468 076 <br><span class="address">Email:</span> <a href="mailto:info@glasscurtains.es">info@glasscurtains.es</a><br>');

	// Australia
	newpoints[1] = new Array(-33.8319444, 151.2094444, icon0, 'Brio', '<h1>BRIO</h1>C5, 391 Park Road,<br>Regents Park, NSW Australia, 2143<br><br><span class="address">Tel:</span> +61 2 8718 

6718 <br><span class="address">Email:</span> <a href="mailto:pvernon@brio.com.au">pvernon@brio.com.au</a><br><span class="address">Web:</span> <a href="http://www.brio.com.au" 

target="_blank">www.brio.com.au</a> ');
	newpoints[2] = new Array(-33.846522, 151.072174, icon0, 'Brio', '<h1>Steve Kirby</h1>P.O. Box 16, North Sidney, NSW Australia, 2143<br><br><span class="address">Tel:</span> +61 04 2066 9971 

<br>');
	
	// Brazil
	newpoints[3] = new Array(-23.5135506, -46.7194463, icon0, 'NEOVIDRO Vidros e Serviços Ltda', '<h1>NEOVIDRO Vidros e Serviços Ltda</h1>Rua Alvarenga Peixoto, 527<br>Vila Anastácio - São 

Paulo - SP<br>CEP 05095-010-Brasil<br><br><span class="address">Tel:</span> +55 11 7763 4010<br><span class="address">NexTel:</span> 85*52852 <br><span class="address">Email:</span> <a 

href="mailto:sergio@neovidro.br">sergio@neovidro.br</a><br><span class="address">Web:</span> <a href="http://www.neovidro.com.br" target="_blank">www.neovidro.com.br</a>');
		
	// Canada
	newpoints[4] = new Array(49.884948, -97.1825808, icon0, 'AluMen Ltd', '<h1>AluMen Ltd</h1>595 Wall Street, Winnipeg<br>MB R3G 2T5<br>Canada<br><br><span class="address">Tel:</span> (204) 

415-6116<br><span class="address">Fax:</span> (204) 415-6177 <br><span class="address">Email:</span> <a href="mailto:phil@alumen.ca">phil@alumen.ca</a><br><span class="address">Web:</span> <a 

href="http://www.alumen.ca" target="_blank">www.alumen.ca</a>');
	
	// Chile
	newpoints[5] = new Array(-33.4356132, -70.6785194, icon0, 'Tecnovent Ltda. ', '<h1>Tecnovent Ltda. </h1>San Pablo 3125. Santiago. <br>Chile<br><br><span class="address">Tel:</span>(56 2) 

681 5585<br><span class="address">Fax:</span> (56 2) 682 4808 <br><span class="address">Email:</span> <a href="mailto:ssarmiento@tecnovent.cl">ssarmiento@tecnovent.cl</a><br><span 

class="address">Web:</span> <a href="http://www.tecnovent.cl/" target="_blank">www.tecnovent.cl</a>');
	
	newpoints[6] = new Array(-33.4241935, -70.6114762, icon0, 'P y S  INGENIEROS ASOCIADOS Ltda. ', '<h1>P y S INGENIEROS ASOCIADOS Ltda. </h1>Av. 11 de Septiembre,<br>2155 Edificio 

Panorámico,<br>Torre A Oficina 804 Providencia<br><br>Chile<br><br><span class="address">Tel:</span>(56 2) 334 1140 <br><span class="address">Email:</span> <a 

href="mailto:pzabala@pys.cl">pzabala@pys.cl</a><br><span class="address">Web:</span> <a href="http://www.pys.cl/" target="_blank">www.pys.cl</a>');
	
	// Egypt
	newpoints[7] = new Array(31.1880781, 29.9212258, icon0, 'SKYY Glass Co.', '<h1>SKYY Glass Co.</h1>358 Canal Mahmoudeya st.<br>Alexandria<br>Egypt<br><br><span class="address">Tel:</span> 2 

03 2025168 <br><span class="address">Fax:</span> 2 03 4283331 <br><span class="address">Email:</span> <a href="mailto:info@eldibgroup.com">info@eldibgroup.com</a><br><span 

class="address">Web:</span> <a href="http://www.eldibgroup.com/" target="_blank">www.eldibgroup.com</a>');
	
	// Iceland
	newpoints[8] = new Array(64.1367206, -21.9037127, icon0, 'Gler og Stal ehf.', '<h1>Gler og Stal ehf.</h1>Brautarholti 18<br>105 Reykjavík<br>Iceland<br><br><span class="address">Tel:</span> 

354 562 04 04<br><span class="address">Email:</span> <a href="mailto:stigi@stigi.is">stigi@stigi.is</a><br><span class="address">Web:</span> <a href="http://www.stigi.is" 

target="_blank">www.stigi.is</a>');
	
	// Indonesia
	 newpoints[9] = new Array(-6.2087284, 106.9299579, icon0, 'TRUVUE DOORS ', '<h1>TRUVUE DOORS </h1>Kawasan Industri Pulo Gadung<br>Jl. Pulo Gadung no 31</br>Jakarta - 13930, 

Indonesia<br><br><span class="address">Tel:</span> 622193300015<br><span class="address">Fax:</span> +62 21 460 0092  <br><span class="address">Email:</span> <a href="mailto:sales@truvuedoors.co.id 

">sales@truvuedoors.co.id</a><br><span class="address">Web:</span> <a href="http://www.truvuedoors.co.id " target="_blank">www.truvuedoors.co.id </a>');
	
	// Lebanon
	newpoints[10] = new Array(33.8886289, 35.4954794, icon0, 'MIDDLE EAST BUSINESS GROUP FOR IMPORT & EXPORT ', '<h1>MIDDLE EAST BUSINESS GROUP FOR IMPORT & EXPORT </h1>Jisr El Bacha Street - 

Boulos Building<br>P.O.Box: 45-422 Hazmieh</br>Beirut, Lebanon<br><br><span class="address">Tel:</span> +961 1 511 081 / +961 1 511 028<br><span class="address">Fax:</span> +961 1 511 071 <br><span 

class="address">Email:</span> <a href="mailto:mebg@wise.net.lb">mebg@wise.net.lb</a><br>');
	
	// Malta
	
	// Mexico
	newpoints[11] = new Array(19.5533567, -99.1551943, icon0, 'Mexiglass Solutions', '<h1>Mexiglass Solutions</h1>Boulevard Quintana Colosio,<br>SM. 309 M. 11, LO4-01<br>Bodega 14 

Cancun<br>Quitana, ROD<br>Mexico 77560<br><br><span class="address">Tel:</span> +998-882-1073<br>');
		
	// Netherlands
	newpoints[12] = new Array(51.4993153, 5.4037038, icon0, 'Aluma B.V.', '<h1>Aluma B.V.</h1>Magazijnweg 3 5683 CV Best <br>The Netherlands<br><br><span class="address">Tel:</span> +499 

393538<br><span class="address">Mob:</span> 06 22545233<br><span class="address">Fax:</span> +499 390026 <br><span class="address">Email:</span> <a 

href="mailto:m.vanheeswijk@aluma.nl">m.vanheeswijk@aluma.nl</a>');


	//Portugal
	newpoints[13] = new Array(37.1439597, -8.5364418, icon0, 'Flexiespelho Lda.  ', '<h1>Flexiespelho Lda.  </h1>Ur. Vila Rosa, Lt 9, Loja 7<br>8500 Portimão<br>Algarve, Portugal<br><br><span 

class="address">Tel:</span> +351 91 960 21 50<br>');
	
	//Qatar
	newpoints[14] = new Array(25.354826, 51.183884, icon0, 'Spectra Arts', '<h1>Spectra Arts</h1>Qatar<br>United Arab Emirates<br><br><span class="address">Tel:</span> +974 4 581112<br><span 

class="address">Email:</span> <a href="mailto:info@spectraarts.com">info@spectraarts.com</a><br><span class="address">Web:</span> <a href="http://www.spectraarts.com/" 

target="_blank">www.spectraarts.com 	</a>');
	
	//UAE	
	newpoints[15] = new Array(25.1166667, 56.35, icon0, 'Alpha Aluminium &amp; Glass', '<h1>Alpha Aluminium &amp; Glass</h1>Fujairah, United Arab Emirates<br><br><span 

class="address">Tel:</span> +971 2 227895');
	newpoints[16] = new Array(25.2666503, 55.3337049, icon0, 'Aramis Interiors LLC', '<h1>Aramis Interiors LLC</h1>Building No.1, Street No.21<br>Al Khabaisi, Dubai, U.A.E<br><br><span 

class="address">Tel:</span> +971 4 2692777<br>');
	newpoints[17] = new Array(25.2644444, 55.3116667, icon0, 'Glass Curtains Middle East HQ', '<h1>Glass Curtains Middle East HQ</h1><img class="alignright" src="images/logo-contact.jpg" 

/>Emirate Towers Office,<br>Level 26B <br>P.O. BOX 504929, Dubai<br><br><span class="address">Tel:</span> 00 971 433 00110  <br><span class="address">Fax:</span> 00 971 433 00112  <br><span 

class="address">Email:</span> <a href="mailto:info@glasscurtains.es">info@glasscurtains.es</a><br>');
	
	//UK
	newpoints[18] = new Array(51.9130666, -0.4810728, icon0, 'Sunseeker Doors Ltd', '<h1>Sunseeker Doors Ltd</h1>Unit 1, Bay Close,<br>Progress Way, Luton<br>LU4 9UP<br>U.K.<br><br><span 

class="address">Tel:</span> +01582 492 730<br><span class="address">Email:</span> <a href="mailto:info@sunseekerdoors.co.uk">info@sunseekerdoors.co.uk</a><br><span class="address">Web:</span> <a 

href="http://www.sunseekerdoors.co.uk " target="_blank">www.sunseekerdoors.co.uk </a>');
	
	newpoints[19] = new Array(53.8716218, -1.9046369, icon0, 'Emerald Glass Ltd', '<h1>Emerald Glass Ltd</h1>Unit A, Spearhead Way<br>Keighley BD21 3LA<br>U.K.<br><br><span 

class="address">Tel:</span> +01535 681525<br>');
	
	newpoints[20] = new Array(53.4893278, -2.1073145, icon0, 'Apropos Tectonic Ltd', '<h1>Apropos Tectonic Ltd</h1>Greenside House, Richmond Street,<br>Ashton-under-Lyne OL6 

7ES<br>U.K.<br><br><span class="address">Tel:</span> +44 (0) 161-342-8200<br><span class="address">Fax:</span> +44 (0) 161-342-8249<br><span class="address">Email:</span> <a 

href="mailto:info@apropos-tectonic.com">info@apropos-tectonic.com</a><br><span class="address">Web:</span> <a href="http://www.apropos-tectonic.com " target="_blank">www.apropos-tectonic.com 

</a>');
	
	
	//USA
	newpoints[21] = new Array(32.8877266, -117.091176, icon0, 'Truwindows', '<h1>Truwindows</h1>10107 Carroll Canyon road<br>San Diego, CA 92131<br>U.S.A.<br><br><span 

class="address">Tel:</span> +310-702-4957<br><span class="address">Email:</span> <a href="mailto:davidg@truwindows.com">davidg@truwindows.com</a><br><span class="address">Web:</span> <a 

href="http://www.truwindows.com" target="_blank">www.truwindows.com</a>');
	
	for(var i = 0; i < newpoints.length; i++) {
		var point = new GPoint(newpoints[i][1],newpoints[i][0]);
		var popuphtml = newpoints[i][4] ;
		var marker = createMarker(point,newpoints[i][2],popuphtml);
		map.addOverlay(marker);

		// save the info we need to use later for the side_bar
		gmarkers.push(marker);

		// add a line to the side_bar html
		side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + newpoints[i][3] + '<\/a><br>';
	}
      document.getElementById("side_bar").innerHTML = side_bar_html;
}

function createMarker(point, icon, popuphtml) {
	var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
	var marker = new GMarker(point, icon);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(popuphtml);

	});
	return marker;
}


 
      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }
//]]>
</script>

</head>
<body onunload="GUnload()">

<table border=1> 
      <tr> 
        <td> 
           <div id="map" style="width: 550px; height: 450px"></div> 
        </td> 
        <td valign="top" style="text-decoration: underline; color: #4444ff;"> 
           <div id="side_bar"></div> 
        </td> 
      </tr> 
    </table>

<body>
</html>

Open in new window

0
 
LVL 18

Expert Comment

by:Matthew Kelly
ID: 33623619
The text copied in with weird line breaks. See attached file:
test.html
0
 
LVL 18

Expert Comment

by:Matthew Kelly
ID: 33623630
Here is working solution outputting all of them to the sidebar:
test.html
0
 
LVL 18

Expert Comment

by:Matthew Kelly
ID: 33623643
And if you don't want them all, just particular ones, just call them like this:

You can change  to a links with javascript calls to "myclick" passing in the marker id.
<a href="javascript:myclick(20)">Apropos Tectonic Ltd</a>

Open in new window

0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:intangiblemedia
ID: 33624831
Hi Matthew,

We are nearly there - But as mentioned, I want to be able to open these via javascript outside the MAP element, not in a sidebar - for stying reasons -

I tried your last comment, but being outside of the map container it doesnt seem to work ?

Regards,

Ben
0
 
LVL 18

Accepted Solution

by:
Matthew Kelly earned 500 total points
ID: 33625656
Here is a working example of the a link. You can move the link anywhere in the body, it doesn't have to be in the sidebar.
test.html
0
 

Author Comment

by:intangiblemedia
ID: 33625761
Perfect - had to replace the head code... thanks!
0
 

Author Closing Comment

by:intangiblemedia
ID: 33625765
Patient and helpful - excellent
0
 

Author Comment

by:intangiblemedia
ID: 33625819
0
 

Expert Comment

by:igloobob
ID: 37494753
Hi matthewstevenkelly,

I have been having trouble getting help with a problem I have similar to this you answered above with the test.html you provided. I have a map I have created with the API, it is styled (desaturated colour), has a custom marker and I am using it as a full page background to a site I am working on.

My problem is that I have entered some info for the marker which is a tool tip type thing that appears on click. What I really want is for the marker (on click or hover) to show the actual business 'bubble' that my client has set up on the regular google maps which is here on the A marker:

http://maps.google.co.uk/maps?q=Vada+Media+6+Gloucester+Street,+Brighton,+BN1+4EW&hl=en&ll=50.826921,-0.136471&spn=0.021958,0.051026&sll=50.826927,-0.136406&sspn=0.08783,0.204105&vpsrc=6&hq=Vada+Media&hnear=6-7+Gloucester+St,+Brighton+BN1+4EW,+United+Kingdom&t=m&z=15


My code is below to the working map with style and custom maker image. I just need to make that maker load the business bubble. I have got this far through tutorials and as such I have no idea when I look at your code which bits / functions I should be adding to mine and where. I have tried several options but clearly am doing it wrong as the map just dissappears!

Not sue if you will see this being a closed question? But if you do and can offer any help I would be VERY grateful! My original question here here where I could award you points..

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27530759.html


Thanks!

:)



I looked at your test page, but I have
<script type="text/javascript"
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAytt23qowVhFZAIunBd74JXx6LmURDnD0&sensor=true">
</script>


<script type="text/javascript">
  function initialize() {

  // Create an array of styles.
  var greyMapStyles = [
    {
      featureType: "all",
      stylers: [
        { saturation: -80 }
      ]
    },
    {
      featureType: "all",
      stylers: [
        { hue: "#ff0023" },
        { saturation: -100 }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var greyMapType = new google.maps.StyledMapType(greyMapStyles,
    {name: "Grey Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(50.826910965853585, -0.13648152351379395),
	disableDefaultUI: true,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'grey_map']
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);
	
	var myLatlng = new google.maps.LatLng(50.826910965853585, -0.13648152351379395);
  var myOptions = {
    zoom: 16,
    center: myLatlng,
	disableDefaultUI: true,
   mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'grey_map']
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title:"Vada Media - The Skiff, 6 Gloucester Street, Brighton, BN1 4EW",
	  icon:"http://c2946873.myzen.co.uk/dev/images/purple_MarkerA.png"
  });
  
  
  

	  


  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('grey_map', greyMapType);
  map.setMapTypeId('grey_map');
}



</script>

Open in new window

0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now