Databases
StackOverflow2013
Postsdbo
POUnable to view map circle overlay results in Google JS API V3
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUnable to view map circle overlay results in Google JS API V3
    primarykey
    data
    text
    <p>I have been testing this in the Google Code Playground before I try to implement anything further. </p> <p>This simply places a map marker on the map and produces a circle overlay with it by a radius given in miles. However, I am still unable to get this to work. </p> <p>It seems to break on the circle overlay creation. I have been searching for a solution but everything I have tried so far either breaks (the map does not display) or gives me no result (no circle overlay).</p> <p>Note: I came across a similar question [question:] <a href="https://stackoverflow.com/questions/7712861/circle-overlay-in-google-map-v3-api-js">Circle overlay in Google Map V3 API js</a> . I tried this solution but it did not work. </p> <pre><code>function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(30.6957, -88.1813), 13); var latlng = new GLatLng(30.6957, -88.1813); map.addOverlay(new GMarker(latlng)); var draw_circle = null; function Draw_Circle(Miles) { Miles *= 1600; if (draw_circle != null) { draw_circle.setMap(null); } draw_circle = new google.maps.Circle({ center: latlng, radius: Miles, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map: map }); } Draw_Circle(15); } } </code></pre> <p>Thank you again in advance.</p> <p>EDIT: Now that I have been informed that I was mixing API Versions. I came up with the following:</p> <pre><code>var latLng; function initialize() { var map; var mapDiv = document.getElementById('map-canvas'); map = new google.maps.Map(mapDiv, { center: new google.maps.LatLng(30.6957, -88.1813), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); latLng = new google.maps.LatLng(30.6957, -88.1813); var marker = new google.maps.Marker({ position: latLng, map: map }); var draw_circle = null; function Draw_Circle(Miles) { Miles *= 1600; if (draw_circle != null) { draw_circle.setMap(null); } draw_circle = new google.maps.Circle({ center: latlng, radius: Miles, strokeColor: "#FF0000", strokeOpacity: 0.8, strokeWeight: 2, fillColor: "#FF0000", fillOpacity: 0.35, map: map }); } Draw_Circle(15); } </code></pre> <p>I am ALMOST there... Now, I don't have any error messages from the debugger to signify what is wrong with my circle overlay.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USExitium
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COThis looks like a mix of V2 and V3. which api are you referencing?
      singulars
      1. POUnable to view map circle overlay results in Google JS API V3
      1. USJacob George
    2. COThat I did not know. I should only be using Version 3. The example I got the function from was supposed to be V3.
      singulars
      1. POUnable to view map circle overlay results in Google JS API V3
      1. USExitium
    3. COare you getting any errors in your [console](http://stackoverflow.com/questions/66420/how-do-you-launch-the-javascript-debugger-in-google-chrome)? (like GMap2 undefined)
      singulars
      1. POUnable to view map circle overlay results in Google JS API V3
      1. USJacob George
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload