it's working but when I want to use these code in masterpage I have a problem.
this Problem is about coordinates.
it's looking work but don't take me a coordinates.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false&language=tr"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/yonetici.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function (responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(39.909450, 34.849715);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function () {
updateMarkerAddress('Sürükleniyor...');
});
document.forms[0].txtLat.value = 40.775146501143766;
document.forms[0].txtLng.value = 30.384921661376946;
google.maps.event.addListener(marker, "drag", function () {
var latlng = marker.getPosition();
document.forms[0].txtLat.value = latlng.lat();
document.forms[0].txtLng.value = latlng.lng();
});
google.maps.event.addListener(marker, 'dragend', function () {
geocodePosition(marker.getPosition());
});
}
// Onload handler to fire off the app.
</script>
<script type="text/javascript">
$(function () {
var menu_ul = $('.menu > li > ul'),
menu_a = $('.menu > li > a');
menu_ul.hide();
menu_a.click(function (e) {
e.preventDefault();
if (!$(this).hasClass('active')) {
menu_a.removeClass('active');
menu_ul.filter(':visible').slideUp('normal');
$(this).addClass('active').next().stop(true, true).slideDown('normal');
} else {
$(this).removeClass('active');
$(this).next().stop(true, true).slideUp('normal');
}
});
});
</script>
</head>
<body onload="initialize()">
<form id="form1" runat="server">
<div class="ad_googlemaps_area" >
<div id="mapCanvas"></div>
<div id="infoPanel">
<div id="info" style="display:none;" ></div>
<b>Tahmini Adres:</b>
<div id="address" ></div>
<b>Enlem</b>
<asp:TextBox ID="txtLat" runat="server"></asp:TextBox>
<b>Boylam:</b>
<asp:TextBox ID="txtLng" runat="server"></asp:TextBox>
</div>
</div>
</form>
</body>
remove the onload attribute and initialize method from your body element and javascript both instead put your code inside the pageLoad method as below:
function pageLoad(sender, args) { //use this method to load your map
var geocoder = new google.maps.Geocoder();
var latLng = new google.maps.LatLng(39.909450, 34.849715);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function () {
updateMarkerAddress('Sürükleniyor...');
});
document.forms[0].txtLat.value = 40.775146501143766;
document.forms[0].txtLng.value = 30.384921661376946;
google.maps.event.addListener(marker, "drag", function () {
var latlng = marker.getPosition();
document.forms[0].txtLat.value = latlng.lat();
document.forms[0].txtLng.value = latlng.lng();
});
google.maps.event.addListener(marker, 'dragend', function () {
geocodePosition(marker.getPosition());
});
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function (responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
// Onload handler to fire off the app.
}
Let me know if you still have trouble to load your map.
I try but same problem.
function pageLoad(sender, args) { //use this method to load your map
var geocoder = new google.maps.Geocoder();
var latLng = new google.maps.LatLng(39.909450, 34.849715);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function () {
updateMarkerAddre**strong text**ss('Sürükleniyor...');
});
no problems so far
problem Start in here
document.forms[0].txtLat.value = 40.775146501143766;
document.forms[0].txtLng.value = 30.384921661376946;
google.maps.event.addListener(marker, "drag", function () {
var latlng = marker.getPosition();
document.forms[0].txtLat.value = latlng.lat();
document.forms[0].txtLng.value = latlng.lng();
});
google.maps.event.addListener(marker, 'dragend', function () {
geocodePosition(marker.getPosition());
});
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function (responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
// Onload handler to fire off the app.
}
Related
i need to show some marker on googlemaps.
I have write this section and i pass the data with locationList array, but the map don't show all my markers. Can you help me for understand where i have the problem?
Thank's for answers.
<asp:Content id="CustomScripts" ContentPlaceHolderID="CustomScript" runat ="server">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(44.837367, 11.029718),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var temp = locationList
for (var i = 0; i < locationList.length; i++) {
var args = locationList[i].split(",");
var location = new google.maps.LatLng(args[0], args[1])
var marker = new google.maps.Marker({
position: location,
map: map
});
var j = i + 1;
marker.setTitle(message[i].replace(/(<([^>]+)>)/ig, ""));
attachSecretMessage(marker, i);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function attachSecretMessage(marker, number) {
var infowindow = new google.maps.InfoWindow({
content: message[number],
size: new google.maps.Size(50, 50)
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
$(document).ready(function () {
$("#MainContent_time1 , #MainContent_time2").datetimepicker({
dateFormat: 'yy/mm/dd',
timeFormat: 'HH:mm:ss',
pick12HourFormat: false
});
$("#MainContent_time1 , #MainContent_time2").keydown(function (e) {
var charCode = e.which;
if (charCode != 8 && charCode != 46) {
e.preventDefault();
} else {
var id = $(this).attr("id");
$("#" + id).val("");
}
});
});
</script>
I am new to google map. I need an help to implement pagination for the table content inside infowindow while clicking marker.
Here is my code :
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['table']});
var map;
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
var mapInfos = [];
var infoWindowView = new google.maps.InfoWindow;
function initialize()
{
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom:5,
center: new google.maps.LatLng(49.072086992455475,-5.05078125),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker=new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
function mapInfoTable(container)
{
this.tableContainer = container;
var me = this;
var cssClass = {rowNumberCell: 'rowNumberCellClass'};
this.dT = new google.visualization.DataTable();
this.dT.addColumn("string", "Name");
this.dT.addColumn("string", "City");
this.populateTable = function()
{
this.dT.addRows([
['A1' ,'C1'],
['A2' ,'C2'],
['A3' ,'C3'],
['A4' ,'C4'],
['A5' ,'C5'],
['A6' ,'C6'],
['A7' ,'C7'],
['A8' ,'C8']
]);
this.draw();
}
this.table = new google.visualization.Table(document.getElementById(this.tableContainer));
this.draw = function()
{
this.table.draw(this.dT, {allowHtml: true, showRowNumber: true, cssClassNames: cssClass, page: 'enable', pageSize : 4, pagingSymbols: {prev: 'Previous',next: 'Next'}});
}
}
google.maps.event.addListener(marker, 'click', function(e) {
var InfoTab = new mapInfoTable('TableInfo');
InfoTab.populateTable(mapInfos);
var content = document.getElementById("TableInfo").innerHTML;
infoWindowView.setContent(content);
infoWindowView.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="mapCanvas" style="width:800px;height:500px"></div>
<div id="TableInfo" style="position:fixed;"></div>
</body>
</html>
Please let me know where the problem lies.
You need to wait for the 'domready' event on the infowindow before populating the table.
proof of concept fiddle
code snippet:
google.load('visualization', '1', {
'packages': ['table']
});
var map;
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapInfos = [];
var infoWindowView = new google.maps.InfoWindow;
function initialize() {
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 5,
center: new google.maps.LatLng(49.072086992455475, -5.05078125),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myCenter
});
marker.setMap(map);
function mapInfoTable(container) {
this.tableContainer = container;
var me = this;
var cssClass = {
rowNumberCell: 'rowNumberCellClass'
};
this.dT = new google.visualization.DataTable();
this.dT.addColumn("string", "Name");
this.dT.addColumn("string", "City");
this.populateTable = function() {
this.dT.addRows([
['A1', 'C1'],
['A2', 'C2'],
['A3', 'C3'],
['A4', 'C4'],
['A5', 'C5'],
['A6', 'C6'],
['A7', 'C7'],
['A8', 'C8']
]);
this.draw();
}
this.table = new google.visualization.Table(document.getElementById(this.tableContainer));
this.draw = function() {
this.table.draw(this.dT, {
allowHtml: true,
showRowNumber: true,
cssClassNames: cssClass,
page: 'enable',
pageSize: 4,
pagingSymbols: {
prev: 'Previous',
next: 'Next'
}
});
}
}
google.maps.event.addListener(marker, 'click', function(e) {
var dTableInfo = document.createElement("div");
dTableInfo.id = "dTableInfo";
google.maps.event.addListener(infoWindowView, 'domready', function() {
var InfoTab = new mapInfoTable('dTableInfo');
InfoTab.populateTable(mapInfos);
});
infoWindowView.setContent(dTableInfo);
infoWindowView.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#mapCanvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="mapCanvas"></div>
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>langganan</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="markercluster.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var cluster = [];
function load(lt,lg,zoom) {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(lt, lg),
zoom: zoom,
mapTypeId: 'roadmap'
});
var infowindow = new google.maps.InfoWindow();
downloadUrl("phpsqlajax_genxml3.php ", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("nama");
var address = markers[i].getAttribute("alamat");
var type = markers[i].getAttribute("wilayah");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
cluster.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
map.setZoom(17);
map.setCenter(marker.getPosition());
infowindow.setContent("Kode Pelanggan : "+markers[i].getAttribute("kode_pelanggan")+"<br/>"+
"Nama Pelanggan : "+markers[i].getAttribute("nama")+"<br/>"+
"Alamat Pelanggan : "+markers[i].getAttribute("alamat")+"<br/>"+
"Wilayah : "+markers[i].getAttribute("wilayah"));
infowindow.open(map, marker);
}
})(marker, i));
}
var a=15;
var mc = new MarkerClusterer(map, cluster,{
maxZoom: a /*,
// gridSize: size,
// styles: styles[style]
// */
}
);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
// google.maps.event.trigger(marker,'click');
function info(x)
{
google.maps.event.trigger(cluster[x],'click');
}
function replaceAll(find, replace, str) {
return str.replace(new RegExp(find, 'g'), replace);
}
function get(){
var tempout;
$.post('tampil.php',{ ambil: frm.ambil.value},
function(output){
var tampung = output.replace("[", "");
tampung = tampung.replace("]", "");
tampung = replaceAll('"',"",tampung);
var kode = tampung.split(",");
var latx = kode[3];
var lngx = kode[4];
load(latx,lngx,17);
info(kode[0]);
$('#nama').html(output).show();
}
);
}
function doNothing() {}
//]]>
</script>
<script type="text/javascript">
</script>
</head>
<body onload=load(-5.162764,119.443118,13)>
<form name="frm">
<center><input type="text" id="ambil" name="ambil" value="">
<input type="button" id="Cari"value="Cari" onClick="get(); "/></br>
<div id="nama"></div></center>
Open Info Window
</form>
<div id="map" style="width: 600px; height: 400px" ></div></hr>
</body>
</html>
I'm currently use a new system for my gis website and I'm getting the following error: Uncaught TypeError: Cannot read property '__e3ae_' of undefinedT.trigger
# main.js:18info # map.php:112(anonymous function)
# map.php:134jQuery.Callbacks.fire # jquery.js:3143jQuery.Callbacks.self.fireWith # jquery.js:3255done # jquery.js:9309jQuery.ajaxTransport.send.callback # jquery.js:9713
i user markerclustererplus and i want to show info window on cluster click. but i get undefined for all marker in a cluster. i just can't figure it out why and what can be happened. here is my code
<!DOCTYPE html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<style type="text/css">
html, body, #map { margin: 0; padding: 0; height: 95% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var oncekimarker=null;
var customIcons = {
satilik: {
icon: 'images/pins/yellow.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
kiralik: {
icon: 'images/pins/blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function initialize() {
var markers = null;
var mcmarkers = [];
var globalMarker = [];
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(39, 35),
zoom: 6,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
var infowindow = new google.maps.InfoWindow();
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"))
var point = new google.maps.LatLng(lat, lng);
var html = "something";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
mcmarkers.push(marker);
bindInfoWindow(marker, map, infoWindow, html);
}
var mcOptions = {
gridSize: 30,
maxZoom: 13,
zoomOnClick: false,
averageCenter: true
};
var mc = new MarkerClusterer(map, mcmarkers, mcOptions);
google.maps.event.addListener(mc, 'clusterclick', function(cluster) {
var content = '';
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//Get markers
var yazmarkers = cluster.getMarkers();
var titles = "";
//Get all the titles
for(var i = 0; i < yazmarkers.length; i++) {
titles += yazmarkers[i].name + "\n";
}
infowindow.close();
infowindow.setContent(titles); //set infowindow content to titles
infowindow.open(map, info);
google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() });
});
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
//infoWindow.open(map, marker);
if (oncekimarker) oncekimarker.setAnimation(null);
marker.setAnimation(google.maps.Animation.BOUNCE);
oncekimarker = marker;
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
</div>
<div id="map" style="width: 80%"></div>
</body>
</html>
any help whoul be appreciated. thanks for all your helps.
Your markers do not have a "name" property.
titles += yazmarkers[i].name + "\n";
You can add one by creating them like this
var marker = new google.maps.Marker({
name: name,
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
Warning: While this works with the API at present, it is not documented behavior, you may want to use the "title" property instead, which is documented and has the benefit of appearing on the Marker as a tooltip on mouseover.
working example
I've followed the search and zoom example from here: https://developers.google.com/fusiontables/docs/samples/search_and_zoom
and I've managed to get the "Reset" button to work, but the "Search" button isn't working. I wondered if it was because I am using 2 layers, but I don't know how to correct by java script if that is that case. Any help appreciated. Thanks.
<html>
<head>
<meta charset="UTF-8">
<title>Smithfield Foods UK</title>
<link rel="stylesheet" type="text/css" media="all" href="FusionMapTemplate.css" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var defaultZoom = 10;
var defaultCenter = new google.maps.LatLng(52.6500, 1.2800)
var locationColumn = 'geometry'
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: defaultCenter,
zoom: defaultZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
// Initialize the first layer
var FirstLayer = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
},
map: map,
styleId: 3,
templateId: 5,
suppressInfoWindows: true
});
google.maps.event.addListener(FirstLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
// Initialize the second layer
var SecondLayer = new google.maps.FusionTablesLayer({
query: {
select: 'PostCode',
from: '1RrCcRC-1vU0bfHQJTQWqToR-vllSsz9iKnI5WEk'
},
map: map,
styleId: 2,
templateId: 2,
suppressInfoWindows: true
});
google.maps.event.addListener(SecondLayer, 'click', function(e) {windowControl(e, infoWindow, map);
});
var legend = document.createElement('div');
legend.id = 'legend';
var content = [];
content.push('<h3>Density of Polish speaking population</h3>');
content.push('<p><div class="color red1"></div>=>2%<4%');
content.push('<p><div class="color red2"></div>=>4%<6%');
content.push('<p><div class="color red3"></div>=>6%<10%');
content.push('<p><div class="color red4"></div>=>10%<15%');
content.push('<p><div class="color red5"></div>=>15%<20%')
content.push('<p><img src="Smithfield Black.png" alt="Smithfield Logo" width ="120px">');
legend.innerHTML = content.join('');
legend.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
var legend2 = document.createElement('div');
legend2.id = 'legend2';
var content2 = [];
content2.push("<h3>Smithfield Food's sales in Asda Stores</h3>");
content2.push('<p><img src="red-dot.png"><£1,000');
content2.push('<p><img src="yellow-dot.png">=>£1,000<£20,000');
content2.push('<p><img src="green-dot.png">=>£20,000<£40,000');
legend2.innerHTML = content2.join('');
legend2.index = 1;
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(legend2);
var zoomToAddress = function() {
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);
map.setZoom(10);
} else {
window.alert('Address could not be geocoded: ' + status);
}
});
};
google.maps.event.addDomListener(document.getElementById('search'), 'click', zoomToAddress);
google.maps.event.addDomListener(window, 'keypress', function(e) {
if (e.keyCode ==13) {
zoomToAddress();
}
});
google.maps.event.addDomListener(document.getElementById('reset'), 'click', function() {
map.setCenter(defaultCenter);
map.setZoom(defaultZoom);
layer.setOptions({
query: {
select: 'geometry',
from: '1hpGzmMBg8bDgPOGrAXvc0_QVLSBqQ0O5vpLbfUE'
}
});
});
}
// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {
infoWindow.setOptions({
content: e.infoWindowHtml,
position: e.latLng,
pixelOffset: e.pixelOffset
});
infoWindow.open(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div>
<label>Enter an address:</label>
<input type="text" id="address" value="Leeds">
<input type="button" id="search" value="Search">
<input type="button" id="reset" value="Reset">
</div>
</body>
</html>
I get a "geocoder is undefined" error". Because it isn't defined.
One way to fix it would be to add this to the global scope (just before your initialize function):
var geocoder = new google.maps.Geocoder();
Or you could do it the way it is done in the example you used, it is inside the initialize function there.
working example