Showing posts with label google map. Show all posts
Showing posts with label google map. Show all posts

Salesforce, Google Map 3 and jQuery with Clusters

Monday, March 18, 2013 by Aslam - The Alexendra
Hi All,
In past i have posted one blog regarding google map, using jquery and google map version 2. Now since, google have version 3 so i have upgraded my plugin with latest version and also used more featured jquery plugin i found which is gMap3. You can check it here:
http://gmap3.net/en/

I recommend you first refer my earlier version of google map component here:
http://techsahre.blogspot.in/2011/04/sfgmap-salesforce-google-map-jquery.html

I used this jQuery plugin and implemented my own new version of sfGmap, called sfGmap3



 This component has all features like previous component but have one more new feature called Clusters. You can turn On and Off this feature in my component using attribute "useCluster".

Here is a basic usage of this component:
<c:sfgmap3 addressmodel="{!addressmodel}" height="500px" usecluster="true" uselatlng="false" width="100%" zoom="2" />

I used this plugin and created one demo to show historical places in Rajasthan. Thanks to my collegue Rajendar Rathore, who helped me to make database for these places which included lat, long, pictures etc. Here the link for online demo:

http://labsprojects-developer-edition.ap1.force.com/GMapRajasthanPlaces

You can see each cluster is identified by a image, i used Camel image. Once you zoom in, you will keep go inside the cluster and finally you can find the actual place. You can click on each marker and you can find a info window containing image of that place and name like below.



Hope you will like it. Mail me for full code of this demo and let me know suggestions to improve it as always.

Thanks
Aslam Bari
http://www.aslambari.com
Posted in Labels: , , , , , , , | 23 Comments »

Heat Map using Google Map in Salesforce

Saturday, September 10, 2011 by Aslam - The Alexendra
Hi All,
Recently i came across for one requirement with my client where he wants to see density of his shops across US. For example he has a lot of branches of his coffee shops across US like in CA, TX, MB etc. He want to see a good way on map to see density of his branches. I found the way how to show this, this type of maps are called HeatMaps.

Heat Maps are used to show density of your prouduct, services and any useful information on Geaographical area, based on your addresses.




The another example may be like, i want to know Starbucks shops across the US and want to know which area has density (number of shops) more.
So, i created one example in Salesforce VF page to show, how we can make it.

1. Copy paste below code in your VF page

<apex:page showHeader="false" sidebar="false">
<script src="http://www.heatmapapi.com/javascript/HeatmapAPI.aspx?k=86123b76-2190-4a4b-b182-86e7199b0406" type="text/javascript"></script>

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA09SA9e7gW5A4Mpy3VCJQjxQfiV3Wc4AiuMkI_RwI0dk2dVyy7hQWusr2PE1VCubWNkTco2njprfSxg" type="text/javascript"></script>

<script src="http://www.heatmapapi.com/javascript/HeatmapAPIGoogle.js" type="text/javascript"></script>
<script type="text/javascript"
 src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var m = null;
var batch = "";
var myHM = null;
var request = GXmlHttp.create();
var TOTAL_COUNT = 0;
var INDEX = 0;
function loadGoogle()
{
if (GBrowserIsCompatible())
{
m = new GMap2(document.getElementById("map"));
m.setCenter(new GLatLng(38.5, -95.8), 3);
m.setUIToDefault();
initHeatmap();
}
else
alert('Your Internet browser is not compatible    with this website.');
}



function initHeatmap()
{
// Heatmap Scripts
 try
{
myHM = new GEOHeatmap();
myHM.Init(400, 400); // Must be same as map size, or same ratio
  addMarkersFromXml();





}
catch(e)
{
alert(e);
}
}

function addMarkersFromXml(){

request.open('GET', '/apex/data', true);
request.onreadystatechange = function() {
    //alert(request.readyState);
        if(request.readyState == 4) {
        var xmlDoc = request.responseXML;
        var markers = xmlDoc.documentElement.getElementsByTagName("store");
        TOTAL_COUNT = markers.length;
        INDEX = 0;
        for(var i=0; i < markers.length; i++){
            var state = markers[i].getAttribute("state");
            var density = "1";//markers[i].getAttribute("density");
                geocoder = new GClientGeocoder();
            var address = state;
            geocoder.getLatLng(address,
                  function(point) {
                    if (!point) {
                  
                    } else {
                      fullVal = point.lat().toFixed(5) + "," + point.lng().toFixed(5) + "," + density + ",";
                      batch += fullVal;
                      INDEX++;
                      if(INDEX >= TOTAL_COUNT){
                        startMap();
                      }
                    }
            });
        }
    
    }
}


function startMap(){
        document.getElementById("HMMapdata").value=batch;
         myHM.SetData(batch);
         myHM.SetBoost(.5); // Optional, see documentation
              myHM.SetDecay(0); // Optional, see documentation
              //var proxyURL = "http://localhost/proxy.php";
              //myHM.SetProxyURL(proxyURL);
              var preUrl = myHM.GetURL();

          // Now render in our Google Map
              var heatmapOverlay = new HMGoogleOverlay(preUrl);
          m.addOverlay(heatmapOverlay);
}
request.send(null);

}





</script>

<apex:sectionHeader subtitle="Heat Map using Google Map" title="Aslam Bari (http://www.aslambari.com)"/>
<body onload="loadGoogle();">
<input type="hidden" id="HMMapdata" />
<input type="hidden" id="HMImageURL" name="HMImageURL"/>
<div id="map" style="width:400px;height:400px;"></div>
</body>
</apex:page>



2. Create another page called "data" and copy paste below code in that. Note: this page contains the addresses of your shops, offices etc which we want to see as density. So, change accordingly

<apex:page sidebar="false" showHeader="false" contentType="text/xml">
<stores>
<store state="IN,US"></store>
<store state="KY,US"></store>
<store state="WA,US"></store>
<store state="MB,US"></store>
</stores>
</apex:page>


Note: you need to go http://www.heatmapapi.com to get new Free API key and also for google free api key to get your code work.

Here is the working example of this. Click to see.
http://labsprojects-developer-edition.ap1.force.com/HeatMapExample

Hope you will need this sometime in your project.

Thanks
Aslam Bari
Posted in Labels: , , , , , , | 6 Comments »
Subscribe to: Posts (Atom)