I am using the following code to create a polyline on google maps where pts in a list of points.
walkroute = new google.maps.Polyline({
path: pts,
strokeColor: "#FF0000",
strokeOpacity: 0.4,
strokeWeight: 3,
geodesic: true'
});
walkroute.setMap(map);
I am using the following code to then try and remove the polyline but it does not appear to remove the polyline. can someone please give me the correct way to check if a polyline exists on the map and if so how to remove it.
function clearploylines();
if (walkroute === "undefined"){
if (walkroute.getMap === null) {
walkroute.setMap(null);
}
}
I created an JS Fiddle for you which shows how to hide or show same polyline.
It basically boils down to rows of:
function removePolyline() {
// polyline exists, remove
if(typeof polyline !== 'undefined') {
polyline.setMap(null);
}
}
Within your case, polyline variable is same as walkroute, but you will get the point when you open the js fiddle code.
Related
I know I am overlooking/not considering something elementary, but I don't know what I don't know...
Trying to use Fusion Tables to populate an array of Google Maps API circle objects and place them on a map.
Currently I am able to hard-code the array like so:
citymap['Dane'] = {
center: new google.maps.LatLng(43.10599621690524, -89.38682556152344),
population: 5000000
};
...and place them on a map.
And I am able to return JSON from the Fusion Tables, loop through and create what I think is an array and display it, but I can't make the circle objects appear.
Any advice on what I need to google/learn would be appreciated.
Here's an example using the new Trusted Tester API to generate Polygons to display on the map:
https://developers.google.com/fusiontables/docs/samples/mouseover_map_styles
The logic should be similar, but instead of a Polygon, you would create a Circle:
new google.maps.Circle({
center: new google.maps.LatLng(<lat>, <lng>),
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
radius: <radius>
});
You want to check out the Circle class; it provides a simple way to create circular shapes and place them on the map. Ok, so I see you've already found the shape class, so you are good there.
I think your problem is that you are turning everything into strings in your processing loop:
citymap = {};
for (var i = 0; i < data.table.rows.length; i++) {
citymap += 'citymap[\'' + data.table.rows[i][0] + '\'] = {' +
'center: new google.maps.LatLng(' + data.table.rows[i][1] + '),' +
'population: 2842518};';
}
I think you want code that looks more like this:
citymap = new Array();
for ( var i = 0; i < data.table.rows.length; i++ ) {
var circleData = {
center: new google.maps.LatLng( data.table.rows[i][1] );
position: 2842518
}
citymap.push( circleData );
}
I realize I have left some other bit of data out, but you get the idea. I believe your primary problem was that you were stringifying the code.
I'm trying to let people draw a rectangle on Google Maps and store the bottomLeft and topRight coordinates.
I know I can draw a Rectangle codewise (see: http://code.google.com/intl/nl-NL/apis/maps/documentation/javascript/reference.html#Rectangle), but before i can load the bounds from my DB the people need to define it themself first off course :)
So my question is, how can I let people draw a rectangle on Google Maps (API v3) and store the coordinates of the bottomLeft and topRight corner?
Already got it to work by looking into events. Took a lot of my time to make :)
This is how i've done it for people that need it to:
function mapsInitialize()
{
startPoint = new google.maps.LatLng(lat,lon);
options = { zoom: 16, center: startPoint, mapTypeId: google.maps.MapTypeId.HYBRID};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
google.maps.event.addListener(map, 'click', function(event) {
if (drawing == true){
placeMarker(event.latLng);
if (bottomLeft == null) {
bottomLeft = new google.maps.LatLng(event.latLng.Oa, event.latLng.Pa);
}
else if (topRight == null){
topRight = new google.maps.LatLng(event.latLng.Oa, event.latLng.Pa);
drawing = false;
rectangle = new google.maps.Rectangle();
var bounds = new google.maps.LatLngBounds(bottomLeft, topRight);
var rectOptions = {
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map: map,
bounds: bounds
};
rectangle.setOptions(rectOptions);
}
}
});
}
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
If I understand you properly - You need a way to get users inputting some polyline/polygon. If so - take a look at this example, where polygon is created by clicking a map. It uses some class PolygonCreator and jquery. You can adopt this method, and save result in form field (there possible a number of options: JSON or your own method of serialization)
If you just need to show that polygons on map and nothing more: you even can take advantage of geometry.encoding library and store encoded polylines into database. Or, if you are going to use spatial queries (for instance - detect if some point falls into your polygons) you better use spatial extnsion of some sort: MySQL spatial extensions, PostGIS, etc. In MySQL you can store polyline into Polyline or Polygon typed columns, which is based on OpenGIS formats.
Frankly, here on stackoverflow is a whole bunch of related information.
I've set up some polygons, drew them on the map just fine. I also managed to fire console.log when they were clicked. However, how would I go on about figuring out which polygon was actually clicked?
As you can see in my sample code here I store each object within the collection "lots", however - clicking them only gives me the lat-long of the click. I figured I might need to loop through my polygons and check if the point was clicked is intersecting them and thus figure out which polygon it is... is there an easier solution?
var lot = new google.maps.Polygon({
paths: me.area,
strokeColor: 'black',
strokeOpacity: 0.35,
strokeWeight: 1,
fillColor: fillcol,
fillOpacity: 0.35
});
lot.setMap(map);
var obj = {
'id':me.id,
'rented':me.rented,
'area':lot
};
google.maps.event.addListener(lot, 'click', function(event) {
console.log(event);
});
lots.push(lot);
Why don't assign to each polygon some id property when you create them and later just use this.myID? Truly speaking, you can hang all information you need on that polygon object.
var lot = new google.maps.Polygon({
paths: me.area,
strokeColor: 'black',
strokeOpacity: 0.35,
strokeWeight: 1,
fillColor: fillcol,
fillOpacity: 0.35
});
lot.setMap(map);
var obj = {
'id':me.id,
'rented':me.rented,
'area':lot
};
lot.objInfo = obj;
google.maps.event.addListener(lot, 'click', function(event) {
console.log(this.objInfo);
});
lots.push(lot);
It would be more effective than path comparison in a loop, or am i missing something? :)
If I can step in a little late with a different solution, I was having the same problem and discovered that you can define custom properties on a polygon.
My example (which creates a state on a map of the U.S.)
poly = new google.maps.Polygon({
map_state_id: map_state_id,
paths: pts,
fillColor: colour,
fillOpacity: 0.66,
strokeWeight: 1,
clickable:true
});
In this case "map_state_id" is the custom property. I have defined it to be the ID of the state (1 for Alabama, 2 for Alaska, etc.)
Then when the particular state is clicked later, this "map_state_id" can be passed into the event function.
google.maps.event.addListener(poly, 'click', function()
{
var map_state_id = this.map_state_id; //retrieve correct state_id
$.ajax(
{
type: "POST",
url: "http://www...get_state_info.php",
data: {state_id : map_state_id},
dataType: "html",
success: function(data)
{
$("#state_info").html(data); //display some info
}
});
});
I found this particular concept at http://dominoc925.blogspot.com/2011/12/add-your-own-property-field-to-google.html
Turned out getPath() works like a charm. I did not realize I actually got the polygon reference passed on the click event, to match this with my stored "lots" I simply loop through my stored lots and compare this.getPath to other.getPath, if they match I know which lot was clicked and can now show info related to this particular object.
Here's a code sample:
(where parking is an array of my parking area objects which themselves have arrays containing parking lot objects)
google.maps.event.addListener(lot, 'click', function(event) {
var myPath = this.getPath();
for(var i = 0; i < parking.length; i++){
for(var j = 0; j < parking[i].lots.length; j++){
var lot = parking[i].lots[j];
var otherPath = lot.poly.getPath();
if(otherPath == myPath){
console.log(lot);
break;
}
}
}
});
I am in the midst of converting old googlemap v2 code to v3. Now i stumble upon a problem how to create custom markers for a polyline? I managed to create custom markers just for points on a map. But when i use the "new" google.maps.Polyline to create a route/path i don't now how i can set custom markers.
I don't have a reference to the individul markers
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,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
i tried flightPlanCoordinates.setIcon("img/icon.jpg");
In my case i like to use 3 different icons (start, doing, finished).
back in v2 i had a switch function
function returnGIcon(type) {
var icon = new GIcon();
switch(type) {
And i used
for(i=1;i<points.length-1;i++) {
marker = new GMarker(points[i],{icon:returnGIcon('doing')});
map.addOverlay(marker);
}
How can i fix this?
A polyline shows a line between the points and does not add markers. If you still want to show a marker on each (specified) point on the polyline you need to add a GMarker on those points. So basically you create both the line and the GMarkers like you did before.
I am trying to create polyline outlines and fills for each state. I need the state polyline to be clickable. Also, when viewed at greater zoom levels the fill looks fragmented. Any suggestions?
see code below:
function drawBorder(){
var Polyline_Path = new google.maps.Polyline({
path: newyork,
strokeColor: "#CD0000",
// color of the outline of the polyline
strokeOpacity: 1,
// between 0.0 and 1.0
strokeWeight: 1,
// The stroke width in pixels
fillColor: "#CD0000",
fillOpacity: 1,
clickable: true
});
Polyline_Path.setMap(map);
google.maps.event.addListener(Polyline_Path, 'click', function() {
alert('you clicked polyline');
});
}
this code does work to make the polyline clickable but only in a very specific area of the polyline. Is there a way to configure it to detect a click event anywhere in the state
I used the google.maps.Polygon instead and it took care of fragmenting and clickable issues