Tuesday, March 9, 2010
How to show Google Maps if Javascript is Disabled - Google Static Maps, Non JS Version?
Showing Google Maps if Javascript is Disabled - Google Static Maps, Non JS Version
Problem:
Google Maps API will not work if Javascript (JS) disabled.
Description:
Sometimes, we have to show the address/location/maps for those users who have disabled their javascript. This is because some users may have forgotten to enable their javascript after disabling it.
As you know, Google Maps API will only work if javascript is enabled. But
Solution:
By using noscript tag & google static maps, you will be able show maps to those who have disabled their javascript.
Example:
Explanation:
The <noscript> tag will be shown if the javscript is disabled, the URL path provided in src attribute of the img tag will generate the map
center:
the location or address that needs to be shown. For more information http://code.google.com/apis/maps/documentation/staticmaps/#Locations
zoom:
the level of zoom (i.e. city view, street view, etc.,). Refer http://code.google.com/apis/maps/documentation/staticmaps/#Zoomlevels for more information
sensor:
indicate whether your application is using a "sensor" (such as a GPS locator) to determine the user's location. For more information, http://code.google.com/apis/maps/documentation/staticmaps/#Sensor
maptype:
The Google Static Maps API creates maps 4 different formats:
More Examples:
To find Latitudes and Longitudes:
http://www.gorissen.info/Pierre/maps/googleMapLocation.php?lat=12.234080&lon=10.942383&setLatLon=Set
Showing Google Maps with Latitudes and Longitudes:
http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=400x400&sensor=false
Showing Google Maps with Address or Location:
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false
Showing Google Maps with Address or Location of maptype "roadmap"
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false&maptype=roadmap
Showing Google Maps with Address or Location of maptype "satellite"
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false&maptype=roadmap
Showing Google Maps with Address or Location of maptype "terrain"
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false&maptype=roadmap
Showing Google Maps with Address or Location of maptype "hybrid"
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false&maptype=roadmap
Showing Google Maps using Address or Location of maptype "roadmap" with Markers
http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|color:red|label:C|40.718217,-73.998284&sensor=false
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=10&size=400x400&markers=color:blue|label:S|Nungambakkam|Selaiyur|Velachery&sensor=false
Problem:
Google Maps API will not work if Javascript (JS) disabled.
Description:
Sometimes, we have to show the address/location/maps for those users who have disabled their javascript. This is because some users may have forgotten to enable their javascript after disabling it.
As you know, Google Maps API will only work if javascript is enabled. But
Solution:
By using noscript tag & google static maps, you will be able show maps to those who have disabled their javascript.
Example:
<html>
<head>
<title>Google Maps - Example - http://kathyravan.blogspot.com</title>
</head>
<body>
<noscript>
<img src="http://maps.google.com/maps/api/staticmap?center=Chennai&zoom=14&size=400x400&sensor=false" />
</noscript>
</body>
</html>
Explanation:
The <noscript> tag will be shown if the javscript is disabled, the URL path provided in src attribute of the img tag will generate the map
center:
the location or address that needs to be shown. For more information http://code.google.com/apis/maps/documentation/staticmaps/#Locations
zoom:
the level of zoom (i.e. city view, street view, etc.,). Refer http://code.google.com/apis/maps/documentation/staticmaps/#Zoomlevels for more information
sensor:
indicate whether your application is using a "sensor" (such as a GPS locator) to determine the user's location. For more information, http://code.google.com/apis/maps/documentation/staticmaps/#Sensor
maptype:
The Google Static Maps API creates maps 4 different formats:
- roadmap
- satellite
- terrain
- hybrid
More Examples:
To find Latitudes and Longitudes:
http://www.gorissen.info/Pierre/maps/googleMapLocation.php?lat=12.234080&lon=10.942383&setLatLon=Set
Showing Google Maps with Latitudes and Longitudes:
http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=14&size=400x400&sensor=false
Showing Google Maps with Address or Location:
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false
Showing Google Maps with Address or Location of maptype "roadmap"
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false&maptype=roadmap
Showing Google Maps with Address or Location of maptype "satellite"
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false&maptype=roadmap
Showing Google Maps with Address or Location of maptype "terrain"
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false&maptype=roadmap
Showing Google Maps with Address or Location of maptype "hybrid"
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=14&size=400x400&sensor=false&maptype=roadmap
Showing Google Maps using Address or Location of maptype "roadmap" with Markers
http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap&markers=color:blue|label:S|40.702147,-74.015794&markers=color:green|label:G|40.711614,-74.012318&markers=color:red|color:red|label:C|40.718217,-73.998284&sensor=false
http://maps.google.com/maps/api/staticmap?center=Chennai,Tamilnadu&zoom=10&size=400x400&markers=color:blue|label:S|Nungambakkam|Selaiyur|Velachery&sensor=false
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment