Can't get Geocoder working in Google Map API -


i have google map 2 info boxes. info boxes working geocoder button doesn't reason.

i can info boxes working on page , can geocoder working on page, can't them both working on same page.

what want able type in address , place pin , zoom location (like on below link googles example).

the geocoding code google: https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple

the infobox.js from: https://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js

here what's in head:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=api_removed&sensor=false"> </script> <script type="text/javascript" src="infobox.js"></script> <script type="text/javascript"> var geocoder; var map; function initialize() { geocoder = new google.maps.geocoder(); var secheltloc = new google.maps.latlng(-27.532861,134.693340),      markers,         mymapoptions = {          zoom: 7,         center: secheltloc,         maptypeid: google.maps.maptypeid.roadmap     },     map = new google.maps.map(document.getelementbyid("map_canvas"), mymapoptions);  function initmarkers(map, markerdata) {     var newmarkers = [],         marker;      for(var i=0; i<markerdata.length; i++) {         marker = new google.maps.marker({             map: map,             draggable: false,             position: markerdata[i].latlng,             visible: true         }),         boxtext = document.createelement("div"),         //these options infoboxes         infoboxoptions = {             content: boxtext,             disableautopan: false,             zindex: null,             maxwidth: 0,             boxstyle: {                 background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",                 opacity: 0.85,             },             closeboxmargin: "6px 2px 0px 0px",             closeboxurl: "http://www.google.com/intl/en_us/mapfiles/close.gif",             infoboxclearance: new google.maps.size(1, 1),             ishidden: false,             pane: "floatpane",             enableeventpropagation: false         };          newmarkers.push(marker);         //define text , style infoboxes         boxtext.style.csstext = "border: 1px solid black; margin-top: 3px; background: #fff; padding: 1px; font-size: 11px; white-space:nowrap; padding-right: 20px";         boxtext.innerhtml = markerdata[i].businessname;         //define infobox         newmarkers[i].infobox = new infobox(infoboxoptions);         //open box when page loaded         newmarkers[i].infobox.open(map, marker);         //add event listen, infobox marker opened when user clicks on it.  notice return inside anonymous function - creates         //a closure, thereby saving businessname of loop variable new marker.  if did not return value inner function,          //the variable in anonymous function refer last used, i.e., last infobox. pattern (or         //serves same purpose) needed when setting function callbacks inside for-loop.         google.maps.event.addlistener(marker, 'click', (function(marker, i) {             return function() {                 newmarkers[i].infobox.open(map, this);                 map.panto(markerdata[i].latlng);             }         })(marker, i));     }      return newmarkers; }          //here call initmarkers() made necessary data each marker.  markers returned array markers variable markers = initmarkers(map, [  { latlng: new google.maps.latlng(-33.878301, 150.981126),  businessname: 'vegetarian health' },  { latlng: new google.maps.latlng(-33.799211, 150.926357),  businessname: 'business name two' }  ]);  }   // geocoder below  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 not successful following reason: ' + status); } }); }  </script> 

here what's in body:

<body onload="initialize()"> <div id="panel">   <input id="address" type="textbox" value="sydney, nsw">   <input type="button" value="geocode" onclick="codeaddress()"> </div>  <div style="width:850px; height: 600px" id="map_canvas"></div> </body> 

there error reported:

uncaught typeerror: cannot read property 'setcenter' of undefined  

so seems map defined local. actually, defined global:

var geocoder; var map; 

but local again here:

geocoder = new google.maps.geocoder(); var secheltloc = new google.maps.latlng(-27.532861,134.693340),      markers,     mymapoptions = {         zoom: 7,         center: secheltloc,         maptypeid: google.maps.maptypeid.roadmap     },     map = new google.maps.map(document.getelementbyid("map_canvas"), mymapoptions); 

so, , before map should changed ;:

        ...         maptypeid: google.maps.maptypeid.roadmap     };      map = new google.maps.map(document.getelementbyid("map_canvas"), mymapoptions); 

Comments

Popular posts from this blog

how to proxy from https to http with lighttpd -

android - Automated my builds -

python - Flask migration error -