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>
Related
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>
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 want to integrate google maps on my webpage
the way i am using to do that is this :
<section id="contact" class="map">
<iframe width="100%" height="500px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
<!-- -->
</small>
</iframe>
</section>
Here is a live plunkr : http://plnkr.co/edit/Pakox2L63kO0i5dR9iPh?p=preview
Question: How do i change the location to something else. I mean from where on google maps can i pick the location and paste it as it is in the src section to have a new location.
( for example i want to point to this location : https://www.google.co.in/maps/place/Cafe+Coffee+Day/#18.558569,73.791647,17z/data=!3m1!4b1!4m2!3m1!1s0x3bc2bed9d33bfd3b:0x913791c91ba6cb4c )
Thanks
Don't use that code if you want to manipulate your map.
here is the basic sample code of google map.
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);`
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
you can learn more this https://developers.google.com/maps/documentation/javascript/examples/
google.maps.event.addListener(map, 'click', function(e) {
alert(e.latLng());
});
when you click the map..it will get its lat and lng
you are using an iframe wich is hard to manipulate you can use the google maps api .
its costumable and you can change a lot of settings :
Google Maps API
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/
I am using Google Maps JavaScript API to load map inside my mobile website. When I navigate from the previous page map won't load but if I refresh the page map load as expected. If I use the JavaScript inside the body even the page is not loading. I can't figure out the problem. Is it something with the previous page code ?
Here is my code in Head tag.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.1.0.min.css" />
<link href="css/site.css" rel="stylesheet" type="text/css" />
<script src="./js/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=xxxxxxxx&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(<?php echo $longtitude ?>, <?php echo $latitude ?>);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
</script>
</head>
Here is my Body Tag
<body >
<div id="wrapper">
<div class="header">
<img src="images/logo-small.png" alt="logo"/>
</div>
<div class="back">
<a data-rel="back"><img src="images/back.png"/></a>
</div>
<div id="content">
<div class="list">
<div class="list-items" id="info">
<?php echo "<h3>$sa1<span>$postcode<span>$sa2</span></span></h3><h2>$price</h2>";?>
<br class="clear" />
<br class="clear" />
</div>
</div>
<br class="clear" />
<div id="map-canvas">
</div>
</div>
</div>
</body>
I refer question This and This but it's not working with my code.
Problems
First of all, why are you using jQuery Mobile? I don't see the point in your current example.
In this case jQuery Mobile is the main problem. Because jQuery Mobile is used everything will be loaded into the DOM. When you "navigate from the previous page" page is not refreshed and this line:
google.maps.event.addDomListener(window, 'load', initialize);
can't trigger. It will trigger only if you manually refresh the page.
Second thing, you cant use jQuery Mobile page events without having any page what so ever. In your code you have this part:
$(document).delegate('#content', 'pageinit', function () {
navigator.geolocation.getCurrentPosition(initialize);
});
For it to initialize successfully div with an id content MUST have another attribute called data-role="page", like this:
<div id="content" data-role="page">
</div>
Third thing. Lets assume everything else is ok. Pageinit will not trigger from the HEAD. When jQuery Mobile loads pages it loads them into the DOM and only BODY part will be loaded. So for your map to work you need to move our javascript to the BODY (including a css). In you first example it didnt worked because you were triggering page even on a non-page div container.
And last thing, if you want to use jQuery Mobile properly you will need to take care correct version of jQuery is used with a correct version of jQuery Mobile. If you want to be safe use jQ 1.8.3 with jQM 1.2
Solution
Here's a working solution:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<style>
#map-canvas {
width: 300px;
height: 300px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(33.89342, -84.30715);
var mapOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Location'
});
}
//google.maps.event.addDomListener(window, 'load', initialize);
$(document).on('pageshow', '#wrapper', function(e, data){
initialize();
});
</script>
<div id="wrapper" data-role="page">
<div class="header">
<h3>Test</h3>
<img src="images/logo-small.png" alt="logo"/>
</div>
<div id="content">
<div id="map-canvas"></div>
</div>
</div>
</body>
</html>
Working examples and much more information regarding this topic can be found in this ARTICLE.
just add: data-ajax="false" to the link tag which redirects to the page that contains your map. for example, if map.aspx contains your map, you can link to it like this:
<a href="map.aspx" data-ajax="false">
I was having same problem but I have no any jquery-mobile libraray or any other which would conflict the map. Struggling a hard time, I found a solution for my project:
Doesn't work:
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" async defer>
</script>
Works (Removing async and defer attributes):
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
Hope! This helps someone if the other solutions doesn't work. Try this only if none of other solution work because it is not good suggestion as we know google page speed guide or google map api guide says to use it.
I have also same problem with
google.maps.event.addDomListener(window, 'load', initialize); where initialize is my method .
I just add few line of code before google.maps.event.addDomListener(window, 'load', initialize);
Code is
$(document).ready( function () {
initialize();
});
and this code is working for me
You should use the pageloadevent to load everything. This way everything is loaded once jquery Mobile has done all the DOM changes it needs. I've had this same problem and that's what helped.
$(document).on('pageload', function() {
initialize();
});
It's in the docs: http://api.jquerymobile.com/pageload/
EDIT: Sometimes it also helps to load the markers in a separate function than the one loading the map.