CODEWITHSUNDEEP
phpjquerygoogle-mapsgoogle-maps-api-3polygon
Nandhini
Nandhini

Reputation: 54

In Google map api 3 find the center of the polygon and display string in the center of the polygon or circle

I need to draw a polygon or circle which is a delivery area of a online store and show the price text in side each polygon of the delivery zones.

Below is the code to draw the each polygon and circle.

function initMap() {
  var bounds = new google.maps.LatLngBounds();
  var latlng = new google.maps.LatLng(-22.5747697,-43.857650); 
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  });

  // Define the LatLng coordinates for the polygon's path.
  var latlons = [{lat:-22.702726,lng:-43.517858},{lat:-22.704207,lng:-43.499491},{lat:-22.708606,lng:-43.481681},{lat:-22.71579,lng:-43.464968},{lat:-22.725539,lng:-43.449859},{lat:-22.73756,lng:-43.436813},{lat:-22.751487,lng:-43.426226},{lat:-22.766897,lng:-43.41842},{lat:-22.783323,lng:-43.413633},{lat:-22.800266,lng:-43.412012},{lat:-22.81721,lng:-43.413607},{lat:-22.833642,lng:-43.418371},{lat:-22.849062,lng:-43.42616},{lat:-22.863,lng:-43.436738},{lat:-22.875033,lng:-43.449784},{lat:-22.884794,lng:-43.464902},{lat:-22.891987,lng:-43.481632},{lat:-22.896392,lng:-43.499465},{lat:-22.897876,lng:-43.517858},{lat:-22.896392,lng:-43.536251},{lat:-22.891987,lng:-43.554084},{lat:-22.884794,lng:-43.570814},{lat:-22.875033,lng:-43.585931},{lat:-22.863,lng:-43.598978},{lat:-22.849062,lng:-43.609556},{lat:-22.833642,lng:-43.617345},{lat:-22.81721,lng:-43.622108},{lat:-22.800266,lng:-43.623703},{lat:-22.783323,lng:-43.622082},{lat:-22.766897,lng:-43.617296},{lat:-22.751487,lng:-43.60949},{lat:-22.73756,lng:-43.598903},{lat:-22.725539,lng:-43.585857},{lat:-22.71579,lng:-43.570748},{lat:-22.708606,lng:-43.554035},{lat:-22.704207,lng:-43.536225},{lat:-22.702726,lng:-43.517858}];

    var poly = new google.maps.Polygon({
      paths: latlons,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    poly.setMap(map);


  var center = poly.getBounds().getCenter();

  map.fitBounds(poly.getBounds());

  google.maps.event.addListener(map, "idle", function()
  {
      google.maps.event.trigger(map, 'resize');
  });
}

I have checked the options to find the center of the polygon but that is not working for me either and included above.

Upvotes: 1

Views: 332

Answers (1)

Ashok
Ashok

Reputation: 870

This solution works for me perfectly also matches the same scenario which which your are looking.

// This example creates a simple polygon representing the Bermuda Triangle.
var gpolygons = [];

function initStaticMap() {
  var bounds = new google.maps.LatLngBounds();
  var latlng = new google.maps.LatLng(-22.5747697,-43.857650);
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 10,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  });

  // Define the LatLng coordinates for the polygon's path.
  <?php if($store_delivery_zone){ foreach($store_delivery_zone as $point){ ?>
  var coord<?php echo $point['delivery_zone_id']; ?> = <?php echo $point['polygon_points']; ?>;

  // Construct the polygon.
  var poly<?php echo $point['delivery_zone_id']; ?> = new google.maps.Polygon({
    paths: coord<?php echo $point['delivery_zone_id']; ?>,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  poly<?php echo $point['delivery_zone_id']; ?>.setMap(map);

  //Define position of label
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < coord<?php echo $point['delivery_zone_id']; ?>.length; i++) {
      bounds.extend(coord<?php echo $point['delivery_zone_id']; ?>[i]);
  }

  var myLatlng<?php echo $point['delivery_zone_id']; ?> = bounds.getCenter();

  var mapLabel<?php echo $point['delivery_zone_id']; ?> = new MapLabel({
      text: '<?php echo $point['delivery_cost']; ?>',
      position: myLatlng<?php echo $point['delivery_zone_id']; ?>,
      map: map,
      fontSize: 20,
      align: 'left'
  });
  mapLabel<?php echo $point['delivery_zone_id']; ?>.set('position', myLatlng<?php echo $point['delivery_zone_id']; ?>);
  var obj = {};
  obj.poly = poly<?php echo $point['delivery_zone_id']; ?>;
  obj.label = mapLabel<?php echo $point['delivery_zone_id']; ?>;
  gpolygons.push(obj);

  <?php } } ?>

  google.maps.event.addListener(map, "idle", function()
  {
      google.maps.event.trigger(map, 'resize');
  });
}

Comment if you need any further help on this.

Upvotes: 1

Related Questions