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>
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>
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&"></script>
</head>
<body onload="myMap()">
<div class="container-fluid">
<div id="map"></div>
</div>
</head>
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");
});
I have an external json which I am trying to overlay on a google map. The overall plumbing works fine.
The map gets generated. Data gets iterated, and markers are placed by reading the coordinates. But the when i look at the map the coordinates are way off on the map. The data set can not be wrong, i can give my word on that. Is there some adjustment I need to make to get this thing map to each other. Here is my code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.748433, -73.985655),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript">
$(document).ready(function() {
var image = 'http://soumghosh.com/otherProjects/doitt/images/marker.png';
$.getJSON("http://data.cityofnewyork.us/resource/jfzu-yy6n.json", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.facility_address.latitude, data.facility_address.longitude);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
icon:image
});
marker.setMap(map);
});
});
});
</script>
</body>
</html>
I am just getting started with the Maps API and I was trying to copy the following example.
https://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
When I copy the source I get the following error in the script.
google is not defined
Line 11
var fenway = new google.maps.LatLng(42.345573,-71.098326);
This is the html file I am using.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script src="//maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
map.setStreetView(panorama);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
</body>
</html>
The google example loads perfectly but my code does not.
I have seen a few people getting this error but none of the fixes listed seem to work for me. Have I just made a basic error while copying the script?
There is the protocol missing in the path.
//maps.googleapis.com/maps/api/js?sensor=false
should be
http://maps.googleapis.com/maps/api/js?sensor=false
(it's missing in many of the examples)