Google Maps API3 made simple


/ Published in: JavaScript
Save to your folder(s)

This is a simple example of the google maps javascript API v3. If you want a map with a marker this is the minimum you need to do to get it done. Theres more talk about how it's all set up, and how to use the other static image map as well at the link.

To implement this you'll need an Google Maps API key to replace the one I used (which is for me site and won't work elsewhere due to how google set up the API keys). You can get one of those here:
http://code.google.com/apis/maps/signup.html

To use you simple need to include the script in the header, the div where you want the map to be located (size that as we want) then fill in the address variable.

Again more documentation, a script breakdown, and an example at the link. If you have a question feel free to post a comment.


Copy this code and paste it in your HTML
  1. /* The script include in the header */
  2. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js&sensor=false&key=ABQIAAAA6kexzQ8dWZ7WYLi2Ujb6iRThfrz1fv6pUizwoe6TI79mCp3EBBS9VbAkdyTzVp5JPm5bkqeRYGyTlA"></script>
  3.  
  4. /* The div where the map will be located */
  5. <div id="countauditor_map" style="width:1000px; height:500px"></div>
  6.  
  7. /* The actual script */
  8. $(document).ready(function(){
  9. initialize();
  10. });
  11. function initialize() {
  12. var lat = ''; var lng = '';
  13. var address = encodeURI('219 4th Ave N, Seattle, WA 98109'); // Address here
  14. $.getJSON("http://maps.google.com/maps/geo?q="+address+"&key=ABQIAAAA6kexzQ8dWZ7WYLi2Ujb6iRThfrz1fv6pUizwoe6TI79mCp3EBBS9VbAkdyTzVp5JPm5bkqeRYGyTlA&sensor=false&output=json&callback=?",function(json){
  15. lat = json.Placemark[0].Point.coordinates[1];
  16. lng = json.Placemark[0].Point.coordinates[0];
  17. var myOptions = {
  18. zoom: 14,
  19. center: new google.maps.LatLng(lat,lng),
  20. mapTypeId: google.maps.MapTypeId.ROADMAP
  21. };
  22. var map = new google.maps.Map(document.getElementById("countauditor_map"),myOptions);
  23. var marker = new google.maps.Marker({
  24. position: new google.maps.LatLng(lat,lng),
  25. map: map,
  26. });
  27. });
  28. }

URL: http://fatfolderdesign.com/284/javascript/working-with-the-google-maps-api-v3

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.