1

I am using address for plotting the markers inside the map for Gmap3 instead of latitude and longitude. How can i set the maximum zoom level and set center while initial loading of the map with all markers and clusters inside the map view. Also while clicking on the cluster i need to zoom and show only the markers and sub clusters inside that particular cluster. my address array is given below

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type='text/javascript' src='gmap3.js'></script>
<script>
  function initialize() {
$("#map").gmap3({
  map:{
    options:{
    center: new google.maps.LatLng(<?php echo $result['latitude'];?>,<?php echo $result['longitude'];?>),zoomControlOptions: {
      style:google.maps.ZoomControlStyle.LARGE
    },
     zoom:7,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     mapTypeControl: true,
     mapTypeControlOptions: {
       style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
     },
     navigationControl: true,
     scrollwheel: true,
     streetViewControl: true
    }
  },
  marker:{
     values:addresstest,
    events:{ // events trigged by markers 
      click: function(marker){
         var map = $(this).gmap3("get");
         var latitude = marker.position.k;
         var longitude = marker.position.A;

            map.setCenter( new google.maps.LatLng(latitude,longitude));


      //  alert("Here is the default click event");
      }
    },
            options:{
              icon: new google.maps.MarkerImage(
                     themeimageurl+"/magicshow.png",
                    new google.maps.Size(37, 37, "px", "px")
                    )
            },
    cluster:{
      radius: 100,
      events:{ // events trigged by clusters 
        mouseover: function(cluster){
          $(cluster.main.getDOMElement()).css("border", "1px solid red");
        },
        mouseout: function(cluster){
          $(cluster.main.getDOMElement()).css("border", "0px");
        },click:function(cluster){
            var map = $(this).gmap3("get");
            map.setCenter(cluster.main.getPosition());
            map.setZoom(map.getZoom() + 1);
        }
      },
      0: {
        content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
        width: 53,
        height: 52
      },
      10: {
        content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
        width: 56,
        height: 55
      },
      20: {
        content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
        width: 66,
        height: 65
      }
    }
  }
});

}
initialize();

    </script>

The var addressdata is having the following data after JSON.parse.

[Object { address="Ann Arbor Area Conventi...MI 48104, Ann Arbor, MI", data="Cinetopia International Film Festival"}, Object { address="Livingston County Conve... 48139, Hamburg Twp, MI", data="Hamburg Family Fun Fest"}, Object { address="Riverside Park, 5 East ...MI 48197, Ypsilanti, MI", data="The Color Run Michigan Eastside"}, Object { address="Ann Arbor Area Conventi...MI 48109, Ann Arbor, MI", data="Ann Arbor Summer Festival"}, Object { address="University Center for t...MI 48104, Ann Arbor, MI", data="Parenting through Separation and Divorce"}, Object { address="Scarlett Middle School,...MI 48108, Ann Arbor, MI", data="Pickleball Mon /14 Drop-In"}, Object { address="Summit on the Park, 460...n, MI 48188, Canton, MI", data="Healthy U Pilates"}, Object { address="Washington Street Educa..., MI 48118, Chelsea, MI", data="Iddy Biddy Sports - Soccer"}, Object { address="Harlan Hatcher Graduate...MI 48109, Ann Arbor, MI", data="Engraved in Wood Exhibit: The Work of John DePol"}, Object { address="University of Michigan ...MI 48104, Ann Arbor, MI", data="Appropriation / Collabo...etcher and Miranda July"}, Object { address="University of Michigan ...MI 48104, Ann Arbor, MI", data="Changing Hands: Art Wit...Northeast and Southeast"}, Object { address="Chelsea Alehouse Brewer..., MI 48118, Chelsea, MI", data="Smartypants Trivia Smackdown"}, Object { address="Cobblestone Farm, 2781 ...MI 48108, Ann Arbor, MI", data="Cobblestone Farm Market"}, Object { address="VEO Art Studio, 114 Nor..., MI 48118, Chelsea, MI", data="Figure Drawing at VEO"}, Object { address="Harlan Hatcher Graduate...MI 48109, Ann Arbor, MI", data="Engraved in Wood Exhibit: The Work of John DePol"}, Object { address="University of Michigan ...MI 48104, Ann Arbor, MI", data="Appropriation / Collabo...etcher and Miranda July"}, Object { address="Chelsea Alehouse Brewer..., MI 48118, Chelsea, MI", data="Bluegrass and Roots"}, Object { address="South Ann Arbor St., Be...e, MI 48176, Saline, MI", data="Summer Music Series"}]
Arun Thomas
  • 81
  • 9
  • This answer may help you, take a look to `fitBounds` method : http://stackoverflow.com/questions/1556921/google-map-api-v3-set-bounds-and-center – AlexB Jun 02 '14 at 12:05
  • Hi AlexB, Thanks for your response. The main problem is that I am having only the address value as accurate. For me the latitude and longitude are same for every array values. So I need to set zoom level according to the latitude and longitude of the plotted markers as well as clusters inside the map. Iam new to google map. – Arun Thomas Jun 03 '14 at 05:39
  • To place a marker on the map, you MUST have the latitude / longitude (and not the address at human-readable format, like 5th Street, NY). So you have to transform your address into Latitude / longitude (take a look to geocoding : https://developers.google.com/maps/documentation/geocoding/ Then, the default behaviour when clicking on cluster (if you're using MarkerClusterer) is exactly the one you describe ; you have nothing to code. However, I never used the .gmap3({ }), so my answer is maybe incomplete. – AlexB Jun 03 '14 at 08:08

0 Answers0