I'm absolute newbie as for Google Map / Yahoo Map. I would like to know if it is technically possible to ask to show any city in any country DYNAMICALLY (I mean by passing parameters) and then to show some pictures OVER the map near the city ?
Thanks.
There's a multitude of ways you could accomplish this, some prettier than others.
You could use GInfoWindow to display a popup window with pictures in it at any location.
You could use one of the handy libraries offered here http://code.google.com/p/gmaps-utility-library-dev/ to assist you in displaying those images.
What I would recommend, however, is using http://econym.org.uk/gmap/ewindows.htm to create a window that is similar to GInfoWindow but that is styled by you. Just style the window so that it appears to simply be an overlaid picture.
You could choose to fool around with z-index's and manual positioning with a JavaScript library like jQuery.
Also, to answer the beginning of your question yes you can refocus the map anywhere using GMap's .setCenter() method. Documentation of setCenter(), GInfoWindow and much more available at http://code.google.com/apis/maps/documentation/reference.html
I just started learning this myself.
Here is a good link to get started:
http://code.google.com/apis/maps/
On your second question,
show some pictures OVER the map near
the city?
I like #andykram's response above, but I've implemented this previously using the Panoramio layer available for the Maps API. It can get a bit crowded but its an interface people are used to and because it is so simple to include it in a map, it just be the solution for you this time.
Just add the following to your map initialisation function.
var myLayer = new GLayer("com.panoramio.all");
map.addOverlay(myLayer);
As far as dynamically showing any city in the world in a Google Map, the solution is easily implemented - you need to geocode the name of the city. This can be done by triggering a function on an event like onclick.
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (point) {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
If you hit a hurdle, try this first - http://econym.org.uk/gmap/ - possibly the best resource for the GMaps API on the web.
GeoExt is a nice framework if you work with maps in general. You can access other kinds of maps too (OSM, GeoServer).
Related
I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/
I load data for my Google Maps v3 with GeoJSON:
that.map = new google.maps.Map($('#map')[0], mapOptions);
that.map.data.loadGeoJson('http://localhost/geoserver/...');
Now, at some point on some user event I need to get one marker and paint it blue.
I can set different color with setIcon.
My idea is to get all features, then iterate through them, find the right feature (based on UNIQUE feature data field) and find marker behind that feature and change icon. I found some approaches that store all markers in array, but don't know why I need another array. Computer resources are important and I don't want to duplicate things.
I need help with, how to get features and how to get Marker object associated with selected feature. If there is a better way to do it, please...
UPDATE
I found this:
var feature = this.map.data.getFeatureById(ID);
I just need to get feature Marker. How? Doesn't look that Feature class has method for that?
There is no method/property that gives you access to the shape(marker,polygon,etc.) that has been created by the API.
To set a new icon-property for a particular feature use overrideStyle:
map.data.overrideStyle(feature, {icon: newIconSettings});
Another option is:
that.map.data.setStyle(function(feature)
{
var color = 'red';
if (feature.getProperty('color'))
{
color = feature.getProperty('color');
}
return ({ // #type {google.maps.Data.StyleOptions}
icon: 'http://maps.google.com/mapfiles/ms/icons/' + color + '-dot.png',
});
});
But it is not as good as Dr. Molle solution, because it needs to iterate through entire features set. I found it on google api documentation (look for title Change Appearance Dynamically).
I'm new to Google Maps API, and have been looking for ways to customize the markers. The API provided only allows me to change icons but what I actually need is to pass HTML content to the marker. I want to pass some data e.g.numbers to the marker, and when user clicks the marker, more details will show inside infoWindow. (something like this website)
At first, I thought it would be something like Instagram Photo Map, you have a summary of photos within a region. But then I realize that's more like a markerClusterer which simply counts the total number of markers within the range (correct me if I'm wrong).
I still couldn't find any way to display customized data on the marker. Is there any plugin I can use if no default API available?
P.S. first time posting a question, hope it's clear! highly appreciate your help!!!!
Basically what you see on the linked map are not real google.maps.Markers, you see Custom Overlays. With a custom overlay you may draw any HTML-content on the map, e.g. these labels.
You may either use the build-in methods to draw these overlays, or use a library like infobox
You can customise markers using styledmarker library. This library is used to create Markers that can be styled in different ways, such as changing the color or shape, or adding text labels. Below is an example of how to use this library with XML.
for (var i = 0; i < markers.length; i++) {
var text = markers[i].getAttribute("text");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var styleMaker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:text}),position:myLatLng,map:map});
}
I have a DEMO using this with a database of 2 tables state centroids and cities in USA using XML . The marker shows the state and number of cities in state.
I have a batch of high definition images, and I want to make use of technologies like google maps to view the images, user can use zoom pan to zoom in and out quickly without downloading the whole big picture file(they only need to download the viewport of the big image).
How can I do this?
Thanks.
Bin
If the image in question is actually a map or something that can be reasonably overlaid onto a map, use MapTiler (http://www.maptiler.org/) to split it into tiles, then use code like this to display the tiles:
var lat=37.767569;
var lon=-122.392223;
var initialZoom=17;
var tileDir = 'tiles_dir';
var mapTypeId = 'Your Custom Map';
var mapType = new google.maps.ImageMapType({
tileSize: new google.maps.Size(256,256),
getTileUrl: function(coord,zoom) {
return "img/"+tileDir+"/"+zoom+"/"+coord.x+"/"+coord.y+".png";
}
});
var map = new google.maps.Map(document.getElementById("map_canvas"),
{center:new google.maps.LatLng(lat,lon),
mapTypeId:google.maps.MapTypeId.ROADMAP,
zoom:initialZoom,
mapTypeControl:false});
map.overlayMapTypes.insertAt(0, mapType);
map.mapTypes.set(mapTypeId, styledMap);
map.setMapTypeId(mapTypeId);
Note that Map Tiler sets the image name to something Google Maps API v2 specific. If you are using v3 (and you should!) you'll have to take each file name (e.g., 2001.png), and move it to a file name that's good for v3. To do that on Linux or a Mac, cd to the tiles directory and run this script (note that the script assumes you are in the tiles dir!):
#!/bin/bash
tiles=`ls -d */*/*`
for thisPath in $tiles
do
thisFile=${thisPath#*/*/}
oldY=${thisFile%.png}
zoomX=${thisPath%/*}
zoom=${thisPath%/*/*}
newY=$(((1<<zoom) - oldY - 1))
mv ${zoomX}/${oldY}.png ${zoomX}/${newY}.png
done
Now, even if your image is not actually a map or something that would be reasonably overlaid on a map, hopefully this gives you some ideas of where to look and what to poke around with if you want to leverage Google Maps. (There may be tools out there to let you easily build this type of functionality without Google Maps, but if so, I have no experience with them.)
There's Google Maps, of course. I'm totally serious: GMaps API allows you to create custom map types, you'll need to give it a way to show the "tiles" (parts of your image) at a given zoom level.
The most work I'd assume would be in creating the "tiles" from your image at various zoom levels (split the image into smaller rectangles), but I suppose that can be automated. The UI, dragging, zooming and whatnot is then handled by the JavaScript script of Google Maps.
(this works, I've made a boardgame with such custom tiles, using Google Maps as the underlying framework for showing it.)
I've just found this library, which is quite slick: http://polymaps.org/
I want to create an overlay on top of Google Maps that displays different streets in different colors.
In the Google Maps API it is possible to create markers and polygons that cover certain areas.
Is there a way to somehow mark different streets?
It sounds to me like you are interested in showing some application specific coloring for your Google maps display (rather than traffic maps).
If so , then you should check out custom overlays. You can create your own transparent background overlay tiles (with your colored streets), match them up with the Google maps tiles and then overlay them on the map. You can find a description of this stuff in the Maps API reference - Overlays.
I have actually been interested in trying this out, and this question might be a good excuse. I'll let you know how I go.
Edit: Ok, I tried this and it was pretty straightforward. You just need to grab the tiles images when the google maps page load (for the area you would like to overlay). Make sure you keep track of the origional urls, because these have the x,y coordinates that you will need to write your tile overlay method.
Edit the tiles with your colored roads then upload them to your web server. Add the following code to use your overlay on the regular map:
var myCopyright = new GCopyrightCollection("© ");
myCopyright.addCopyright(new GCopyright('Demo',
new GLatLngBounds(new GLatLng(-90,-180), new GLatLng(90,180)),
0,'©2007 Google'));
// Create the tile layer overlay and
// implement the three abstract methods
var tilelayer = new GTileLayer(myCopyright);
// properties of the tile I based my tile on
// v=w2.97&hl=en&x=38598&s=&y=49259&z=17&s=Galil.png
tilelayer.getTileUrl = function(point, zoom) {
if (zoom == 17 && point.x == 38598 && point.y == 49259)
return "../pics/times_square.png";
};
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40.75740, -73.98590), 17);
map.addOverlay(myTileLayer)
This code overlays my Thing eats NY tile:
at x = 38598 and y = 49259 at zoom level 17.
It is possible to create markers and polygons in the Google Maps API. You need to create GPolygon and/or GPolyline objects
Have a look to these tutorials
And if you want to obtain the coordinate (latitude, longitude) of certain streets, you may have a look to the source code of this page
I am not sure to fully understand your question: do you want to mark some given streets ?
in that case, a quick-and-dirty way could be to get the coordinates of all the addresses of the street and build a GPolygon according to them...
Have you concidered using OpenStreeMaps?
Try digging into the code used to show the traffic overlay on the normal Google Maps site.
Edit: I just looked at the code, and it appears that even Google decided it was easier to implement this by just generating the traffic lines on the server and pulling them down as transparent PNG overlays.
I just found this link, and I think this could interest you. It is a JavaScript package that provides functionality for displaying multiple routes on Google Maps.
Is it what you were looking for ??