The reason of the issue "$ is not defined" is that your html is not completely valid. The first <script> is not closed properly. It should be <script ............="" />. The opening <head> tag occurs twice i.e. you have <head> two times instead of <head> and </head>. Also the tags inside <body> are not formatted correctly.
Here is the modified HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://www.google.com/jsapi?key=AIzaSyBw7b8lMbX80IG_WviZAJBtI9rI_vxjcDU"></script>
<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>
<script type="text/javascript">
$(document).ready(function () {
var mapCenter = new google.maps.LatLng(47.6145, -122.3418);
var map;
map_initialize();
function map_initialize() {
var googleMapOptions =
{
center: mapCenter,
zoom: 17,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"), googleMapOptions);
$.get("map_process.php", function (data) {
$(data).find("marker").each(function () {
var name = $(this).attr('name');
var address = '' + $(this).attr('address') + '';
var type = $(this).attr('type');
var point = new google.maps.LatLng(parseFloat($(this).attr('lat')), parseFloat($(this).attr('lng')));
create_marker(point, name, address, false, false, false, "http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-eb2828/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/stop.png");
});
});
google.maps.event.addListener(map, 'rightclick', function (event) {
var EditForm = '' +
'<form action="ajax-save.php" method="POST" name="SaveMarker" id="SaveMarker">' +
'<label for="pName">Place Name :<input type="text" name="pName" class="save-name" placeholder="Enter Title" maxlength="40" /></label>' +
'<label for="pDesc">Description :<textarea name="pDesc" class="save-desc" placeholder="Enter Address" maxlength="150"></textarea></label>' +
'<label for="pType">Type : <select name="pType" class="save-type"><option value="restaurant">Rastaurant</option><option value="bar">Bar</option>' +
'<option value="house">House</option></select></label>' +
'</form>' +
'<button name="save-marker" class="save-marker">Save Marker Details</button>';
create_marker(event.latLng, 'New Marker', EditForm, true, true, true, "http://mapicons.nicolasmollet.com/wp-content/uploads/mapicons/shape-default/color-eb2828/shapecolor-color/shadow-1/border-dark/symbolstyle-white/symbolshadowstyle-dark/gradient-no/stop.png");
});
}
});
</script>
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
</head>
<body>
<h1 class="heading">My Google Map</h1>
<div align="center">Right Click to Drop a New Marker</div>
<div id="map-canvas" style="height:100%"></div>
</body>
</html>