I'm new to javascript and not too familiar with the google API integration. I'm just trying to load a simple page with a google map for testing. I've seen different implementations and can really discern any differences which might be giving me errors in this little code block. Can anyone tell me why I am getting getting this error?
<HTML>
<HEAD>
<TITLE> MAP </TITLE>
</HEAD>
<SCRIPT src="https://maps.googleapis.com/maps/api/js?
key=**keyhere**&callback=initialize"></script>
<SCRIPT LANGUAGE ="JavaScript">
function initialize(){
var map = new google.maps.Map(document.getElementById('map'), {zoom: 3,
center: {lat:51.500, lng:-0.201}});
}
</SCRIPT>
</BODY onload= "initialize()">
<div id="map" style="width:500px; height:400px;"></div>
<BODY>
<HTML>
You have syntax errors in your HTML, this is incorrect:
</BODY onload= "initialize()">
<div id="map" style="width:500px; height:400px;"></div>
<BODY>
should be:
<BODY onload= "initialize()">
<div id="map" style="width:500px; height:400px;"></div>
</BODY>
You also don't need/want two calls to initialize (one in the body onload, the other in the API callback parameter), remove one.
Working code:
<HTML>
<HEAD>
<TITLE> MAP </TITLE>
</HEAD>
<SCRIPT src="https://maps.googleapis.com/maps/api/js?callback=initialize" async defer ></script>
<SCRIPT LANGUAGE ="JavaScript">
function initialize(){
var map = new google.maps.Map(document.getElementById('map'), {zoom: 3,
center: {lat:51.500, lng:-0.201}});
}
</SCRIPT>
<BODY>
<div id="map" style="width:500px; height:400px;"></div>
</BODY>
<HTML>
Related
Google map getting "initMap is not a function" in chrome browser only.
In other browsers (Firefox, IE, etc ) are working fine.
I am using the Google MAP API for location search and autocomplete location.
The similar question answers I had tried. (https://stackoverflow.com/questions/46319676/initmap-is-not-a-function-in-using-google-maps-api),(https://stackoverflow.com/questions/40448238/initmap-is-not-a-function)
Not working yet in Chrome.
Here is the code.
<script>function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: { lat: 34.397, lng: 150.644 },
scrollwheel: false,
zoom: 2
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key={{KEY}}&callback=initMap">
</script>
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
</div>
The script should be on the below section. It can't find the "map" div hence creates a problem that leads to "initMap is not a function" problem.
<html>
<head></head>
<body>
<div>
<div id="map" style="width: 500px; height: 400px;"></div>
</div>
<script>
// scripts goes here
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key={{KEY}}&callback=initMap">
</script>
</body>
</html>
use this
<script
src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
$(document).ready(function() {
...
google.maps.event.addDomListener(window, 'load', initMap);
});
When I try to run this code in a browser, the google maps window appear, but the satelite or map image doesn`t show properly. I can hardly see the map or satelite image.
<DOCTYPE html>
<html lang="no">
<head>
<title>Kontakt</title>
<meta charset="utf-8">
<link rel="stylesheet type=text/css" href="stylesheetfgross.css">
</head>
<body>
<header>
<h1>Kontakt</h1>
</header>
<div id="map" style="width:400px;height:400px">
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(59.234389, 11.137546),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
</body>
I just deleted function myMap() from your code and google script looks like that right now: <script src="https://maps.googleapis.com/maps/api/js"></script>, just deleted callback from url and it works now. Check jsFiddle
I used this, and it worked for me.
<iframe width="600" height="450" frameborder="0" style="border:0"
src="key" allowfullscreen="">
</iframe>
Hello i try to add google map to my project but when u render page it looks like this.
Code of showed above,page looks like this.
#using OnlineShop.Models;
#{
Layout = "~/Views/Shared/_MainPageLayout.cshtml";
}
<html>
<head>
<link type="text/css" rel="stylesheet" href="~/Content/MainPage.css?Wednesday 20th of July 2016 07:45:21 AM" />
<script src="~/Scripts/jquery-3.1.0.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?key=MyKey" type="text/javascript"></script>
<meta name="viewport" content="width=device-width" />
<title>Contacts</title>
</head>
<body>
<div id="showProduct">
<p>Email:inimicos471#gmail.com</p>
<p>Phone:555-555-555</p>
<p>City:Kiev</p>
<p>Adress:Fiskulturi 6</p>
<div id="canvas" style="height:500px;width:500px"></div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
GetMap();
})
function GetMap() {
var Kiev = google.maps.LatLng(50.4126106, 30.5444569);
var mapOptions = {
zoom: 15,
center: Kiev,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("canvas"), mapOptions);
}
</script>
I tried to find solution in internet but there are advices to render div first ,then add map to it.But is seems that i did it.
You are missing the new keyword when you assign a value to Kiev:
var Kiev = new google.maps.LatLng(50.4126106, 30.5444569);
^
On a side note; you are loading both jquery.js and jquery.min.js. You should only ever load one version. Same for jquery.unobtrusive-ajax.js
I'm coming across a strange problem as I try to learn Google Maps.
Everything works great as I follow the tutorial from Google Maps.
However things go awry when I try to place the map in a div that is not the body div. For example, instead of
<body>
<div id="map-canvas"></div>
</body>
I'm trying this
<body>
<div id="mycontainer">
<div id="map-canvas"></div>
</div>
</body>
Now it stops working!
It doesn't make sense, because the Javascript uses a getElementById() function, so the exact location of the id shouldn't matter right?
Live Demo
The Code
<!DOCTYPE html>
<html>
<head>
<title>Asynchronous Loading</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 99%;
margin: 60px;
padding: 0px
}
</style>
<script>
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
'callback=initialize';
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="myContainer">
<div id="map-canvas"></div>
</div>
</body>
</html>
You need height & width to make the map appear. either body or <div id="mycontainer"> or <div id="map-canvas"> need to have height & width set with fix number not percentage.
Read similar question
your fiddle http://jsfiddle.net/6JR39/1/
<!DOCTYPE html>
<html>
<head>
<title>RJI Events</title>
<link rel="stylesheet" type="text/css" href="stylesheets/scrollbar.css">
<link rel="stylesheet" type="text/css" href="stylesheets/app.css">
<style type="text/css">
#import url("http://www.google.com/uds/css/gsearch.css");
#import url("gmlocalsearch.css");
</style>
<script type="text/javascript" src="jslibs/cubiq-iscroll/iscroll.js"></script>
<script src="jslibs/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jslibs/jquery-ui-1.8.14.custom/js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
<script src="jslibs/cubiq-iscroll/iscroll.js" type="text/javascript"></script>
<script src="jslibs/phonegap-1.0.0.js" type="text/javascript"></script>
<script src="jslibs/handlebars.1.0.0.beta.3.js" type="text/javascript"></script>
<script src="app/start.js" type="text/javascript"></script>
<script>
var myScroll;
function OnLoad() {
//GSearch.execute("google");
//I feel like it should go here
}
function loaded() {
myScroll = new iScroll('wrapper', { scrollbarClass: 'myScrollbar' });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script src="http://maps.google.com/maps?file=api&v=2&key=AIzaSyCrw28V3lIOj9Rav9_7fVWrB2sKUzoqKkc"
type="text/javascript"></script>
<script src="http://www.google.com/uds/api?file=uds.js&v=1.0" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/localsearch/gmlocalsearch.js" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
// Create and Center a Map
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(38.95, -92.32), 15);
// bind a search control to the map, suppress result list
map.addControl(new google.maps.LocalSearch(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT));
}
}
GSearch.setOnLoadCallback(initialize);
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">
<div id="header">Event Name</div>
<div id="wrapper">
<div id="scroller">
<div id="map_canvas" style="width:99%;height:500px"></div>
</div>
</div>
<div id="footer">
<div id="footerInfo">
<div id="footerEvents-active"><a class = "footer-link" href = "index.php">Events</a></div>
<div class="footerSpacer">|</div>
<div id="footerRJI"><a class = "footer-link" href = "aboutRJI.html">RJI</a></div>
<div class="footerSpacer">|</div>
<div id="footerAbout"><a class = "footer-link" href = "about-us">About</a></div>
</div>
</div>
</body>
</html>
Im sort of new to stack overflow, so sorry if im not specific enough. Im using the localsearch from here http://code.google.com/apis/ajax/playground/#localsearch and would like to have it have a default search value, and search it on load like in this example http://code.google.com/apis/ajax/playground/#center_localsearch. Thank you, i appreciate all of the help. Also, this is for a mobile phone app, although if it works in the browser it will work on the phone