Advanced Search

Return to Snippet

Revision: 49851
at July 31, 2011 05:21 by FatFolderDesigner
Initial Code 
/* 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, 
        });   
    });
}
Initial URL 
http://fatfolderdesign.com/284/javascript/working-with-the-google-maps-api-v3
Initial Description 
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.
Initial Title 
Google Maps API3 made simple
Initial Tags 
javascript, google, jquery
Initial Language 
JavaScript