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.
Related
I am using here maps to display points on the map and I would like to draw a line between two specific points.
I tried to lineString.pushPoint and combined to Polyline, but I only have a linear result. I would like to be able to link two existing markers to another existing one
You can add a marker at the start and/or endpoint like this:
function addPolylineToMap(map) {
var lineString = new H.geo.LineString();
lineString.pushPoint({lat:53.3477, lng:-6.2597});
lineString.pushPoint({lat:51.5008, lng:-0.1224});
lineString.pushPoint({lat:48.8567, lng:2.3508});
lineString.pushPoint({lat:52.5166, lng:13.3833});
map.addObject(new H.map.Polyline(
lineString, { style: { lineWidth: 4 }}
));
var startMarker = new H.map.Marker({lat:53.3477, lng:-6.2597});
map.addObject(startMarker);
var endMarker = new H.map.Marker({lat:52.5166, lng:13.3833});
map.addObject(endMarker);
}
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.
I draw a polyline to a google maps, and put markers to every point of it. I want to hide these markers higher zoom levels, therefore I use the Marker Manager. It's works well.
After draw everything, the map zoom to the bound of the polyline with the google.map.fitBound command. But if it zoom to far, where the markers would be hided, they don't. They still visible. If I drag or zoom again, they are hiding.
I use the markermanager in the simple way:
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarkers(aMarkers[0], 15, 0);
markerMgr.addMarkers(aMarkers[1], 12, 0);
markerMgr.addMarkers(aMarkers[2], 10, 0);
markerMgr.refresh();
});
Is anybody met this problem before? Thank is advance!
I had this same problem. When creating your markers, don't set the "map" parameter in the marker options. The MarkerManager will add the markers to your map as you zoom in and out.
For example:
var newMarker = new google.maps.Marker({
//map: map
position: markerPosition,
icon: icon
});
mgr.addMarker( newMarker, 9 );
Why do you have the maximum zoom for the markers set to 0?
MarkerManager.addMarkers(aMarkers[0], minZoom, maxZoom(optional))
Try (that parameter is optional per the documentation):
var aMarkers [...array of markers...],
markerMgr = new MarkerManager(map);
google.maps.event.addListener(markerMgr, 'loaded', function() {
markerMgr.addMarker(aMarkers[0], 15);
markerMgr.addMarker(aMarkers[1], 12);
markerMgr.addMarker(aMarkers[2], 10);
markerMgr.refresh();
});
Working Example
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.