Google Maps Test

by salitrapraveen

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div id="map_canvas">
    <p>Loading...</p>
</div>

<div id="console">
    
</div>

<form>
    <input type="text" name="prompt" id="prompt"/>
</form>

<div id="pins">
    <div class="handle">Places</div>
    <ul>
    </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis+Light);

body {
    background-color: #333;
}

#map_canvas {
    width: 600px;
    height: 400px;
    margin: 10px auto;
    border: 10px solid #666;
    border-radius: 5px;
    box-shadow: 0 0 20px #000;
    position: relative;
}

#map_canvas p {
    position: relative;
    font-family: 'Terminal Dosis Light', monospaced;
    font-size: 24px;
    top: 50%;
    text-align: center;
    margin-top: -12px;
    color: #fff;
}

#console p.error {
    color: #cc0000;
}

#console p.info {
    color: #87cefa;
}

#console {
    width: 600px;
    height: 80px;
    margin: 20px auto 0 auto;
    padding: 3px;
    background-color: #000;
    border: 1px solid #666;
    font-size: 14px;
    color: #eee;
    font-family: 'Terminal Dosis Light', monospaced;
    overflow: auto;
}

#prompt {
    width: 600px;
    padding: 3px;
    margin: 0 auto;
    display: block;
    border: 1px solid #666;
    font-size: 14px;
    color: #333;
    font-family: 'Terminal Dosis Light', monospaced;
    font-weight: bold;
}

.search_dialog {
    display: block;
    position: absolute;
    top: 30%;
    left: 50%;
    width: 200px;
    height: 45px;
    margin-left: -100px;
    z-index: 3000;
    background-color: #fff;
    padding: 3px;
    box-shadow: 0 0 10px #666;
    border-radius: 3px;
}

.search_dialog label {
    color: #333;
    font-family: 'Terminal Dosis Light', monospaced;
    font-size: 14px;
    line-height: 20px;
    display: block;
    font-weight: bold;
}

.search_dialog input {
    color: #333;
    font-family: 'Terminal Dosis Light', monospaced;
    font-size: 14px;
    padding: 3px;
    display: block;
    width: 192px;
    border: 1px solid #666;
    border-radius: 2px;
}

div#place_info {
    font-family: 'Terminal Dosis Light', monospaced;
}

div#place_info h6 {
    font-weight: bold;
    color: #cc0000;
    font-size: 14px;
    text-transform: uppercase;
    margin: 3px 0;
}

div#place_info p {
    font-size:...

JavaScript

$(function() {
    var yahoo_YQL = yahoo_YQL || {};
    yahoo_YQL.baseURL = 'http://query.yahooapis.com/v1/public/yql?callback=?&format=json&q=';

    var MY_APP = MY_APP || {};
    MY_APP.defaultQueries = ['bank', 'university', 'internet service provider', 'power company'];

    var geocoder, map, defaultSearchRadius = 10;

    var google_init = function() {
        geocoder = new google.maps.Geocoder();

        var init_map = function(where) {
            var pos;
            if (where && where.coords) {
                pos = new google.maps.LatLng(where.coords.latitude, where.coords.longitude);
            }
            else {
                log_error('Geolocation NOT supported');
                pos = new google.maps.LatLng(-34.397, 150.644);
            }
            var myOptions = {
                zoom: 8,
                center: pos,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            google.maps.event.addListener(map, 'click', function(event) {
                google_place_marker(event.latLng);
            });
        };

        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(init_map, function() {
                init_map(false)
            });
        }
        else {
            init_map();
        }
    };

    var google_place_marker = function(location) {
        show_search_dialog(function(query) {
            log_info(query);
            log_info('Searching with Yahoo...');
            $.getJSON(yahoo_find_place_url(location, query), function(data) {
                if (data.query.count === 0) {
                    log_error("Nothing was found");
                    return;
                }
                log_info('Found: ' + data.query.results.Result[0].Title + ' in ' + data.query.results.Result[0].City + ' @(' + data.query.results.Result[0].Latitude + ',' +...