i am new to stackoveflow, can any one help me to how to draw a rectangle using google api v3, i went through some examples on google i got the below code,
function initialize() {
var coachella = new google.maps.LatLng(33.6803003, -116.173894);
var rectangle;
var myOptions = {
zoom: 11,
center: coachella,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
rectangle = new google.maps.Rectangle();
google.maps.event.addListener(map, 'zoom_changed', function() {
// Get the current bounds, which reflect the bounds before the zoom.
var rectOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
bounds: map.getBounds()
};
rectangle.setOptions(rectOptions);
});
}
But, it functions on zoom event(zoom chanages),i want simple with out event,please help me
map.getBounds() may return not the desired bounds when called to early(immediately after the instantiating of the map).
You may use tilesloaded instead
google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
/*your code*/
});
Related
Google Maps circle looks like hand drawn.
Circle script is:
var circle = new google.maps.Circle({
center: myLatLng,
radius:1000,
strokeColor: "#000000",
strokeOpacity:1,
fillOpacity:0.4,
strokeWeight: 2,
fillColor: "#000000",
map:map
});
Can we make the circle more fine tuned.
My requirement is to show circle around marker with fine tuned circle border.
You could try using a symbol. I don't believe there's an option to change those circles from using the "hand-drawn" style. It's odd because their rectangles don't seem to be using that look.
Here is an example :
https://developers.google.com/maps/documentation/javascript/examples/marker-symbol-predefined
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var myCircle = {
path: google.maps.SymbolPath.CIRCLE,
fillColor: 'red',
fillOpacity: 0.8,
scale: 20,
strokeColor: 'black',
strokeWeight: 3
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: myCircle,
map: map
});
}
Here is an example of a circle around a marker :
function initialize() {
var myLatlng = new google.maps.LatLng(16.5083,80.64);var mapOptions = {zoom: 12,center: myLatlng};
var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
var marker = new google.maps.Marker({map: map,position: myLatlng});
var circle = new google.maps.Circle({
map: map,
radius: 2000,
fillColor: '#000000',
fillOpacity: 0.4,
strokeColor: '#000000',
strokeWeight: 2
});
circle.bindTo('center', marker, 'position');
}
google.maps.event.addDomListener(window, 'load', initialize);
I've followed the instruction given on the Google Maps API site, but my circle is never being drawn to my map, and I don't really understand what I am missing, could anybody point me in the right direction?
Here is my method to add the new address marker and search radius to the map (Note that the marker is added as expected):
// Add the users point to the map
function addAddress() {
// Get the users current location
var location = document.getElementById("P1_LOCATION").value; // Users postcode
var radius_size = document.getElementById("P1_RADIUS").value; // Users radius size in miles
var search_radius;
// Translate the users location onto the map
geocoder.geocode({ 'address': location}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
// Center around the users location
map.setCenter(results[0].geometry.location);
// Place a marker where the user is situated
var marker = new google.maps.Marker({
map:map,
position: results[0].geometry.location
});
// configure the radius
// Construct the radius circle
var radiusOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: marker.center, // I want to set the center around the users location
radius: radius_size // I want the radius to be in miles, how do I do this?
};
// add the radius circle to the map
search_radius = new google.maps.Circle(radiusOptions);
}
});
}
And I'm sure someone will ask if I have configured a base map object, this is done in my initializer method:
var geocoder;
var map;
// Create our base map object
function initialize()
{
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0,0);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
How would I go about getting the radius to display around the given point? any suggestiosn would be greatly appreciated.
I get this error with the posted code: Uncaught InvalidValueError: setRadius: not a number
But the real issues was this: center: marker.center, should be center: marker.getPosition(), (a google.maps.Marker doesn't have a "center" property)
working code snippet:
// Add the users point to the map
function addAddress() {
// Get the users current location
var location = document.getElementById("P1_LOCATION").value; // Users postcode
var radius_size = parseFloat(document.getElementById("P1_RADIUS").value); // Users radius size in meters (unless you scale it to miles)
var search_radius;
// Translate the users location onto the map
geocoder.geocode({
'address': location
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Center around the users location
map.setCenter(results[0].geometry.location);
// Place a marker where the user is situated
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// configure the radius
// Construct the radius circle
var radiusOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
map: map,
center: marker.getPosition(), // I want to set the center around the users location
radius: radius_size // I want the radius to be in miles, how do I do this?
};
// add the radius circle to the map
search_radius = new google.maps.Circle(radiusOptions);
}
});
}
var geocoder;
var map;
// Create our base map object
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(0, 0);
var mapOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="P1_LOCATION" value="08646" type="text" />
<input id="P1_RADIUS" value="10000" type="text" />
<input id="geocode" value="geocode" type="button" onclick="addAddress()" />
<div id="map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
For anybody in future who encounters the same problem, make sure you take the extra step which is not demonstrated in the API guide, and that is to set the Map which the radius object belongs too, in my case:
search_radius.setMap(map);
I'm using the following code to draw a polyline on Google map. I want to initialize the map in a separate function and draw polyline in another. When I put their codes in separate functions, things don't work for me. Can anyone tell me how to separate polyline and map initialization?
function initialize() {
var mapOptions = {
zoom: 3,
center: new google.maps.LatLng(0, -180),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
You may separate out the code for drawing polyline and call this function from idle listener registered during map initialization.
I have this code where when the user clicks on the map like 3 times a polygon is created as well as a marker in each nodal point. Anyone knows how I could calculate the middle point of the polygon and drop a marker there as well ? thanks. here is my code.
var poly;
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map'),
{
zoom: 14,
center: new google.maps.LatLng(12.303022,76.644917),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
poly = new google.maps.Polygon(
{
strokeColor: '#000000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#000000",
fillOpacity: 0.26
});
poly.setMap(map);
google.maps.event.addListener(map, 'click', addLatLng);
}
function addLatLng(event)
{
var path = poly.getPath();
path.push(event.latLng);
var marker = new google.maps.Marker(
{
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
I recently found an example which uses fusiontablelayer to show routes on a map and I wonder how could I style my normal polylines to have shadows like these: http://gmaps-samples-v3.googlecode.com/svn/trunk/fusiontables/cycletrails.html Those looks really, really nice and I cant find an solution to do it with my polylines. (example of polyline without shadow: https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-simple)
Thnx in advance!
You could do something like this:
http://www.geocodezip.com/v3_GoogleEx_polyline-simple_shadow.html
(put a thicker transparent polyline under yours, looks like what I see them doing)
You could probably get the same effect the same way by using a KmlLayer or a FusionTablesLayer, rather than native Google Maps API v3 Polylines.
Code:
function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var mapOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPathShadow = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: 'black',
strokeOpacity: 0.1,
strokeWeight: 10
});
flightPathShadow.setMap(map);
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
}
Those trails are painted on custom tiles, for example:
http://mt0.googleapis.com/mapslt?hl=en-US&lyrs=ft%3A132848|h%3Afalse|s%3Aselect%2520geom%2520from%2520132848%2520where%2520distance%2520%253C%252092&x=83&y=199&z=9&w=256&h=256&source=apiv3&token=125180