CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Merle_the_Pearl
Merle_the_Pearl

Reputation: 1521

Draw Shaded Area on Google Map V3 - Javascript

Map Shaded http://demo.silkea.com/map_shade.png

I am trying to accomplish drawing a referenced area for example. Just shaded, static, no further user inputs or changes.

Trying to accomplish with Javascript and Google Map V3 - can find examples of of drawing dynamically but not static.

Any help appreciated

Got her... Here it is for others... Thx for suggestions...

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 <script type="text/javascript">

 function initialize() {
 var myLatLng = new google.maps.LatLng(51.176630373, -114.47321937);
 var myOptions = {
  zoom: 15,
  center: myLatLng,
  mapTypeId: google.maps.MapTypeId.HYBRID
 };

 var mapsquare;

 var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);

 var squareCoords = [
 new google.maps.LatLng(51.179858807660786, -114.47836921691896),
 new google.maps.LatLng(51.173563152178794, -114.47836921691896),
 new google.maps.LatLng(51.173563152178794, -114.46892784118654),
 new google.maps.LatLng(51.179858807660786, -114.46892784118654)
];

 // Construct the polygon
 mapsquare = new google.maps.Polygon({
  paths: squareCoords,
  strokeColor: "#FF0000",
  strokeOpacity: 1,
  strokeWeight: 1,
  fillColor: "#FF0000",
  fillOpacity: 0.35
 });

 mapsquare.setMap(map);
 }
 </script>
 </head>
 <body onload="initialize()">

 <br><br>


 NW Marker <br>
 51.179858807660786  &nbsp;&nbsp;&nbsp;  -114.47836921691896
 <br><br>
 SE Marker<br>
 51.173563152178794 &nbsp;&nbsp;&nbsp;   -114.46892784118654
 <br><br>
 <div id="map_canvas" style="width: 850px; height: 450px;"></div>



 <br><br>


 <br><br>
 </body>

Upvotes: 2

Views: 2861

Answers (1)

Sean Mickey
Sean Mickey

Reputation: 7716

It sounds like an InfoBox will do what you need; it functions similar to a label on the map. Or, if you need something that will allow you to exactly define the corners at specific coordinates, you could try a google.maps.Rectangle.

Follow up Edit:

The problem in your code is that 2 of the coordinates are out of order, so the shape is getting twisted to follow the coordinates. If you take the existing shape coordinates:

var squareCoords = [
    new google.maps.LatLng(51.179858807660786, -114.47836921691896),
    new google.maps.LatLng(51.173563152178794, -114.47836921691896),
    new google.maps.LatLng(51.179858807660786, -114.46892784118654),
    new google.maps.LatLng(51.173563152178794, -114.46892784118654)
];

And just reverse the order of the last two points, you will get:

var squareCoords = [
    new google.maps.LatLng(51.179858807660786, -114.47836921691896),
    new google.maps.LatLng(51.173563152178794, -114.47836921691896),
    new google.maps.LatLng(51.173563152178794, -114.46892784118654),
    new google.maps.LatLng(51.179858807660786, -114.46892784118654)

];

And this will work fine. Here is an image of the map I get running a local unit test: enter image description here

Upvotes: 1

Related Questions