I would like to center a google map from an address I get from a database with laravel. However the map isn't showing. Where is the problem?
<script>
function initMap() {
getLocations();
}
function getLocations() {
var http = new XMLHttpRequest();
http.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=' + {{ $address }} + '&key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI', true);
http.onload = function() {
var coordinates = JSON.parse(http.responseText);
coordinates = coordinates['results'][0]['geometry']['location'];
var event = {lat: coordinates['lat'], lng: coordinates['lng']};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: event
});
var marker = new google.maps.Marker({
position: event,
map: map
});
};
http.send();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI&callback=initMap">
</script>
you should show a bit more of your code, and give error codes returned.
Anyhow I think it's either the way you pass the address or the way you have your html setup. A quick way to check if it's a good address is placing an alert. Or you could test for a 200 response from the server.
Look at the following code that works
and here is the snippet
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
getLocations();
}
function getLocations() {
var http = new XMLHttpRequest();
http.open('GET', 'https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&&key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI', true);
http.onload = function() {
var coordinates = JSON.parse(http.responseText);
coordinates = coordinates['results'][0]['geometry']['location'];
var event = {lat: coordinates['lat'], lng: coordinates['lng']};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: event
});
var marker = new google.maps.Marker({
position: event,
map: map
});
};
http.send();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkCcwU02g9AlDkBzL6S6MbRBUNi8Z7atI&callback=initMap">
</script>
</body>
</html>
Related
Not sure why the google map cannot display
HTML Code
<div id="map" style="width:400px;height:600px;"></div>
<script>
function initMap() {
var location = { lat: 1.275699, lng: 103.845802 };
var map = new goole.maps.Map(document.getElementByID("map"), {
zoom: 5
center: location})
var marker = new google.maps.Marker({ position: myCenter });
marker.setMap(map);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCwXow-YSSaavXynAkBF1TkpAPKijAC-Qk&callback=initMap"></script>
I haven't added any CCS code for the map.
there are syntax errors in your code I have corrected them ref
<div id="map" style="width:400px;height:600px;"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCwXow-YSSaavXynAkBF1TkpAPKijAC-Qk&callback=initMap" async defer></script>
I have created three markers using Google Maps API. Is there a way that I can add an event listener to each marker so that they will work independently when the corresponding marker is active? I would like to display a message if the user is getting closer to a marker, specifically with bounds_changed. I want to continue giving the user a message until they get to a zoom level of say 5.
<script>
var map;
var score;
score = 0;
function initMap() {
var chicago = {lat: 41.8781, lng: -87.6298};
var indianapolis = {lat: 39.7684, lng: -86.1581};
var oklahomaCity = {lat: 35.4819, lng: -97.5084};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0.0, lng: 0.0},
zoom: 1
});
var chicagoMarker = new google.maps.Marker({
position: chicago,
});
var oklahomaCityMarker = new google.maps.Marker({
position: oklahomaCity,
});
var indianapolisMarker = new google.maps.Marker({
position: indianapolis,
});
if (score==0) {
chicagoMarker.setMap(map)
}
if (score==1) {
oklahomaCityMarker.setMap(map)
}
if (score==2) {
indianapolisMarker.setMap(map)
}
chicagoMarker.setVisible(false);
indianapolisMarker.setVisible(false);
oklahomaCityMarker.setVisible(false);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCuvsCAF0gVmwv6AF0SoA3xBjV66RG4r7o&callback=initMap"
async defer></script>
try this
google.maps.event.addListener(chicagoMarker, 'click', function(){
//do something
})
I have posted my code but map is not load.please suggestion to this question.
i will also use google map js but can't load.
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap">
if($('.map-container:visible').length >= 0)
{
initMap();
}
function initMap(){
google.maps.visualRefresh = true;
var myLatlng = new google.maps.LatLng('24.980832' ,'55.092480');
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('dubaiTradeNew'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Dubai Trade'
});
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
}
Please try adding height width once
<div class="map-container" id="dubaiTradeNew" style="height:100px;width:100px">
</div>
And Set different scripts
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
<script>
//Code here
</script>
I am trying to embedded google map code. It is designed to use geolocation and show traffic around your area live. It works in Chrome and Firefox. But does not with IE. It wont even show an error message. Any ideas how to solve this? Thank you.
Here is the code...
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<article>
</article>
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '350px';
mapcanvas.style.width = '100%';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 12,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
</head>
</html>
Can anyone please tell me what is wrong with this code? The map loads but a user's click action does not open up the info_window or re-center the map to the clicked point.
I want the address of a location to pop-up as an info_window whenever the user clicks on a map.
<!DOCTYPE html>
<html>
<head>
<title>Accessing arguments in UI events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px
}
#map-canvas {
height: 60%; width: 60%
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=MY_KEY&sensor=true">
</script>
<script type="text/javascript">
var geocoder;
var map;
var info_win;
var pos;
var marker;
function initialize()
{
google.maps.visualRefresh = true;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function(evt) {
pos = evt.latLng;
map.setCenter(pos);
geocoder.geocode({'location': pos}, function(results, status)
{
if(status == google.maps.GeocoderStatus.OK)
{
marker = new google.maps.Marker
({
map: map,
position: pos
});
info_win = new google.maps.InfoWindow
({
content: results[0].formatted_address,
});
info_win.open(map,marker);
}
else
{
alert("Could not load");
}
});
});
}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
First problem: You are adding the click listener to the map outside of the initialize function, so it is being added before the map is initialized:
<script type="text/javascript">
var geocoder;
var map;
var info_win;
var pos;
var marker;
function initialize()
{
google.maps.visualRefresh = true;
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', function() {
pos = map.getPosition();
map.setCenter(pos);
geocoder.geocode({'location': pos}, function(results, status)
{
marker = new google.maps.Marker
({
map: map,
position: pos
});
info_win = new google.maps.InfoWindow
({
content: results[0].formatted_address,
});
infowindow.open(map,marker);
});
});
}
</script>
After that you will find that a google.maps.Map object does not have a getPosition method. It does have a getCenter method, but you probably want to use the latLng property of the click event instead.
google.maps.event.addListener(map, 'click', function(evt) {
pos = evt.latLng;
map.setCenter(pos);
And fix the code that opens the info_win to open the google.maps.InfoWindow that you created:
info_win = new google.maps.InfoWindow
({
content: results[0].formatted_address,
});
info_win.open(map,marker);