tag:blogger.com,1999:blog-75124397861126222732024-03-13T11:07:53.360-07:00TRAILim Maps TRAILimhttp://www.blogger.com/profile/04477619612115058925noreply@blogger.comBlogger3125tag:blogger.com,1999:blog-7512439786112622273.post-51435417395331479562013-01-21T09:41:00.002-08:002013-01-23T05:44:14.674-08:00Lesson 1 - Basic Map
<style type="text/css">
#tr_map_widget {
position:absolute;
top: 0px;
left: 150px;
z-index: 10;
width: 400px;
display: none;
}
#tr_map_canvas_wrapper {
background: orange;
border: 4px solid orange;
border-top: none;
-moz-border-bottom-right-radius: 8px;
-moz-border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#tr_map_canvas {
border-top: 4px solid orange;
width: 100%;
height: 400px;
display:none;
}
#tr_map_handle{
padding: 8px;
background: orange;
-moz-border-bottom-right-radius: 8px;
-moz-border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
position:relative;
left:50px;
color: #fff;
font-weight: bold;
cursor:pointer;
width: 180px;
}
</style>
<script type="text/javascript">
var trMap = trMap || {};
trMap.widget = {};
trMap.widget.init = function(){
jQuery('#tr_map_widget').show('slow');
trMap.widget.behavior();
trMap.init();
}
trMap.widget.behavior = function(){
jQuery('#tr_map_handle').unbind('click');
jQuery('#tr_map_handle').click(function(){
jQuery('#tr_map_canvas').slideToggle('slow', function(){
google.maps.event.trigger(trMap.map, 'resize');
});
});
}
trMap.mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
trMap.init = function() {
trMap.map = new google.maps.Map(document.getElementById("tr_map_canvas"), trMap.mapOptions);
trMap.behavior();
trMap.widget.behavior();
}
trMap.behavior = function(){}
function parseMapJs(){
console.info('parsing...');
js_str = $("#map_js").val();
jQuery.globalEval(js_str);
}
</script>
<div id="map_canvas">
</div>
<textarea cols="50" id="map_js" rows="4">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
trMap.map = new google.maps.Map(document.getElementById("tr_map_canvas"),
mapOptions);
}
</textarea>
<a href="javascript: parseMapJs()">Parse JS</a>TRAILimhttp://www.blogger.com/profile/04477619612115058925noreply@blogger.com0tag:blogger.com,1999:blog-7512439786112622273.post-75731960060783083502013-01-06T08:34:00.001-08:002013-01-16T00:19:46.731-08:00Add markerAdd MarkerTRAILimhttp://www.blogger.com/profile/04477619612115058925noreply@blogger.com1tag:blogger.com,1999:blog-7512439786112622273.post-36526874904505758732013-01-06T07:31:00.003-08:002013-01-23T02:50:36.347-08:00Basic map<div id="map_canvas"></div>
<style type="text/css">
#map_canvas {
width: 100%;
height: 400px;
background: orange;
border: 4px solid orange;
-moz-border-radius: 8px;
border-radius: 8px;
}
</style>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
$(document).ready(function(){
initialize();
});
function parseMapJs(){
console.info('parsing...');
js_str = $("#map_js").val();
jQuery.globalEval(js_str);
}
</script>
<textarea id="map_js" rows="4" cols="50">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</textarea>
<a href="javascript: parseMapJs()">Parse JS</a>TRAILimhttp://www.blogger.com/profile/04477619612115058925noreply@blogger.com0