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);
}
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>
Hi, i am trying to point out the location of my company. It goes to the right location but the pointer is missing. I tried alot of things but it still doesn't work. I am a beginning programmer and i need some help. Thank you for your time.
This is my code:
<jsp:include page="header.jsp">
<jsp:param name="subTitle" value="AutoTotaalDiensten - Locatie info" />
</jsp:include>
</head>
<%# include file="menu.html"%>
Locatie
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<style>
#map_canvas {
height: 400px;
}
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
var mapPin = " http://www.google.com/mapfiles/marker.png";
var Marker = new google.maps.Marker({
center : new google.maps.LatLng(52.124707, 5.088196),
zoom : 13,
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<%# include file="footer.html"%>
Call Marker.setMap(map) after you initialize the map.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center : new google.maps.LatLng(52.124707, 5.088196),
zoom : 13,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var mapPin = " http://www.google.com/mapfiles/marker.png";
var Marker = new google.maps.Marker({
position : map_options.center,
});
var map = new google.maps.Map(map_canvas, map_options)
Marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
Or create it after you create and initailize the map and set its "map" property.
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center : new google.maps.LatLng(52.124707, 5.088196),
zoom : 13,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var mapPin = " http://www.google.com/mapfiles/marker.png";
var map = new google.maps.Map(map_canvas, map_options)
var Marker = new google.maps.Marker({
map: map,
position: map.getCenter()
});
}
google.maps.event.addDomListener(window, 'load', initialize);
working fiddle
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/
I have a question that may sound silly. I wrote javascript code to integrate APEX. The purpose of this part is to show Google map according to address and have infowindow. The infowindow will show name as content, and it is a link which leads to the detail report of that guy. Problem is: infowindow works well for most of names in database, but shows no content (the link) with certain name. I do not find any special for these names, such as "Robert Allan Lockett". Here I attach code as follows:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
function initialize() {
var myOptions = { zoom: 18, mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var markerBounds = new google.maps.LatLngBounds();
var point=new google.maps.LatLng(&P3006_TF_GEOCODING.);
markerBounds.extend(point);
map.fitBounds(markerBounds);
var listener = google.maps.event.addListener(map, "idle", function() {
map.setZoom(map.getZoom()-4);
google.maps.event.removeListener(listener);
});
var marker;
marker = new google.maps.Marker({ position: new google.maps.LatLng(&P3006_TF_GEOCODING.), map: map });
var infowindow = new google.maps.InfoWindow({ content: "&P3006_H_OFFENDER_NAME."});
var current_parameter ="&APP_ID.:216:&SESSION.::NO::P216_DETAIL:"+"&P3006_H_OFFENDER_ID.";
var my_URL="http://lsg-solutions.com:9704/apex/f?p="+encodeURIComponent(current_parameter);
infowindow.setContent('<a href='+my_URL+'>&P3006_H_OFFENDER_NAME.</a>');
google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker);});
}
</script>