Develop Reference

Google Maps Markers with numbers

so, i'm working on a project that uses maps a lot, and a job was passed to me,
I have to make all this google maps Markers.
And put NUMBERS MANUALLY:
I asked if its possible to put the numbers by code, they say that is not, this need to be done this way.
So, i need to know, there is a way of changing this numbers by javascript or css or anything that could automatize this process.

It is indeed very possible - simply use the label attribute :
var marker = new google.maps.Marker({
position: new google.maps.LatLng(56.43, 10.3),
map: map,
label: '6' //<-- 6 will be the text inside the marker
});
demo with different numbers -> http://jsfiddle.net/ec2cr0jw/
But you can only add labels with one character, so your range of numbers is limited to 0..9. If you want more complex text or longer numbers in the markers, you can create the markers yourself from scratch, like in the answer to this question -> How to add values in google map v3

Colour-coding points on Google Maps

I'm currently developing an application as a page of a college project to display information about house price costs and am looking to implement a colour-coded map for different years. The idea would be that there would be a dot where each house sold was located on a map (Google Maps for example), and colour-coded green to red depending on how expensive it was.
I'm looking for a way to implement this using the Google Maps API, but have been unable to find a solution that doesn't seriously slow up the application as I would be loading in ~30k datapoints for each year and the application currently had 5 years worth of data.
Would anyone have any suggestions on what to use. I've looked at Google's Geocharts and they don't really offer what I am looking for. I've also looked at Heatmaps, and though they get the colouring effect I'm looking for, the points are weighted so the colour is dependent on proximity rather than my specified variable, price.

30K points * 5 years = 150K markers. That might be too much. You should be looking for a way to show only one year of history at a time and/or use marker clustering.
Regarding the color markers, you could use SVG markers for that. You can easily change the color of your SVG path. With a little bit of calculation, you should be able to process all your points and define the color in which to draw the markers.
Example round SVG marker:
var icon = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: // your marker color,
fillOpacity: .8,
anchor: new google.maps.Point(0, 0),
strokeWeight: 0
}
var marker = new google.maps.Marker({
position: // your marker position,
map: map,
draggable: false,
icon: icon,
title: 'some title'
});
Here is a quick example:
JSFiddle demo

Google Maps API: Bézier curve polyline wrap

By using the Bezier curve polyline draw function provided by nicoabie I was able to draw a curved line from one point on the map to another. The problem is that this function does not take in to account the fact that when a point is past the maximum coordinate mark it is not necessarily on the other side of the map, since it wraps around.
For example, drawing a curved line from Seattle to Tokyo. A regular polyline would go across the Pacific ocean, but the the curved line draws east across the whole globe.
geodesic: true does not work in this case since the line must have a consistent curvature.
My question is: can a consistently curved line be drawn that takes in to account map wrapping?

Use the option third "nowrap" argument of the google.maps.LatLng class to force all the relevant points to have the same sign (set it to true, it defaults to false).
gmarkers[10].setPosition(new google.maps.LatLng(35.689488,139.69170)); // Tokyo
gmarkers[0].setPosition(new google.maps.LatLng(47.60621,(360-122.332071),true)); // Seattle
boundsCenter.setPosition(new google.maps.LatLng(36.096756,(360-178.986565),true)); // control point 1
gmarkers[6].setPosition(new google.maps.LatLng(48.511996,180)); // control point 2
var curvedLine = new GmapsCubicBezier(gmarkers[0].getPosition().lat(), gmarkers[0].getPosition().lng(), boundsCenter.getPosition().lat(), boundsCenter.getPosition().lng(), gmarkers[6].getPosition().lat(), gmarkers[6].getPosition().lng(), gmarkers[10].getPosition().lat(), gmarkers[10].getPosition().lng(), 0.01, map);
working fiddle

GoogleMaps API V3 Build Polygon Containing Multiple ZipCodes

