Эта статья морально устарела :( . Приглашаю продолжить ваше знакомство с Salesforce на нашем Форуме!
Использование Google MAPS API нашло широкое применения в различных сферах жизни человека. Такие карты помогают найти местоположение различных необходимых нам мест и объектов.
Если взять страны запада, то там существует уже давно практика, когда клиент просто отмечает на карте, куда ему доставить товар, а перевозчик по навигатору отыскивает кратчайший путь и едет в объезд пробкам, что так же есть в Google Maps. И это лишь малая толика того, как можно использовать Google Maps.
Т.к. мы занимаемся разработкой на SalesForce, то соответственно нам интерестно как можно интегрировать Google Maps в SalesForce и какое полезное применения этому можно найти.
Поставим себе следующую задачу:
В Page Layout для Client контакта должна отображаться карта из сервиса Google Maps, она должна указывать на расположение контакта согласно адресу.
(Поле адрес у меня задано одним полем (по условию выполняемой мною задачи), но вы можете формировать адрес вашего клиента и разбив нужные вам данные на соответствующие поля)
Реализация:
Что бы на странице контакта добавить Google Map есть по крайней меренесколько способов:
1) Вы можете создать поле, в торотом будете просить пользователя ввести ссылку с Google Map напрямую в это поле, и уже по этой ссылке просто формировать карту.
(считаю данных подход не интересным и буду рассматривать его реализацию)
2) Формирование карты по адресу (геокоду) вашего клиента:
Что бы при просмотре данных вашего клиента вы могли видеть его местоположение на карте, вам необходимо вывести данный функционал на эту страницу. Сделаем это следующим образом:
переходим в раздел:
Setup / Create / Objects / ваш_объект / Page Layouts (это будет функциональный блок)
<apex:page standardController="Contacts__c">
<!-- стили для отображения панели -->
<style>
html, body, #map-canvas {
height: 500px;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<!-- подключаем необходимые скрипты -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
<!-- создаем переменные -->
var geocoder;
var map;
<!-- инициализируем карту -->
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 12,
center: latlng
}
<!-- выводим карту в указанный блок -->
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
<!-- получаем координаты места по адресу -->
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
<!-- указываем когда отрабатывать скрипту -->
google.maps.event.addDomListener(window, 'load', initialize);
<!-- автоматическйи клик по кновке отображения нужного места -->
$( document ).ready(function() {
$('.seacrh_place').click();
});
</script>
<!-- html-часть, в нее и выводим нужные объекты -->
<div id="panel">
<!-- тут вбиваем наш адрес из поля "Адресс" -->
<input id="address" type="textbox" value="{!Contacts__c.Addres__c}" />
<input type="button" value="Show this place!" class="seacrh_place" onclick="codeAddress()" />
</div>
<!-- сюда выводим карту -->
<div id="map-canvas"></div>
</apex:page>
<apex:page standardController="Contacts__c">
<!--
Описание:
Geocoding – это javascript библиотека, которая позволяет делать полезности типа этих:
- По наименованию чего-то, найти это на карте и сообщить координаты
- По координатам, сообщить всё что находится на этих координатах.
-->
<!-- Инициализируем карту -->
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
<!-- center: myLatlng – это координаты центра карты
zoom – это увеличение при инициализации
mapTypeId – тип (политическая, физическая, гибрид)
-->
<!-- Создаем infoWindow -->
var contentString = '<div id="content">Some informations about provider.</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
<!-- создаем метку -->
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"This provider live There!"
});
<!--
position – собственно координаты метки
map – на какую карту метку поместить
title – при наведении мыши будет писать 'This provider live There!'.
-->
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
<!-- insert out addres -->
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
<!-- при клике на метку, показать окно с информацией, на карте map с привязкой к marker -->
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });
<!-- при загрузке окна - инициализируемся -->
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<!-- блок для размещения карты -->
<div class="map_Container" onload="initialize();">
<div id="panel">
<input id="address" type="textbox" value="Sydney, NSW" />
<input type="button" value="Geocode" onclick="codeAddress()" />
</div>
<div id="map-canvas"></div>
<!-- подключаем API карт -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</div>
</apex:page>
