mokamoto/accountmap

## accountmap
<apex:page showHeader="false" standardController="Account" standardStylesheets="false" docType="html-5.0" applyHtmlTag="false" applyBodyTag="false">
<html>
    <head>
        <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyCDnW4hjusPT-WyjMluh1FxUJfN2QefNp8&sensor=false"></script>
        <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
              var myOptions = {
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                mapTypeControl: false
              }
              var map;
              var marker;

              var geocoder = new google.maps.Geocoder();
              var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingState}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";

              var infowindow = new google.maps.InfoWindow({
                content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}<br>{!Account.BillingState}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
              });

          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK && results.length) {
              if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

                //create map
                map = new google.maps.Map(document.getElementById("map"), myOptions);

                //center map
                map.setCenter(results[0].geometry.location);

                //create marker
                marker = new google.maps.Marker({
                    position: results[0].geometry.location,
                    map: map,
                    title: "{!Account.Name}"
                });

                //add listeners
                google.maps.event.addListener(marker, 'click', function() {
                  infowindow.open(map,marker);
                });
                google.maps.event.addListener(infowindow, 'closeclick', function() {
                  map.setCenter(marker.getPosition());
                });

              }

            } else {
              $('#map').css({'height' : '15px'});
              $('#map').html("{!Account.Name}の住所が見つかりません。住所情報が正しいか確認して下さい。");
              resizeIframe();
            }
          });

          function resizeIframe() {
            var me = window.name;
            if (me) {
              var iframes = parent.document.getElementsByName(me);
              if (iframes && iframes.length == 1) {
                height = document.body.offsetHeight;
                iframes[0].style.height = height + "px";
              }
            }
          }

        });
        </script>

        <style>
            #map {
              font-family: Arial;
              font-size:12px;
              line-height:normal !important;
              height:250px;
              background:transparent;
            }
        </style>
    </head>

    <body>
    <div id="map"></div>
    </body>
</html>
</apex:page>
	<apex:page showHeader="false" standardController="Account" standardStylesheets="false" docType="html-5.0" applyHtmlTag="false" applyBodyTag="false">
	<html>
	<head>
	<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyCDnW4hjusPT-WyjMluh1FxUJfN2QefNp8&sensor=false"></script>
	<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	var myOptions = {
	zoom: 15,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	mapTypeControl: false
	}
	var map;
	var marker;

	var geocoder = new google.maps.Geocoder();
	var address = "{!Account.BillingStreet}, " + "{!Account.BillingCity}, " + "{!Account.BillingState}, " + "{!Account.BillingPostalCode}, " + "{!Account.BillingCountry}";

	var infowindow = new google.maps.InfoWindow({
	content: "<b>{!Account.Name}</b><br>{!Account.BillingStreet}<br>{!Account.BillingCity}<br>{!Account.BillingState}, {!Account.BillingPostalCode}<br>{!Account.BillingCountry}"
	});

	geocoder.geocode( { 'address': address}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK && results.length) {
	if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {

	//create map
	map = new google.maps.Map(document.getElementById("map"), myOptions);

	//center map
	map.setCenter(results[0].geometry.location);

	//create marker
	marker = new google.maps.Marker({
	position: results[0].geometry.location,
	map: map,
	title: "{!Account.Name}"
	});

	//add listeners
	google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
	});
	google.maps.event.addListener(infowindow, 'closeclick', function() {
	map.setCenter(marker.getPosition());
	});

	}

	} else {
	$('#map').css({'height' : '15px'});
	$('#map').html("{!Account.Name}の住所が見つかりません。住所情報が正しいか確認して下さい。");
	resizeIframe();
	}
	});

	function resizeIframe() {
	var me = window.name;
	if (me) {
	var iframes = parent.document.getElementsByName(me);
	if (iframes && iframes.length == 1) {
	height = document.body.offsetHeight;
	iframes[0].style.height = height + "px";
	}
	}
	}

	});
	</script>

	<style>
	#map {
	font-family: Arial;
	font-size:12px;
	line-height:normal !important;
	height:250px;
	background:transparent;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	</body>
	</html>
	</apex:page>