Gmap One call

Gmap One call

by Andrew Pougher

HTML

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

<div class="container">
	<div class="span4" id="manchester">
    	<div id="manc" class="contactAddress">
        	<p class="text-bold">11 Waterloo Street<br/>Manchester <br/>NR24 UK</p>
            <div class="tel"><p>T +44 232 424 7756<br/>F +44 232 332 4242<br/><a href="mailto:[email protected]">[email protected]</a></p></div>
            <p class="directions" id="directionsManc">directions</p>
		</div>
        <div id="mancMap" height="300px" width="200px"></div>
    </div>
    <div class="span4" id="newYork">
    	<div id="ny" class="contactAddress">
        	<p class="text-bold">13 Madison Avenue<br/>New York <br/>NY 10016 </p>
            <div class="tel"><p>T +1 212 333 1000<br/>F +1 212 331 4141<br/><a href="mailto:[email protected]">[email protected]</a></p></div>
            <p class="directions" id="directionsNyc">directions</p>
        </div>
        <div id="nyMap"></div>
    </div>
    <div class="span4" id="london">
    	<div id="london" class="contactAddress">
        	<p class="text-bold">Pougher<br/>170 Castelnau<br/>London <br/>SW13 9RD</p>
            <div class="tel"><p>T +44 161 131 4324<br/>F +44 443 322 4141<br/><a href="mailto:[email protected]">[email protected]</a></p></div>
            <p class="directions" id="directionsLondon">directions</p>
        </div>
        <div id="londonMap"></div>
    </div>
  <div class="clear"></div>

CSS

#manc {
	height:320px;
	background:#000;
	color:#FFF;
}

#mancMap {
	height:320px;
}

#ny {
	height:320px;
	background:#707173;
	color:#fff;
}

#nyMap {
	height:320px;
}

#london {
	height:320px;
	background:#b1b3b4;
	color:#fff;
}

#londonMap {
	height:320px;
}

.contactAddress {
	position: relative;
	padding:28px;
	font-size:20px;
}

.contactAddress a {
	color: white !important;
}

.contactAddress .tel {
	position: absolute;
	bottom: 140px;
}

JavaScript

var manchesterLatLong = new google.maps.LatLng(53.4765, -2.2392);
	var newYorkLatLong = new google.maps.LatLng(40.748917, -73.982683);
	var londonLatLong = new google.maps.LatLng(51.515731, -0.125307);
	var Clat;
	var Clong;
	var map1, map2, map3;
	var directionsDisplay;
	var directionsService = new google.maps.DirectionsService();

	var styleArray1 = [
		{
			stylers: [ 
				{ saturation: -100 },
				{ lightness: 0 }
			] 
		} 
	];

	var styleArray2 = [
		{
			stylers: [ 
				{ saturation: -100 },
				{ lightness: 25 }
			] 
		} 
	];

	var styleArray3 = [
		{
			stylers: [ 
				{ saturation: -100 },
				{ lightness: 50 }
			] 
		} 
	];
	$('.directions').css('display','none');
      function initialize() {

        var mancMapOptions = {
          center: manchesterLatLong,
		  mapTypeControl: false,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: styleArray1
		};

		var nyMapOptions = {
          center: newYorkLatLong,
		  mapTypeControl: false,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: styleArray2

        };

		var londonMapOptions = {
          center: londonLatLong,
		  mapTypeControl: false,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: styleArray3

        };

        map1 = new google.maps.Map(document.getElementById("mancMap"), mancMapOptions);
   		map2 = new google.maps.Map(document.getElementById("nyMap"), nyMapOptions);
	    map3 = new google.maps.Map(document.getElementById("londonMap"), londonMapOptions);

		var mancMarker = new google.maps.Marker({
		  position: manchesterLatLong,
		  map: map1,
		  animation: google.maps.Animation.DROP,
		  title:"Manchester",
		  icon: 'http://googlemaps.googlermania.com/img/marker_flag.png'
 		 });
		 var nyMarker = new google.maps.Marker({
		  position: newYorkLatLong,
		  map: map2,
		  animation: google.maps.Animation.DROP,
		  title:"New York",
		  icon:...