i am using this code to display map on my website
我正在使用此代码在我的网站上显示地图
<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>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var geocoder;
var map;
var address ="";
function map(){
alert("insisde");
if(!document.getElementById('val').value){
alert('Enter Val 1 Value');
}
else if (!document.getElementById('val2').value){
alert('Enter Val 2 Value');
}
else if (!document.getElementById('val3').value){
alert('Enter Val 3 Value');
}
else{
address += document.getElementById('val').value;
address += document.getElementById('val2').value;
address += document.getElementById('val3').value;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
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);
map.setZoom(13);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
});
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>
</head>
<body style="margin:0px; padding:0px;" >
<input id="val" />
<input id="val2" />
<input id="val3" />
<button onClick="map()" >Add Map</button>
<div id="map_canvas" style="width:50%; height:50%;">
</body>
</html>
it is working fine when user click on it and add address the first time but when the user changes its address and clicks add map button or just presses the add map button the second time it is giving an error on log
当用户点击它并第一次添加地址时它工作正常但是当用户更改其地址并单击添加地图按钮或只是按下添加地图按钮第二次它在日志上给出错误
asd.html:78 Uncaught TypeError: map is not a function
asd.html:78 Uncaught TypeError:map不是函数
1 个解决方案
#1
0
You don't need to initialize the map every time you call geocoder. Just initialize it on document load and then only display the marker with geocoder results. Every time you call geocode you will just remove the old marker from map. Try this:
每次调用地理编码器时都不需要初始化地图。只需在文档加载时初始化它,然后只显示带有地理编码器结果的标记。每次调用地理编码时,您只需从地图中删除旧标记即可。试试这个:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var map = null;
var marker = null;
$(document).ready(function(){
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
function geocode(){
if(marker) marker.setMap(null);
var geocoder;
var address ="";
if(!document.getElementById('val').value){
alert('Enter Val 1 Value');
}
else if (!document.getElementById('val2').value){
alert('Enter Val 2 Value');
}
else if (!document.getElementById('val3').value){
alert('Enter Val 3 Value');
}
else{
address += document.getElementById('val').value + " ";
address += document.getElementById('val2').value + " ";
address += document.getElementById('val3').value;
geocoder = new google.maps.Geocoder();
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);
map.setZoom(13);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
});
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>
</head>
<body style="margin:0px; padding:0px;" >
<input id="val" />
<input id="val2" />
<input id="val3" />
<button onClick="geocode()" >Geocode</button>
<div id="map_canvas" style="width:50%; height:50%;">
</body>
</html>
#1
0
You don't need to initialize the map every time you call geocoder. Just initialize it on document load and then only display the marker with geocoder results. Every time you call geocode you will just remove the old marker from map. Try this:
每次调用地理编码器时都不需要初始化地图。只需在文档加载时初始化它,然后只显示带有地理编码器结果的标记。每次调用地理编码时,您只需从地图中删除旧标记即可。试试这个:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var map = null;
var marker = null;
$(document).ready(function(){
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 1,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
function geocode(){
if(marker) marker.setMap(null);
var geocoder;
var address ="";
if(!document.getElementById('val').value){
alert('Enter Val 1 Value');
}
else if (!document.getElementById('val2').value){
alert('Enter Val 2 Value');
}
else if (!document.getElementById('val3').value){
alert('Enter Val 3 Value');
}
else{
address += document.getElementById('val').value + " ";
address += document.getElementById('val2').value + " ";
address += document.getElementById('val3').value;
geocoder = new google.maps.Geocoder();
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);
map.setZoom(13);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
});
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>
</head>
<body style="margin:0px; padding:0px;" >
<input id="val" />
<input id="val2" />
<input id="val3" />
<button onClick="geocode()" >Geocode</button>
<div id="map_canvas" style="width:50%; height:50%;">
</body>
</html>