Now ,let's take a look on what is beyond the map ?
Here is the code for map
In websites on travel ,restaurant ...,they usually provide a map for readers to show up their location . It's very good for readers to know where they are and how to reach to their location .
You have a shop,a restaurant ,and you want to adding a map to your location ? It's very easy ,my friends .See the map I added bellow and I will show you the trick :
just a HTML tag for inserting image . But the secret is in the URL :
http://maps.google.com/maps/api/staticmap?center=21.075313,105.772897&zoom=14&size=480x480&markers=color:red|label:S|21.075313,105.772897&sensor=false
This is URL to an map which is created by Google Static Map - a service of Google . You send an URL which contain parameters such as location,zoom level,size of map,marker ...like the URL above to Google Static Map and it return an image which is map of your location . You can paste the URL above direct to browser address bar and see the map .
Let's go deeper in the URL above :
- http://maps.google.com/maps/api/staticmap?: this is HTTP request for Google Static Map service
-center=21.075313,105.772897 : center parameter defines the center of the map, equidistant from all edges of the map. This parameter takes a location as either a comma-separated {latitude,longitude} pair (e.g. "21.075313,105.772897") or a string address (e.g. "city hall, new york, ny") identifying a unique location on the face of the earth .If you are outside US , using string address sometimes receive a wrong result . So the best is using latitude and longitude . But how to know the latitude and longitude of a location ? You can go to this webpage , choose your location in map ,when you see your location ,double click and you will see the latitude and longitude .
-zoom=14 mean the zoom level of map is 14 . Zoom levels go from 0 to 21 .You can test them for the best result.
-size=480x480 : mean the size of map is 480x480 pixels . Maximum is 640x640 pixels .
-markers=color:red|label:S|21.075313,105.772897 is marker of your location in map. Markers parameter come with a set of value assignments . Color is the fill color of your marker ,label is the character which show up on your marker ,and the last value is latitude,longitude or string address of your location .If you want to mark more than one location ,you can add more markers parameter ,each of them mark a location .
-sensor=false : specifies whether the application requesting the static map is using a sensor to determine the user's location. This parameter is required for all static map requests
Now ,joining all parameter to an URL and place it in src attribute of img tag ,we can show a map for a location .
There are many options which can be add to URL for making a map as our need (for example ,show a path ,show a satellite map...) .In this post ,I can only cover the basic . Detail can be found here .
I hope this post helpful to you . Thanks for reading
