Example 27 - Image Inserts

So, you've built this Google Maps application just to discover that the lake your jet ski customer's business is on isn't on the map server's tiles. Or maybe you're trying to sell some prime real estate, but the new road that leads to the property doesn't show up yet. YIKES! What do you do? Well you could create your own tile(s) and your own tile server (see example 16) or you could do a quick, temporary fix, a <googlemaps:insert> tag.

Image inserts are images that attach themselves to a map. When the map pans, they pan. When the map zooms in and out, they do too. So now if there's a lake, river or road that doesn't exist on the map, draw it yourself! You can also specify which map types should display your inset and which should not. Therefore if your image overlay only applies to the "Map" maptype, but not the "Hybrid" map type, you can specify to only show the insert when the "Map" and "Satellite" types are selected.

Here are the images we've used for our example (which displays our Imaginary Lagoon and fictitious T&C Canal):

It's a GIF (because IE doesn't yet properly display PNG files), with transparency so the image doesn't cover other existing map features.

You could use them for a variety of features. We'd love to see what you come up with.

Here's the code we used:

<googlemaps:map id="map" width="780" height="300" version="2" type="STREET"
	bound="true">
  	<googlemaps:key domain="www.lamatek.com" key="xxxxx"/>
	<googlemaps:point id="point1" longitude="-75.86409330368042" 
		latitude="39.58490425759099"/>
	<googlemaps:point id="point2" longitude="-75.85079330368042" 
		latitude="39.58617425759099"/>
  	<googlemaps:typeControl enable="true"/>
	<googlemaps:zoomControl enable="true" size="large"/>
  	<googlemaps:scaleControl enable="true"/>
  	<googlemaps:panControl enable="true"/>
  	<googlemaps:insert id="insert1" point="point1" width="275" height="300" 
  		baseZoom="17" url="/GoogleMaps/images/insert_1.gif" mapTypes="Map"/>
  	<googlemaps:insert id="insert2" url="/GoogleMaps/images/insert_2.gif" 
  		point="point2" width="300" height="300" baseZoom="15" mapTypes="Map"/>
</googlemaps:map>  
  

Image Inserts require version 2 maps.

Our next example demonstrates the new <googlemaps:coordinates> tag which lets you display cursor coordinates on your maps.