简体   繁体   中英

Google Maps - Locations and Circle

Hello Stackoverflowers,

I am trying to combine both multiple locations and a circle within the same map, I have had a look around to see how to combine two different element types but I have yet to find anything useful.

Below is some example code that draws a circle:

<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>

var Hotspot=new google.maps.LatLng( 29.9597675231189 , -93.9675262286223 );


function initialize()


{
var mapProp = {
  center:Hotspot,
  zoom:7,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var Circle = new google.maps.Circle({
  center:Hotspot,
  radius:25000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0
  });

Circle.setMap(map);


}


google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>

<div id="googleMap" style="width:500px;height:380px;"></div>

</body>
</html>

Now for example if I wishied to place 2 markers at:

lat 29.937641 long -93.969326 lat 30.063964 long -94.116131

How would I incorporate that into the above code? Or visa versa if I had code with points how would I incorporate the circle elements?

As always thanks for your help in advance!

function initialize()
{
var mapProp = {
  center:Hotspot,
  zoom:7,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker1=new google.maps.Marker({map:map, position: new google.maps.LatLng(29.937641,-93.969326)}); 
var marker2=new google.maps.Marker({map:map, position: new google.maps.LatLng(30.063964 .-94.116131)});

var Circle = new google.maps.Circle({
  center:Hotspot,
  radius:25000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0
  });

Circle.setMap(map);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM