Ok, I know I am being a complete idiot as I have this script working twice on the page, but when I tried to create a third map from a different onclick event I get the firebug error: a is null subregmap is undefined, and the map doesn't load. I have been over and over this and know it is a very simple stupid mistake I am making, but I think I need a second pair of eyes as I can't see it.
My page code is:
PHP Code:
$seacucumber="{$lavender}, {$larch}";
echo '<input type="button" class="button3" name="RegionAll" id="RegionAll" value="See All" onclick="loadRegSubPlace(\'getRegionAll.php\',\'txtHintPlace\', \'locale=' . urlencode($ivory) . '\',\'' . $seacucumber . '\')" />';
<br />
<br />
<div id="txtHintPlace"></div>
$seacucumber would be something like, New York, USA
getRegionAll.php looks like this:
PHP Code:
echo '<div id="placemapcanvas" class="map"><div id="regmap_canvas"></div></div>';
echo '<input type="text" class="input" name="thisaddress" id="thisaddress" value="search an address" onclick="this.value=\'\';" onfocus="this.select()" onblur="this.value=!this.value?\'Search address\':this.value;" /> <input type="button" value="Find" onclick="codeRegThisAddress(document.getElementById(\'thisaddress\').value)" /><br />';
echo '<br /><br />';
And the main javascript commands are:
Code:
<script type="text/javascript">
function loadRegSubPlace(File,ID,Msg,Kile){
loadXMLDoc1(File,ID,Msg);
var starfish = setTimeout(function(){createRegGMapFromAddress()},500);
var angelfish = setTimeout(function(){codeRegAddress(Kile)},1000);
}
</script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
#regmap_canvas {width:100%; height:250px;border:3px solid grey;}
</style>
<script type="text/javascript">
var geocoder3;
var regsubmap;
function createRegGMapFromAddress(){
geocoder3 = new google.maps.Geocoder();
var regsublatlng = new google.maps.LatLng(0,0);
var regmap_options = {
zoom: 15,
center: regsublatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
regsubmap = new google.maps.Map(document.getElementById("regmap_canvas"), regmap_options);
}
function codeRegAddress(location){
var address = location;
geocoder3.geocode({address: address}, function(results, status){
if (status == google.maps.GeocoderStatus.OK && results.length){
if (status != google.maps.GeocoderStatus.ZERO_RESULTS){
regsubmap.setCenter(results[0].geometry.location);
}
} else {
alert("Geocode was unsuccessful due to: " + status);
}
});
}
</script>
I have extracted this from a rather long script which also has commands to load other maps, hence the names of some of the variables. If you need the full script let me know.