I need to make a change on my jQuery mobile site that currently uses onload="initialize()" in the body tag to display a Google map. I want to find a way to show the map without needing onload="initialize()". Can someone help me figure out what modifications I need to make in the JavaScript code for this? site Link:
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link rel="shortcut icon" href="http://computersforpeople.info/websites/images/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="http://computersforpeople.info/websites/Icons/apple-touch-icon-114x114.png"/>
<link rel="icon" type="image/png" href="http://computersforpeople.info/websites/Icons/icon48.png" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://computersforpeople.info/websites/scripts/jquery-1.9.1.min.js"></script>
<script src="http://computersforpeople.info/websites/scripts/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<link href="http://computersforpeople.info/websites/scripts/jquery/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/code.photoswipe.jquery-3.0.4.min.js"></script>
<script type="text/javascript" src="http://computersforpeople.info/websites/scripts/jquery/lib/klass.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('a').live('click', function() {
var $this = $(this);
if ( !$this.attr('rel') || $this.attr('rel') != 'external' )
$(document.getElementById( $this.attr('href') )).remove();
});
});
</script>
<style type="text/css">
<!--
.style1 {font-size: large}
-->
</style>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
</head>
<body style="margin:0px; padding:0px;">
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Back" >
<div data-role="header" >
<h1>test</h1>
<div align="center">
</div>
</div>
<ul data-role="listview" data-inset="true" data-filter="false">
<div data-role="collapsible-set" style="padding-left: 10px; padding-bottom: 10px;">
<ul data-role="listview" data-filter="false" id="test-more" >
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address ="6 Westbury Crescent Remuera NZ";
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(600,400)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
<div data-role="collapsible" data-collapsed="false">
<h3>Map</h3>
<p>
<div align="center"><font size="2" color="#0000AA" face="Verdana, Arial, Helvetica, Sans-Serif"><b>
<div id="map_canvas" style="width: 300px; height: 200px"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</b></font>
<font size="2" face="Arial, Helvetica, sans-serif">
<br>
<strong>Map location not guaranteed</strong> </font> </div>
</p>
</div>
</div>
</ul> <br />
<li><a href="#contact_us" data-role="button" data-icon="info" data-iconpos="left" data-rel="dialog" data-transition="pop" id="contact">Contact Geoff Duncan</a></li>
</ul>
</div>
<div data-role="page" id="contact_us" data-title="Contact Us">
<div data-role="header">
<h1></h1>
</div>
</body>
</html>