Posted By

FatFolderDesigner on 07/31/11

Tagged

Versions (?)

Last Edited at 07/31/11 05:21am

Statistics

Viewed 969 times

Favorited by 1 user(s)

Related snippets

Google Maps API3 made simple

/ Published in: JavaScript

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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

/* The script include in the header */
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js&sensor=false&key=ABQIAAAA6kexzQ8dWZ7WYLi2Ujb6iRThfrz1fv6pUizwoe6TI79mCp3EBBS9VbAkdyTzVp5JPm5bkqeRYGyTlA"></script>
 
/* The div where the map will be located */
<div id="countauditor_map" style="width:1000px; height:500px"></div>
 
/* The actual script */
$(document).ready(function(){
    initialize();
});
function initialize() {
    var lat = ''; var lng = '';
    var address = encodeURI('219 4th Ave N, Seattle, WA 98109'); // Address here
    $.getJSON("http://maps.google.com/maps/geo?q="+address+"&key=ABQIAAAA6kexzQ8dWZ7WYLi2Ujb6iRThfrz1fv6pUizwoe6TI79mCp3EBBS9VbAkdyTzVp5JPm5bkqeRYGyTlA&sensor=false&output=json&callback=?",function(json){
        lat = json.Placemark[0].Point.coordinates[1];
        lng = json.Placemark[0].Point.coordinates[0];
        var myOptions = {
            zoom: 14,
            center: new google.maps.LatLng(lat,lng),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("countauditor_map"),myOptions);
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng), 
            map: map, 
        });   
    });
}