function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Luca Benedettini 7Luca Benedettini 7 

Markers Google maps

Hi, I write a visualforce page that have to render all the locations of a bunch of events on a google Map.
Now I'm able to locate one marker on a google page but when I have to put more than one markers my code doesn't work. 
In the first part of the page I take an hardcoded address, I did it becouse I want to center the map on that location in the second part I build a list of address called "listOfAddresses" of the events that i want to render and I pass it to vf page using the controller extension.
If someone could help and tell me where I wrong, it'd be very helpfull.
Here my vf page:
<apex:page standardController="Event" extensions="Active" showHeader="true" sidebar="true">
<apex:form >
<apex:pageBlock title="Evento" id="evento" >
<apex:pageBlockSection title="Inserisci i Dati Dell'evento" collapsible="false" columns="2">
                 <apex:inputField required="true" value="{!Event.Indirizzo__c}"/>
                 <apex:inputField required="true" value="{!Event.Citt__c}"/ >
                 <apex:inputField required="true" value="{!Event.Cap__c}"/ >
                 <apex:inputField required="true" value="{!Event.Regione__c}"/ >
                 <apex:inputField required="true" value="{!Event.StartDateTime}"/ >
                 <apex:inputField value="{!Event.Subject}"/ >
</apex:pageBlockSection>
<apex:pageBlockSection >
<apex:commandButton action="{!cerca}" value="Cerca" rerender="mapGoogle"/>
</apex:pageBlockSection>

</apex:pageBlock>
</apex:form>
<apex:pageBlock title="Google map" id="mapGoogle" >

<apex:pageBlockSection title="Eventi collegati" id="eventi" collapsible="false" columns="1" >
<apex:pageblockTable value="{!eventconnected}" var="ev">
                <apex:column value="{!ev.Owner.Name}"/>
                <apex:column value="{!ev.Indirizzo__c}"/>
                <apex:column value="{!ev.Citt__c}"/>
                <apex:column value="{!ev.Cap__c}"/>
                <apex:column value="{!ev.Regione__c}"/>
                <apex:column value="{!ev.StartDateTime}"/>
                <apex:column value="{!ev.EndDateTime }"/>
                <apex:column value="{!ev.Subject}"/>                    
</apex:pageblockTable>
</apex:pageBlockSection>

<apex:pageBlockSection title="Mappa Eventi">
  
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 
  var myOptions = {
    zoom: 18,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    mapTypeControl: true
  }
  //create map
  var map= new google.maps.Map(document.getElementById("map"), myOptions);;
  var marker;
  var markerBounds = new google.maps.LatLngBounds();
  var geocoder = new google.maps.Geocoder();
  var address = "{!Event.Indirizzo__c}, " + "{!Event.Citt__c}, " + "{!Event.Cap__c}";
  var addressArray ="{!listOfAddresses}" ;
  
 
   var infowindow = new google.maps.InfoWindow({
    content: "<b>Event Locator</b>"
  });

  geocoder.geocode( { address: address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK && results.length) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {    
        //center map
        map.setCenter(results[0].geometry.location);
       
        //create marker
        marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: "{!Event.Subject}"
        });
       
       
        //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("inserisci un indirizzo sulla mappa e verrà visualizzato");
      resizeIframe();
    }
  });
 
    for (var i = 0; i < addressArray.length; i++) {
        geocoder.geocode( { 'address': addressArray[i]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
                markerBounds.extend(results[0].geometry.location);
                map.fitBounds(markerBounds);
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
    }
 
  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>

<style>
#map {
  font-family: Arial;
  font-size:12px;
  line-height:normal !important;
  height:500px;
  background:transparent;
}
</style>
</head>
</apex:pageBlockSection>

<body>
 <div id="map"></div> 
</body>
</apex:pageBlock>
</apex:page>

and this is the controller extension:
public with sharing class Active {
    private final Event evento;
    public List<Event> eventconnected { get; set; }
    public Active(ApexPages.StandardController stdcontroller) {
    this.evento = (Event)stdController.getRecord();
    }
    public List<String> listOfAddresses {get; set;}
    
    
    public void cerca(){
    Date dataevento= evento.StartDateTime.date();
    System.debug(evento.StartDateTime + 'la data è');
    System.debug(dataevento + 'la data è');
    eventconnected=[select Owner.Name,Indirizzo__c, Citt__c,Cap__c,Regione__c,StartDateTime, EndDateTime,Subject 
                   from Event where Indirizzo__c != null And StartDateTime<=:dataevento+1 ];
    System.debug('la lista è'+ eventconnected.size());
    List<String> listOfAddresses = new List<String>();
    for(Event e: eventconnected){
       String indirizzo=e.Indirizzo__c;
       String citt=e.Citt__c;
       String Cap=e.Cap__c;
       string appoggio= indirizzo + ',' + citt + ',' + Cap;
       listOfAddresses.add(appoggio);  
    }
    System.debug('gli indirizzi sono'+ listOfAddresses.size());
     System.debug('gli indirizzi sono'+ listOfAddresses);
    }
}