I have to allow a user to input multiple zip codes, retrieve the latitude and longitude from a database and then build a huge polygon that encompasses them.
I'm coding in Java and using Google Maps API V3. I have no problem doing a single zip code build. But upon adding more zip codes the polylines that are generated go hay-wire and distort the polygon, as pictured below.
What do I need to change in my code to make all these smaller polygons into one larger one? I've scoured Google for answers and all I've managed to come across is building each zip code's polygon individually but that still won't give me a end result of a larger, single polygon.
Currently, after the zip codes are inputted the program collects the lat and long points from the database and feeds them into a giant array of arrays (a String[][] to be exact), which is then passed the the html and javascript to generate the resulting polygon.
My javascript is highly similar to the GoogleMaps API V3 simple polygon example:
function clearHello(coords1){
coords = coords1
var triangleCoords = new Array();
var l = coords.length;
for (var x = 0; x < l; x++){
triangleCoords[x] = new google.maps.LatLng( coords[x][0], coords[x][1]);
}
// Construct the polygon.
bermudaTriangle = new google.maps.Polygon({
paths: triangleCoords,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(document.map);
Suggestions? Is there a code technique out there that will take my giant array and then remove the interior points that appear to be the cause of this distortion?
EDIT: Wondering about a different approach, does anyone know of a way to remove the interior lines that creating the bizarre trapezoid thing so that the zipcode polygon can fill in properly? I know I can make them transparent, but that doesn't stop the distortion of the polygon. Also simply managing it as a few polygons that I populate won't work as this program needs to be able to handle up to 200 zip codes worth of coordinates at a time.

It sounds like you're wanting to remove shared boundaries and create a kind of macro object. In the land of Geographic Information Systems (GIS), this sort of operation is called known as "Dissolve". You can combine two 3rd-party libraries to do what you want exclusively in JavaScript code.
How to do a GIS Dissolve in JavaScript
You can combine both the Wicket and the JavaScript Topology Suite (JSTS) libraries to perform a Union/Dissolve operation and derive a single polygon geometry with a united outer boundary.
In simple terms, Wicket will handle going to and from your Google Maps Polygon objects to Well Known Text (WKT) geometry expressions, and the JSTS can then do a union/dissolve operation using the WKT.
Preliminary steps: Download the two libraries and reference them in your project.
1) First download the JSTS library, unzip it, browse into the lib folder, and include the two lib files (javascript.util.js, and jsts.js) in your project. I copied mine into a separate jsts folder and referenced them in my project like this..
<script type="text/javascript" src="jsts/javascript.util.js"></script>
<script type="text/javascript" src="jsts/jsts.js"></script>
2) Next download the Wicket library, unzip it, and include wicket.js and wicket-gmap3.js in your project. Similarly, I copied mine into a separate wicket folder and referenced them like this..
<script type="text/javascript" src="wicket/wicket.js"></script>
<script type="text/javascript" src="wicket/wicket-gmap3.js"></script>
Use Wicket to get the Polygon WKT geometries, then use JSTS to perform a Dissolve operation.
3) Unite these two libraries to get Well Known Text geometries from Wicket, and perform a Dissolve operation with JSTS.
My demo assumes two Google polygon objects were already instantiated and were passed into the method—polygon1 and polygon2. Obviously this is intended to be a simple example, so you'll need to modify it for more elaborate operations.
function DissolveTwoGeometriesWithJSTS(polygon1, polygon2)
{
// Instantiate Wicket
var wicket = new Wkt.Wkt();
wicket.fromObject(polygon1); // import a Google Polygon
var wkt1 = wicket.write(); // read the polygon into a WKT object
wicket.fromObject(polygon2); // repeat, creating a second WKT ojbect
var wkt2 = wicket.write();
// Instantiate JSTS WKTReader and get two JSTS geometry objects
var wktReader = new jsts.io.WKTReader();
var geom1 = wktReader.read(wkt1);
var geom2 = wktReader.read(wkt2);
// In JSTS, "union" is synonymous with "dissolve"
var dissolvedGeometry = geom1.union(geom2);
// Instantiate JSTS WKTWriter and get new geometry's WKT
var wktWriter = new jsts.io.WKTWriter();
var wkt = wktWriter.write(dissolvedGeometry);
// Reuse your Wicket object to ingest the new geometry's WKT
wicket.read(wkt);
// Assemble your new polygon's options, I used object notation
var polyOptions = {
strokeColor: '#1E90FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#1E90FF',
fillOpacity: 0.35
};
// Let wicket create a Google Polygon with the options you defined above
var newPoly = wicket.toObject(polyOptions);
// Now I'll hide the two original polygons and add the new one.
polygon1.setMap(null);
polygon2.setMap(null);
newPoly.setMap(map);
}
Here's what basically happened. Before executing the code..
and after..

You can try topojason javascript. A good start is also a concave hull. I have wrote a concave hull php class # phpclasses.org. It takes a set of points and find the concave hull with the concave hull algorithm. Basically it's a delaunay triangualation and you delete the longest edges. You can also read my answer here:Calculate bounding polygon of alpha shape from the Delaunay triangulation.

The solution is to use GeoJson to represent what you want and there is a API for that, so you don't have to worry about the backend or any distortion in the polygon(s), as pictured below.:
here: www.boundaries-io.com
example query:
/rest/v1/public/boundary?zipcode=30044,30043,30045'
you can also query for multiple counties,cities,etc in one line of code.
simple in java script:
https://developers.google.com/maps/documentation/javascript/datalayer#sample_geojson
...
map.data.loadGeoJson('.../rest/v1/public/boundary?zipcode=30044,30042,30045'');
...
results gives this, with additional queryable information per zipcode:
*****I do work for the company*

Open Street Map long line disappears at high zoom level

I'm working on a pathcreator with osm. Adding lines works fine, but when one makes a very long line and zooms in on it, the line disappears at a high zoom level. It seems that this appears if the viewport is to far away from the start and/or end point of the line. Maybe splitting the line could help, but which is the max size for this?
here is a minified code sample, if you zoom in to level 7 the line is gone:
$(document).ready(function() {
var map = new OpenLayers.Map('map');
var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
map.addLayer(mapnik);
var path = new OpenLayers.Layer.Vector("path");
map.addLayer(path);
var pathStyle = {
strokeColor: "#0033ff",
strokeOpacity: 0.7,
strokeWidth: 5
};
var points = new Array(
new OpenLayers.Geometry.Point(-7856503.5146562, 880554.5664875),
new OpenLayers.Geometry.Point(8502243.5278938, 724011.5325875)
);
var line = new OpenLayers.Geometry.LineString(points);
var lineFeature = new OpenLayers.Feature.Vector(line, null, pathStyle);
path.addFeatures([lineFeature]);
map.zoomToExtent(path.getDataExtent());
});
i'm quite new to osm so maybe im just messing up something.. Any ideas? Thanks in advance

I was playing around with firebug and going through the svg elements. It turned out that osm uses svg polyline for making lines. The values of the line are running out of space with values over 15000 which is to much for there renderer.
I checked in a bug report on this issue:
https://github.com/openlayers/openlayers/issues/617
My current workaround is to split the line into 100 km peaces. This works but takes more calculations.
if someone is intressted here is a site with helpful math:
http://www.movable-type.co.uk/scripts/latlong.html