Apex Code Development You need to sign in to do that
Don't have an account?
hylim12 Hybrid app could not show Google map
Hi Im trying to create a Hybrid app which will get all contacts and when click on a single contact will show the contact details together with a google map.
i manage to load the contact list but when i click on the name then nothing happen. can anyone help?
this is my code:
<apex:page docType="html-5.0"
showHeader="false"
sidebar="false"
standardStylesheets="false"
standardController="Contact"
extensions="Contacts_Ext">
<head>
<title>Picture List View Template</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<apex:stylesheet value="{!URLFOR($Resource.Mobile_Design_Templates_master, 'Mobile-Design-Templates-master/common/css/app.min.css')}"/>
<apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates_master, 'Mobile-Design-Templates-master/common/js/jQuery2.0.2.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates_master, 'Mobile-Design-Templates-master/common/js/jquery.touchwipe.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.Mobile_Design_Templates_master, 'Mobile-Design-Templates-master/common/js/main.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.pathjs, 'pathjs/underscore_1_5_1.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.pathjs, 'pathjs/path.js')}"/>
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
<script src="/soap/ajax/23.0/connection.js" type="text/javascript" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/html" id='listView'>
<div class="app-wrapper">
<nav class="main-menu">
<a href="#">Accounts</a>
<a href="#">Opportunities</a>
</nav>
<header>
<div class="main-menu-button main-menu-button-left"><a class="menu"> </a></div>
<h1>Contacts</h1>
</header>
<div class="app-content">
<ul id="cList" class="list-view with-swipe left-thumbs right-one-icons">
<% for(var i = 0; i < contacts.length; i++){ %>
<li>
<div class="thumbs">
<% if (typeof(contacts[i].Phone) != "undefined") { %>
<a href="tel:<%= contacts[i].Phone %>" class="thumb thumb-1">
<img class="thumb" src="{!URLFOR($Resource.Mobile_Design_Templates_master, 'Mobile-Design-Templates-master/common/images/icons/tile-phone.png')}" />
</a>
<% } %>
<% if (typeof(contacts[i].Email) != "undefined") {%>
<a href="mailto:<%= contacts[i].Email %>" class="thumb thumb-2">
<img class="thumb" src="{!URLFOR($Resource.Mobile_Design_Templates_master, 'Mobile-Design-Templates-master/common/images/icons/tile-email.png')}" />
</a>
<% } %>
<img class="thumb thumb-3" src="<%= contacts[i].Pic %>"/>
</div>
<a href="#/contact/<%= contacts[i].Id %>" class="content">
<h2><%= contacts[i].Name %></h2>
<%= contacts[i].Title %>
<div class="list-view-icons">
<span class="icon-right-arrow"> </span>
</div>
</a>
</li>
<% } %>
</ul>
</div>
</div>
</script>
<script type="text/html" id='detailView'>
<div class="app-wrapper">
<nav class="main-menu">
<a href="#">Accounts</a>
<a href="#">Opportunities</a>
</nav>
<header>
<div class="main-menu-button main-menu-button-left"><a class="left-arrow" href="#/contacts"> </a></div>
<h1>Contact</h1>
</header>
<div class="app-content">
<div class="detail-view-header left-thumb">
<div class="content">
<img class="thumb" src="<%= contact.Pic %>"/>
<h1><%= contact.Name %></h1>
<h3><%= contact.Account.Name %></h3>
</div>
</div>
<section class="border-bottom">
<div class="content">
<h3>Address</h3>
<p>
<%= contact.MailingStreet %><br/>
<%= contact.MailingCity %>, <%= contact.MailingState %> <%= contact.MailingPostalCode %><br/>
<%= contact.MailingCountry %>
</p>
</div>
<div class="content">
<h3>Title</h3>
<p>
<%= contact.Title %>
</p>
<p><%= contact.Id %></p>
</div>
<div id="map"></div>
</section>
</div>
</div>
</script>
<script type="text/javascript">
var contactRecs = new Array();
var compiledListViewTempl = _.template($("#listView").html());
var compiledDetailViewTempl = _.template($("#detailView").html());
var markers = [];
$(document).ready(function() {
getAllContacts();
});
function getAllContacts(){
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.Contacts_Ext.getContactRecs}',
function(records, e) {
showContacts(records);},
{escape:false});
}
function showContacts(records) {
contactRecs.length = 0;
for(var i = 0; i < records.length; i++) {
records[i].Pic = '{!URLFOR($Resource.pathjs, 'pathjs/BlankAvatar.png')}';
//if (typeof records[i].Contact_Pic__c != "undefined"){
//records[i].Pic = $(records[i].Contact_Pic__c).attr('src');
//}
contactRecs[records[i].Id] = records[i];
}
$('#mainContainer').empty();
$('#mainContainer').append(compiledListViewTempl({contacts : records}));
$(document).trigger('onTemplateReady');
}
function showContactDetails(recordId) {
var contact = contactRecs[recordId];
var query_1 = "select id, name,Address__c, Geolo__Latitude__s, Geolo__Longitude__s, Contact__c from Property__c where Contact__c = '" + [recordId] + "'";
sforce.connection.sessionId = '{!$Api.Session_ID}';
var user = sforce.connection.getUserInfo();
var records = sforce.connection.query(query_1);
var locations = new Array();
locations = records.getArray("records");
var popup_content = new Array();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(locations[1].Geolo__Latitude__s, locations[1].Geolo__Longitude__s),
mapTypeControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
alert(map);
var infowindow = new google.maps.InfoWindow({
maxWidth: 200,
disableAutoPan: true,
pixelOffset: new google.maps.Size(10,10)
});
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var marker;
var i;
for (i = 0; i < locations.length; i++) {
//assigning markers
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].Geolo__Latitude__s, locations[i].Geolo__Longitude__s),
map: map,
title: locations[i].Name
});
//Specifying content of infobox
popup_content.push("<b> Property Name: " + locations[i].Name +
"<br/> Address:" + locations[i].Address__c + "</b>");
//add listeners
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(popup_content[i]);
infowindow.open(map, this);
}
})(marker,i));
};
$('#mainContainer').empty();
$('#mainContainer').append(compiledDetailViewTempl({contact: contact}));
}
Path.map("#/contacts").to(function(){
getAllContacts();
});
Path.map("#/contact/:contactId").to(function(){
showContactDetails(this.params['contactId']);
});
Path.listen();
</script>
</head>
<body>
<div id="mainContainer">
</div>
</body>
</apex:page>
thanks.
Solved. I managed to show the map now :)