Hey,
I've piggy-backed off of Dan Stones' base guidance on how to add a live, interactive google map. (https://success.salesforce.com/answers?id=90630000000guBkAAI)
My issues is as follows.
I don't know how to pass the information that is being displayed in the id=info DIV tag and the input fields.
<apex:page standardController="Lead">
<apex:pageBlock >
<head>
<apex:slds />
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=[API-KEY]&sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?key=[API-KEY]"></script>
<script type="text/javascript">
$(document).ready(function() {
var myOptions = {
zoom: 20,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true
}
var map;
var marker;
var latLng = "{!Lead.Coordinates__latitude__s}, {!Lead.Coordinates__longitude__s}";
var geocoder = new google.maps.Geocoder();
var address = "{!Lead.Coordinates__latitude__s}, {!Lead.Coordinates__longitude__s}";
//needs work to do something with this code and get the actuall lat/long results.
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
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,
draggable: true,
title: "{!Lead.Name}"
});
infowindow = new google.maps.InfoWindow({
content: "{!Lead.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());
});
//for draggable marker Update
google.maps.event.addListener(marker, 'dragend', function()
{
updateMarkerPosition(marker.getPosition());
geocodePosition(marker.getPosition());
});
}
} else {
$('#.map').css({'height' : '15px'});
$('#.map').html("Oops! {!Lead.Name}'s address could not be found, please make sure the address is correct.");
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>
</head>
<body class="slds-scope">
<style>
#.map {
font-family: Arial;
font-size:12px;
line-height:normal !important;
height:400px;
background:transparent;
}
#.infoPanel {
float: left;
width: 100%;
}
</style>
<div id="map"></div>
<div id="infoPanel">
<b>Current position:</b>
<div id="info"></div>
<b>Closest matching address:</b>
<div id="address"></div>
<apex:form id="UpdatePin">
<apex:pageBlock >
<apex:pageblocksection title="Coordinates">
<apex:inputfield label="Latitude" value="{!Lead.Pinned_Coordinates__Latitude__s}" />
<apex:inputfield label="Longitude" value="{!Lead.Pinned_Coordinates__Longitude__s}"/>
<apex:inputfield label="Pinned" value="{!Lead.Pinned__c}"/>
</apex:pageblocksection>
<apex:pageBlockButtons >
<apex:commandButton value="Save" styleClass="slds-button" action="{!save}"/>
</apex:pageBlockButtons>
</apex:pageBlock>
</apex:form>
</div>
</body>
</apex:pageBlock>
</apex:page>
The last section of the body shows the information. I'm just not really sure the best way to accomplish the goal of auto-updating the {!Lead.Pinned_Coordinates__Longitude__s} variables with the lat/long information that is being dynamically displayed as I finish dragging.
Thank for the help!
Hi,
Can you post the question in any of the two communities. This community is for configuration related questions
https://developer.salesforce.com/forumsdc=Apex_Code_Development#!/feedtype=RECENT&criteria=ALLQUESTIONS&
OR
https://salesforce.stackexchange.com/questions
