FYI, я не являюсь ниндзя JavaScript, но почувствовал, что я стану тем, что недавно сделал много вещей, основанных на Google Maps.
Я реализовал карту. Пользователь может искать места в Google и помещать маркер для него. для этого есть текстовое поле. Или пользователь может щелкнуть по карте, чтобы поместить маркер в место, которое он ищет, или перетащить маркер.
Код остается неизменным. Дизайн изменен. Идентификатор и имя поля ввода также совпадают. Без изменения кода JS. Но эта вещь не работает.
Здесь веб-сайт
Карта Google создает ошибку.
InvalidValueError: not an instance of HTMLInputElement
Я попробовал решение, данное здесь Но ошибка остается.
В чем может быть причина?
Здесь код:
var map;
var marker;
var latLngC;
function initialize()
{
latLngC = new google.maps.LatLng(14.5800, 121.0000);
var mapOptions = {
center: latLngC,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
map = new google.maps.Map(document.getElementById('source_map'),
mapOptions);
var marker = new google.maps.Marker({
position: latLngC,
map: map,
draggable: true
});
google.maps.event.addListener(marker, 'dragend', function (x)
{
document.getElementById('src_lat').value = x.latLng.lat();
document.getElementById('src_long').value = x.latLng.lng();
document.getElementById('pickup_location').innerHTML = x.latLng.lat()+' , '+x.latLng.lng();
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
geocodeLatLng(geocoder, map, infowindow,x.latLng.lat(),x.latLng.lng(),'source_point');
});
//Get coordinates,address Upon clicking a location in map (Source Map)
//By Sajeev
google.maps.event.addListener(map, 'click', function(x)
{
document.getElementById('src_lat').value = x.latLng.lat();
document.getElementById('src_long').value = x.latLng.lng();
document.getElementById('pickup_location').innerHTML = x.latLng.lat()+' , '+x.latLng.lng();
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
geocodeLatLng(geocoder, map, infowindow,x.latLng.lat(),x.latLng.lng(),'source_point');
});
//Add marker upon clicking on map
//google.maps.event.addDomListener(map, 'click', addMarker);
google.maps.event.addDomListener(map, 'click', function() { addMarker(map); });
var places1 = new google.maps.places.Autocomplete(document.getElementById('source_point'));
google.maps.event.addListener(places1, 'place_changed', function () {
var place1 = places1.getPlace();
var src_addr = place1.formatted_address;
var src_lat = place1.geometry.location.lat();
var src_long = place1.geometry.location.lng();
var mesg1 = "Address: " + src_addr;
mesg1 += "\nLatitude: " + src_lat;
mesg1 += "\nLongitude: " + src_long;
//alert(mesg1);
document.getElementById('src_lat').value = src_lat;
document.getElementById('src_long').value = src_long;
document.getElementById('pickup_location').innerHTML = src_lat+' , '+src_long;
});
//Add marker upon place change
//google.maps.event.addDomListener(places1, 'place_changed', addMarker);
google.maps.event.addDomListener(places1, 'place_changed', function() { addMarker(map); });
}
google.maps.event.addDomListener(window,'resize',initialize);
google.maps.event.addDomListener(window, 'load', initialize);
Мой код HTML выглядит так:
<form role="form" id="frm_source" name="frm_source" method="POST" action="index_action.php">
<div class="form-group">
<label for="source_point"><h2>Pickup Address</h2></label>
<textarea type="text" id="source_point" name="source_point" class="form-control" placeholder="Enter your pick up address here"></textarea>
</div>
<div class="form-group">
<label for="pickup_location"><h3>GPS Cordinates</h3></label>
<hr>
<p id="pickup_location"></p>
</div>
<div class="form-group">
<input type="hidden" id="src_lat" name="src_lat" placeholder="latitude" >
<input type="hidden" id="src_long" name="src_long" placeholder="longitude" >
</div>
<input type="submit" name="submit" id="submit" class="btn btn-primary" value="Next to enter destination address" />
</form>
Карта Google
<div id="source_map"></div>