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
Related
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>
I am modifying a vb.net desktop project in which through a WebBrowser create a html file in which I use the Google Maps Javascript v3, to display a map in which among other things is needed to show a kml file roads, show them the html file
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8">
<style type "text/css"> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px}</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=KEY"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {zoom: 9, center: { lat: 13.775203, lng: -88.873150}};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var ctaLayer = new google.maps.KmlLayer('http://localhost/Red_pavimentada.kml');
ctaLayer.setMap(map);
google.maps.event.addListener(marker1, 'click', function() { info5.open(map,marker1);});
}
google.maps.event.addDomListener(window, 'load', initialize); </script>
</head
<body>
<div id="map-canvas"> </div>
</body
</html>
Into ctaLayer i'm setting an url of kml file ubicated on my webserver local wamp, but i had add the next lines into apache file httpd.conf,because the webserver need to know the kind of file contains
AddType application/vnd.google-earth.kml+xml .kml
AddType application/vnd.google-earth.kmz .kmz
But it is not enough to load the kml on the map, what could be failing ?, what changes should do?
thank you for your help
am struggling the last 3 hours
am trying to update my google maps markers positions from database without refresh the page so the user can track updated movement
i used jquery to extract all the data from database from page called data.php that give me everything i need to type it directly into the javascript code to add the markers.
but when i put or inside the javascript initialization function everything is not working
so i don't know how to get the html.(output).show to div without crashing the whole code
here is the code of the page that i want to display google markers
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>GLOBAL CLEANERS</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript">
function get()
{
$.post('data.php',function(output)
{$('#age').html(output).show();}
);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(33.3146996,44.3772661);
var mapOptions = {
zoom: 11,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = 'zbala.png';
<?php echo '<div id="age">var myLatlng500 = new google.maps.LatLng(33.3146996,44.3772661);</div>'; ?>
}
google.maps.event.addDomListener(window, 'load', initialize);
// ??? ????? ????? ???? ???????
</script>
</head>
<body bgcolor="002022">
<form name="form"><input type="button" name="submit-button"value="submit-button"onclick="get();"></form>
<img src="logo-global.jpg" style="height: 100px;width:90%;position: absolute;left:150px;top:0%; opacity: 1.0;"/>
<div id="map-canvas" style="width:100%;height:100%px;top: 100px;left:150px"></div>
</body>
</html>
I am trying to use google maps JS API v3 in one of my projects everything was working fine until day before yesterday, then suddenly it stopped working when i tried to debug using console it showed that the url for loading map script main.js was failing
<!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 type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key={API_KEY}&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
I have used a real API key in place of {API_KEY}
How can I achieve my objective?
I pasted your code into a file named test.html, inserted a valid api key and tested the following browsers in MAC OS X 10.9:
Safari
Chrome
Firefox
It works in all these browser without any error. Please check the following:
Validation period of your api key
invisible characters
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/