I'm new at programming and trying to create geo web app using gmaps.js. Currently I'm stuck at address searching.
Here the code in script.js file:
Creating map:
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
Creating search:
GMaps.geocode({
address: $('#adress').val(),
callback: function(results, status) {
if (status == 'OK') {
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
map.addMarker({
lat: latlng.lat(),
lng: latlng.lng()
});
}
}
});
and HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDVwHmsoQeFb7vSpwpqlyJQHkn_147MpOw&sensor=false">
</script>
<script type='text/javascript' src="script.js"></script>
<script type='text/javascript' src="gmaps.js"></script>
</head>
<body>
<div id="googleMap"></div>
<div id="menu">
<input type="text" id="adress" name="adress">
<input type="submit" class="btn" value="Search">
</div>
</body>
</html>
What i'm doing wrong?
You are Calling '#address' instead of '#adress' as your HTML tags are
<input type="text" id="adress" name="adress">
Its a Typo Mistake , Correct it and Get Back :)
Related
I am currently creating a website for a school project. I have created a code that should display a map with some markers and some lines that represent borders between countries. The problem is that when I load this map I can display the lines but the markers all disappeared. Any help would be very appreciated. I alredy own a valid key.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=MYKEY" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="map" style="width: 768px; height: 512px"></div>
<form action="#">
<input type="button" value="hide" onclick="map.removeOverlay(kml)" />
<input type="button" value="show" onclick="map.addOverlay(kml)" />
</form>
<script type="text/javascript">
var mapProp= {
center:new google.maps.LatLng(41.8919300, 12.5113300),
zoom:3,
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById("map"), mapProp);
var kml = new GGeoXml("http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml");
map.addOverlay(kml);
var imageitaly = 'https://MYWEBSITE/mypath/wp-content/uploads/2019/02/italyscaled.png';
var Rome = {lat: 41.6500086, lng: 12.5113300};
var markerrm = new google.maps.Marker({
position: Rome,
map: map,
title: 'Italia',
icon: imageitaly
});
markerrm.addListener('click', function() {
window.location.href = ('https://MYWEBSITE/mypath/italia');
});
</script>
</body>
</html>
I cant use php echo to call the two coordinates to center the map and with getElementById does not work, what is wrong?
<!DOCTYPE html>
<html>
<body>
<h1>Google Map</h1>
<div id="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(document.getElementById("Focus")),
zoom:5,
};
var map=new
google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
<div id="Focus" type="text" value="45.2527,27.61234">45.2527,27.61234</div>
</body>
</html>
function myMap() {
var arr=document.getElementById("Focus").getAttribute("value").split(",")
var mapProp= {
center:new google.maps.LatLng(arr[0],arr[1]),
zoom:5,
};
var map=new
google.maps.Map(document.getElementById("googleMap"),mapProp);
}
I'm trying to make google maps appears in my website, but the coordinates is displayed dynamically based on database. Here is my code
HTML :
<div class="panel panel-primary">
<div class="panel-heading">
Maps
</div>
<div class="panel-body" id="maps-area" style="height: 500px;" onLoad="loadMap(<?=$row->maps;?>)">
</div>
</div>
JavaScript :
function loadMap(x)
{
var mapOptions =
{
center: new google.maps.LatLng(x),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("maps-area"), mapOptions);
var marker = new google.maps.Marker
({
position: new google.maps.LatLng(x),
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, "load", loadMap);
Load Maps API :
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
But the maps is wouldn't appears. Can anyone tell where is wrong from my code? Thanks before :)
Working version... all i changed is...
<?=$row->maps;?>// i guess this doesn't work as expected??
following is the working version... i hard coded your lat long(taken from your comment)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<body>
<script type="text/javascript">
function loadMap() {
var mapOptions = {
center : new google.maps.LatLng(-7.567472,110.796774),
zoom : 17,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("maps-area"), mapOptions);
var marker = new google.maps.Marker({
position : new google.maps.LatLng(x),
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, "load", loadMap);
</script>
</body>
<div class="panel panel-primary">
<div class="panel-heading">Maps</div>
<div class="panel-body" id="maps-area" style="height: 500px;" onLoad="loadMap()"></div>
</div>
</html>
I'm trying to create a Gmap to allow people to geocode an address and find the respective lat lng. I would like to see this in the forms I've already created. Also, I would like to have the capability of changing the coordinates as the marker is dragged.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Geocoder 10</title>
<style>
#map_canvas { width:400px; height:450px; }
</style>
<script type="text/javascript" src="http://maps.google.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(-30.070, -51.190);
var myOptions = {
zoom: 9,
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,
draggable: true,
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div>
<input id="address" type="textbox" value="">
<input type="button" value="Localizar!" onclick="codeAddress()"><br>
Latitude: <input type="text" id="lat"><br>
Longitude: <input type="text" id="lng"><br>
</div>
</body>
</html>
Inside the geocoder call back do this:
document.getElementById('lat').value = results[0].geometry.location.lat();
document.getElementById('lng').value = results[0].geometry.location.lng();
Working example
Ok... here's the code that makes what I wanted to. It might not be that elegant, but it works. I used the getPosition() method to get the coordinates, just have to click in the geocoded marker!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>Geocoder</title>
<style>
#map_canvas { width:400px; height:450px; }
</style>
<script type="text/javascript" src="http://maps.google.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(-30.070, -51.190);
var myOptions = {
zoom: 9,
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,
draggable: true,
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
google.maps.event.addListener(marker, 'click', function() {
document.getElementById('coords').value = marker.getPosition();
});
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="info"></div>
<div>
<input id="address" type="textbox" value="">
<input type="button" value="Localizar!" onclick="codeAddress()"><br>
<input type="textbox" id="coords">
</div>
</body>
</html>
I'm experimenting with the Google Maps API, and am trying to do a barebones directions app. The form calls the calcRoute() function, which, using alerts, I can see does have the correct 'start' and 'end' variables defined. However, the page is simply reloaded with the form cleared and the map unchanged. For the life of me, I can't figure out what's wrong. Does anybody see anything glaring/what might be causing the problem? Thanks!
Also, apparently I suck at stackoverflow markdown, so here's a pastebin link: http://pastebin.com/BMThntPz
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Maps script -->
<script type="text/javascript" <google maps api> </script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var philadelphia = new google.maps.LatLng(39.9522, -75.1642);
var mapOptions = {
center: philadelphia,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
</head>
<body onload="initialize()">
<div class="container" style="height: 100%">
<div>
<form class="form-horizontal" onsubmit="return calcRoute()">
<input type="text" class="input-xlarge" id="start">
<input type="text" class="input-xlarge" id="end">
<input class="btn" type="submit" value="Let's go!">
</form> <!-- /trip info -->
</div>
<div>
<div id="map_canvas" ></div>
</div>
</div> <!-- /container -->
</body>
</html>
There's a great screencast that shows how to debug the Maps API using Chrome Developer Tools:
http://www.youtube.com/watch?v=nb4gvrNrDWw&feature=player_embedded