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 :)