Jump to content

Simple Javascript problem


Stromgren

Recommended Posts

Hello Im trying to use google maps at my site, this is the code i am using:

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript">var geocoder;  var map;  function initialize() {    geocoder = new google.maps.Geocoder();    var latlng = new google.maps.LatLng(-34.397, 150.644);    var myOptions = {	  zoom: 8,	  center: latlng,	  mapTypeId: google.maps.MapTypeId.ROADMAP    }    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  }  function codeAddress() {    var address = document.getElementById("address").value;    geocoder.geocode( { 'address': address}, function(results, status) {	  if (status == google.maps.GeocoderStatus.OK) {	    map.setCenter(results[0].geometry.location);	    var marker = new google.maps.Marker({		    map: map,		    position: results[0].geometry.location	    });	  } else {	    alert("Geocode was not successful for the following reason: " + status);	  }    });  }</script></head><body onload="initialize()"><div id="map_canvas" style="width: 320px; height: 320px;"></div>  <div>    <input id="address" type="textbox" value="Sydney, NSW">    <input type="button" value="Encode" onclick="codeAddress()">  </div></body>

At the bottom the input fields are located.. Now i don't want these showed since i need the address to be defined through PHP. Can anyone tell me how to do this easiest? I've tried to make the textbox hidden and load the value through php.. No problem.. But i don't know any Javascript, so i can't figure out how to get rid of the button and still have the codeAddress() function load. Thanks in advance :)

Link to comment
Share on other sites

well, you could use CSS to hide the button, but you still need to determine what event triggers the codeAddress. Why not make it run onload of the button element? or as part of initialize()?

Link to comment
Share on other sites

well, you could use CSS to hide the button, but you still need to determine what event triggers the codeAddress. Why not make it run onload of the button element? or as part of initialize()?
These where my thoughts too, but i don't know any Javascript at all. How can make the onload run both initialize() and codeAddress(), and how should i define the address variable if i choose this way to go?
Link to comment
Share on other sites

Just add js script under map canvas, and add address as argument to send to function

<script type="text/javascript"> codeAddress('Sydney, NSW');</script>

this can include php code to pass code vale

<script type="text/javascript"> codeAddress('<?php echo address; ?>');</script>

  function codeAddress(addr) {    //var address = document.getElementById("address").value;var address = addr;    geocoder.geocode( { 'address': address}, function(results, status) {          if (status == google.maps.GeocoderStatus.OK) {            map.setCenter(results[0].geometry.location);            var marker = new google.maps.Marker({                    map: map,                    position: results[0].geometry.location            });          } else {            alert("Geocode was not successful for the following reason: " + status);          }    });  }

no inputs required

Link to comment
Share on other sites

Thanks for the answer, that makes sense, but it still won't work for me.Heres what the code looks like i (tried) to make your changes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script><script type="text/javascript">var geocoder;  var map;  function initialize() {    geocoder = new google.maps.Geocoder();    var latlng = new google.maps.LatLng(-34.397, 150.644);    var myOptions = {	  zoom: 8,	  center: latlng,	  mapTypeId: google.maps.MapTypeId.ROADMAP    }    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  }  function codeAddress(addr) {    var address = addr;    geocoder.geocode( { 'address': address}, function(results, status) {	  if (status == google.maps.GeocoderStatus.OK) {	    map.setCenter(results[0].geometry.location);	    var marker = new google.maps.Marker({		    map: map,		    position: results[0].geometry.location	    });	  } else {	    alert("Geocode was not successful for the following reason: " + status);	  }    });  }</script></head><body onload="initialize()"><div id="map_canvas" style="width: 320px; height: 320px;">  <script type="text/javascript">	 codeAddress('Copenhagen');    </script>  </div></body>

The map will still load somewhere i Australia instead of Copenhagen.

Link to comment
Share on other sites

because geocoder = new google.maps.Geocoder(); is created after the page has loaded, the codeAddress function will fail so start it after initialise has run

 <body onload="initialize();codeAddress('Copenhagen');">

OR use unobtrusive javascript and remove ' onload="initialize();codeAddress('Copenhagen');" ' completely from body tag and add this instead to your javascript

window.onload=function(){ initialize();codeAddress('Copenhagen'); }

remove original script tags etc <script type="text/javascript"> codeAddress('Copenhagen'); </script> Edit: you will also notice that it flashes from the Australian map to Copenhagen map, this is because '-34.397, 150.644' is the long/lat to Australian map, to go directly to Copenhagen or anywhere else, go to http://maps.google.co.uk/ bring up the area of map you require, right click that area, and select 'Whats Here' that should give long and lat coordinates, and then you just the coords you already have, with these new coordinates.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...