I want to draw several circles in Google Maps API v3. I have found a script which seems to do right what I want. But so far, it works only for one circle. How should this code look like to draw "birrfeld" AND "zuerich"?
<script>
var birrfeld=new google.maps.LatLng(47.443411,8.234478);
var aelggialp=new google.maps.LatLng(46.80121,8.226692);
var zuerich=new google.maps.LatLng(47.463031,8.549252);
function initialize()
{
var mapProp = {
center:aelggialp,
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:birrfeld,
radius:6000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
var zuerich = new google.maps.Circle({
center:zuerich,
radius:8000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
You're not calling:
zuerich.setMap(map);
Example: http://jsfiddle.net/jKuck/
Related
In need of an example of how to show CAP (Common Alerting Protocol) location tags and areas from a feed (or file) on Google Maps. Currently I can show GeoRSS tags on Google Maps with this javascript code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="./jquery/jquery.zrssfeed.min.js" type="text/javascript"></script>
<script src="./jquery/jquery.vticker.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
function initialize() {
var myLatlng = new google.maps.LatLng(49.496675, -102.65625);
var mapOptions = {
zoom: 4,
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('publicgeorss'), mapOptions);
var georssLayer = new google.maps.KmlLayer({
url: 'http://api.flickr.com/services/feeds/geo/?g=322338#N20&lang=en-us&format=feed-georss'
});
georssLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize1);
And somewhere in the body:
<div id="publicgeorss" style="height:410px; width:400px"></div>
Thanks in advance.
It is straight forward. I dont know how you receive those CAP's, but if the format always is a you describe above you can use the following code :
(Have placed the CAP in a string variable, it would be the same from feed, ajax or file)
document.getElementById('show-cap').onclick = function() {
//parse CAP
var parser = new DOMParser(),
dom = parser.parseFromString(CAP, "text/xml"),
alert = dom.querySelector('alert');
//extract some data
var info = alert.querySelector('info'),
event = info.querySelector('event').textContent,
headline = info.querySelector('headline').textContent,
instruction = alert.querySelector('instruction').textContent,
latLngs = alert.querySelector('area').querySelector('polygon').textContent.split(',');
//create polygon
//CAP seems to have the polygon [1..length-1] and startpoint at [0,length]
var i, latLng,
start = new google.maps.LatLng(parseFloat(latLngs[0]), parseFloat(latLngs[latLngs.length-1])),
path = [start];
for (i=1;i<latLngs.length-1;i++) {
latLng = latLngs[i].split(' ');
path.push(new google.maps.LatLng(parseFloat(latLng[1]), parseFloat(latLng[0])));
}
new google.maps.Polygon({
paths: path,
fillColor: '#FF0000',
fillOpacity: 0.35,
strokeWeight: 0,
map: map
});
//find and set map center
var bounds = new google.maps.LatLngBounds();
for (i=0;i<path.length;i++) {
bounds.extend(path[i]);
}
map.setCenter(bounds.getCenter());
//create a marker
var marker = new google.maps.Marker({
position: bounds.getCenter(),
map: map
});
//create an infowindow with the headline and instructions
var info = new google.maps.InfoWindow({
content: '<h3>'+headline+'</h3>'+'<p>'+instruction+'</p>',
});
info.open(map, marker);
};
The result :
demo -> http://jsfiddle.net/wm5fsgas/
I have the following code to display the bicycling layer in Google Maps. But I wondered if it is possible to change the dark green colour to another colour?
I have tried setting the strokeColor is var mapOptions but this didn't seem to work.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(53.231472, -0.539783);
var mapOptions = {
zoom: 17,
center: myLatlng
};
var map = new google.maps.Map(
document.getElementById('map-canvas'),
mapOptions);
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas"></div>
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);
}
I'm trying to load markers from XML file on a map used for outputing directions. Basically, it's the combination of two demos found on Google's documentation pages.
Directions: https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel
XML: http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/downloadurl_info.html
I have first created the directions map and then tried to add XML file that contains markers.
I'm probably making a simple mistake, but since I'm not good with js and coding, can't find what. There are no errors displayed, only a blank page.
Here is my current code:
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP].push(control);
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/moredata.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), latlng);
}
});
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here is the (non-working) jsFiddle: http://jsfiddle.net/ajJ3u/
Problems from a quick review:
you are creating the map twice.
you don't have a createMarker function. If that call came from one of the examples, you missed bringing it to the new map.
downloadUrl is subject to a cross-domain security restriction. If your page is not running in the "http://gmaps-samples-v3.googlecode.com" domain, it won't work. You need to access xml from the same domain as the page is running in or use a proxy.
Example of directions from/to markers from xml (translated to v3 from Mike Williams' v2 tutorial
I am working on site updates for a company that includes adding a new Google Map for a new location.
I need to update the below code with new Longitude and Latitude co-ordinates, but don't know how to generate them based on the address.
<script type="text/javascript">
//<![CDATA[
function gmap_load() {
function createMarker(point, html, labeltext) {
var marker = new GMarker(point, {title:labeltext});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("googlemap"));
map.setCenter(new GLatLng(51.71,-1.96), 11);
map.addControl(new GLargeMapControl());
map.addControl(new GScaleControl());
var point = new GLatLng(51.71448,-1.97357);
marker = createMarker(point,
"<div class=smalltext>David Lloyd,<br>Latham Road,<br>Blunsdon,<br>Swindon.<br>SN25 4DL</ div>", "Swindon clinic");
map.addOverlay(marker);
}
}
//]]>
</script>
Found this site that provides you with the data I needed: http://universimmedia.pagesperso-orange.fr/geo/loc.htm
Thanks