Google map center with document.getElementById not working - javascript

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);
}

Related

Google Map not working after adding API showing grey box

Google map is showing grey box or sometimes show nothing/white
i googled some links and try their ways but didn't work for me.
Any solution?
i tried to change the zoom but still not working
Console shows no error
<head>
<script src="http://maps.google.com/maps?file=api&v=3&hl=en&key=GOOGLE_GENERATED_API&sensor=true"type="text/javascript"></script>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(31.4856,74.3406);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 8};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Welcome to Ali Institute of Education"
});
infowindow.open(map,marker);
}
</script>
</head>
<body onload="myMap()">
<?php include '/layout/header.php';?>
<!-- Contact Us Content -->
<div class="container-fluid">
<div id="map" style="width: 800px; height: 400px; overflow:visible;"> </div>
</div>
</body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&hl=en&key=GOOGLE_GENERATED_API&sensor=true" ></script>
<!--OR-->
<script src="https://maps.google.com/maps/api/js?file=api&v=3&hl=en&key=GOOGLE_GENERATED_API&sensor=true"></script>
On this link replace text GOOGLE_GENERATED_API with your google api key.
Showing perfect on my side. Which error you get on your browser consollog ?
your maps API cdn is not correct. Maybe you get this error google is not define.
google.maps.event.addDomListener (myMap); ADD this line or you can remove the onload from body and add this
google.maps.event.addDomListener (window, 'load', myMap);
Additionaly I have added a click function on marker. If you have any question ask me in comment.
function myMap() {
var myCenter = new google.maps.LatLng(31.4856,74.3406);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 8};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Welcome to Ali Institute of Education"
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
google.maps.event.addDomListener (myMap);
//google.maps.event.addDomListener (window, 'load', myMap);
// if you use the window load myMap You don't need onload function on body tag
}
#map{
width: 800px;
height: 400px;
overflow:visible;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp"></script>
</head>
<body onload="myMap()">
<div class="container-fluid">
<div id="map"></div>
</div>
</head>

zoom_changed listener doesn't work for me

I'm trying to use a zoom listener event in a google maps so that I can resize some axis I have in it. As a beginning, I'm trying to use an alert so that I can see whether if the listener detects a change in the zoom level or not, but I'm not able to get any alert at all. My code is the following:
<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 - pygmaps </title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false"></script>
<script type="text/javascript">
var map;
function initialize() {
var centerlatlng = new google.maps.LatLng(49.801674, 11.188139);
var myOptions = {
zoom: 18,
center: centerlatlng,
scaleControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
* plotting stuff *
google.maps.event.addDomListener(window, 'load',initialize);
google.maps.event.addDomListener(maps,'zoom_changed', function()
{
alert("changed");
});
</script>
</head>
<body>
<div style="text-align:center;">
<button onclick="draw_axis()">Enable/Disable Axis</button> <br><br> <div id="log"></div>
</div>
<div id="map_canvas" style="width: 100%; height: 90%;"></div>
</body>
</html>
Does anyone see the problem?
The map variable isn't defined when you create the zoom_changed listener, it is created later, when the initialize function runs (also the variable is map, not maps).
code snippet:
var map;
function initialize() {
var centerlatlng = new google.maps.LatLng(49.801674, 11.188139);
var myOptions = {
zoom: 18,
center: centerlatlng,
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addDomListener(map, 'zoom_changed', function() {
alert("changed");
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div style="text-align:center;">
<div id="log"></div>
</div>
<div id="map_canvas" style="width: 100%; height: 90%;"></div>
You need to set zoom_changed event on the instance of google.maps.Map inside your initialize() function.
map.addListener('zoom_changed', function() {
alert("changed");
});

Dynamic coordinates google maps wouldn't load

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>

Address search using google maps API (gmaps.js)

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 :)

How to find the lat lng from a geocoded address?

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>

Categories