Google API to map nearby properties in Salesforce
<p>I asked this question originally in the Salesforce StackExchange, but was redirected here, since it's more of a Google API question than a Salesforce question.</p>

<p>Right now I have the following code, which creates a marker at the location of the property on a visualforce page that has an embedded Google Map. When the user clicks on the marker, an info window appears with information on the property.</p>

<pre><code>&lt;apex:page standardController="Property__c"&gt;
    &lt;head&gt;
        &lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript"&gt;
            $(document).ready(function() {
                var myOptions = {
                    zoom: 18,
                    mapTypeId: google.maps.MapTypeId.HYBRID,
                    mapTypeControl: true,
                    scrollwheel: false
                }
                var map;
                var marker;
                var geocoder = new google.maps.Geocoder();
                var address = "{!Property__c.Property_Address__c}, " + "{!Property__c.City__c}, " + "{!Property__c.State__c} " + "{!Property__c.Zip_Postal_Code__c}}";
                var infowindow = new google.maps.InfoWindow({
                    content: "&lt;b&gt;{!Property__c.Name}&lt;/b&gt;&lt;br&gt;{!Property__c.Property_Address__c}&lt;br&gt;{!Property__c.City__c}, {!Property__c.State__c} {!Property__c.Zip_Postal_Code__c}"
                });
                geocoder.geocode({
                    address: address
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK &amp;&amp; results.length) {
                        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                            //create map
                            map = new google.maps.Map(document.getElementById("map"), myOptions);
                            map.setTilt(45);
                            //center map
                            map.setCenter(results[0].geometry.location);
                            //create marker
                            marker = new google.maps.Marker({
                                position: results[0].geometry.location,
                                map: map,
                                title: "{!Property__c.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());
                            });
                        }
                    } else {
                        $('#map').css({
                            'height': '15px'
                        });
                        $('#map').html("Oops! {!Property__c.Name}'s billing 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 &amp;&amp; iframes.length == 1) {
                            height = document.body.offsetHeight;
                            iframes[0].style.height = height + "px";
                        }
                    }
                }
            });
        &lt;/script&gt;
        &lt;style&gt;
            #map {
                font-family: Arial;
                font-size: 12px;
                line-height: normal !important;
                height: 800px;
                background: transparent;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="map"&gt;&lt;/div&gt;
    &lt;/body&gt;
&lt;/apex:page&gt;
</code></pre>

<p>This is working just fine. But I am trying to modify it to also show properties nearby to this property. I have gotten as far as using an SOQL query to find these properties, pass their addresses into an array, geocode these addresses and set a marker at each geocoordinate. All of that works just swell. </p>

<p>Where I've been stuck, is in displaying the infowindow that appears when the user clicks one of these markers. Not only can I not create an infowindow for the NEW markers, but the infowindow for the OLD "main" marker is breaking as well. In fact, even if I comment the infowindow and listener events for the new markers, the original is still broken. These infowindows need to display different information than the infowindow for the "main" marker. Here is my modified code:</p>

<pre><code> $(document).ready(function() {
     var myOptions = {
         zoom: 18,
         mapTypeId: google.maps.MapTypeId.HYBRID,
         mapTypeControl: true,
         scrollwheel: false
     }
     var map;
     var marker;
     var marker2;
     var geocoder = new google.maps.Geocoder();
     var address = "{!Property__c.Property_Address__c}, " + "{!Property__c.City__c}, " + "{!Property__c.State__c} " + "{!Property__c.Zip_Postal_Code__c}}";
     var infowindow = new google.maps.InfoWindow({
         content: "&lt;b&gt;{!Property__c.Name}&lt;/b&gt;&lt;br&gt;{!Property__c.Property_Address__c}&lt;br&gt;{!Property__c.City__c}, {!Property__c.State__c} {!Property__c.Zip_Postal_Code__c}"
     });
     geocoder.geocode({
         address: address
     }, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK &amp;&amp; results.length) {
             if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                 //create map
                 map = new google.maps.Map(document.getElementById("map"), myOptions);
                 map.setTilt(45);
                 //center map
                 map.setCenter(results[0].geometry.location);
                 //create marker
                 marker = new google.maps.Marker({
                     position: results[0].geometry.location,
                     map: map,
                     title: "{!Property__c.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());
                 });
                 //several markers 
                 //Get Geos
                 var geos = [];
                 var idy = 0; &lt;
                 apex: repeat value = "{!getgeoList}"
                 var = "m" &gt;
                 geos[idy++] = "{!m}"; &lt;
                 /apex:repeat&gt;
                 for (var i = 0; i &lt; geos.length; ++i) {
                     console.log('geo' + geos[i] + 'out of' + geos.length);
                     geocodeAddress(geos[i]);
                 }
                 function geocodeAddress(location) {
                     geocoder.geocode({
                         'address': location
                     }, function(results, status) {
                         // alert(status);
                         if (status == google.maps.GeocoderStatus.OK) {

                             //   alert(results[0].geometry.location+location);

                             createMarker(results[0].geometry.location, location);
                         } else {
                             alert("some problem in geocode" + status);
                         }
                     });
                 }
                 function createMarker(latlng, html) {
                     marker2 = new google.maps.Marker({
                         position: latlng,
                         map: map
                     });

                     addIinfo(marker2, html);
                 }
                 function addInfo(marker2, html) {
                     var infowindow2 = new google.maps.InfoWindow({
                         content: html
                     });
                     marker2.addListener(marker2, 'click', function() {
                         infowindow2.open(marker2.get('map'), marker2);
                     });
                 }
             }
         } else {
             $('#map').css({
                 'height': '15px'
             });
             $('#map').html("Oops! {!Property__c.Name}'s billing 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 &amp;&amp; iframes.length == 1) {
                 height = document.body.offsetHeight;
                 iframes[0].style.height = height + "px";
             }
         }
     }
 });
</code></pre>