Is it possible to customize Google / Yahoo Map ?

Question

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.

Answer 1

I just started learning this myself.

Here is a good link to get started:

http://code.google.com/apis/maps/

Answer 2

There's a multitude of ways you could accomplish this, some prettier than others.

1. You could use GInfoWindow to display a popup window with pictures in it at any location.
2. 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.
3. 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.
4. 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

Answer 3

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.

Answer 4

GeoExt is a nice framework if you work with maps in general. You can access other kinds of maps too (OSM, GeoServer).