New to coding so apologies in advance... am looking to add custom icon markers (multiple) to my map, but having trouble displaying even one (the map itself shows fine though).
What's wrong with my code as it stands? (below):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<script src="http://maps.googleapis.com/maps/api/js?key=TEST (I have a valid key here)"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 700px; height: 500px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(53.480782, -2.2445527),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position: {lat: 53.480782, lng: -2.2445527},
title:"TEST",
map: map,
icon: image
});
marker.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
You don't have an initialize function, so your code executes before the DOM is rendered. Look at the javascript console, you will see an error Uncaught TypeError: Cannot read property 'offsetWidth' of null, if you search SO for that you will find that is due to the <div id="map"></div> not being rendered when the map code runs (related question: Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null).
working fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(53.480782, -2.2445527),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position: {
lat: 53.480782,
lng: -2.2445527
},
title: "TEST",
map: map,
icon: image
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Related
First I checked without setTimeout function google map API is fully loaded or not using map idle function. it's working fine. but I tried using the setTimeout function in the google map loading page. the map is loaded successfully. but map idle function is not working on how to fix this issue.
Code.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
setTimeout(function(){
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
},2000);
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log('hi')
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
})
// var map = new google.maps.Map(document.getElementById('map'), {
// zoom: 4,
// center: myLatLng
// });
// var marker = new google.maps.Marker({
// position: myLatLng,
// map: map,
// title: 'Hello World!'
// });
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=***********&callback=initMap">
</script>
</body>
</html>
How to achieve this scenario.
You can use the tilesloaded event of the Maps Javascript API Events. The tilesloaded is used to detect when the map has been fully loaded. A sample POC below using your current implementation.
var map;
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
map.addListener('tilesloaded', function() {
console.log('map is loaded');
});
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log('map is idle')
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
});
}
If this doesn't help you, you can also check the answer from this Stackoverflow question How can I check whether Google Maps is fully loaded?. It appears a lot of users were also experiencing this issue before.
Hope this information find you helpful and good luck on your applicaion!
Use titesloaded event to listen to complete map load.
I have been using the Google Developers Tutorial on how to add a map to my website:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#the_finished_code
I cannot seem to find a way to add a pin to the map, I have used the "centre" function so that the map is centred on the lat and long of the pin, but the pin itself is not visible.
Any way to create a pin at that lat and long?
Just need to instantiate a marker Object and place it at the coordinates:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 44.5403, lng: -78.5463};
var mapOptions = {
center: new google.maps.LatLng(myLatLng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Fiddle
Try the following:
replace center with location
before:
center: new google.maps.LatLng(myLatLng),
after:
location: new google.maps.LatLng(myLatLng),
That should do the trick (should add the Pin automatically).
Im building a site for a friend of mine and im having a hell of time trying to get the map marker to show up, I gotta admit im not much for java coding but Ive done my share of it. Im a designer and 3d motion graphics artist.
Im currently working on this template in Dreamweaver CC and I chose it cause thats how Ive been constructing sites for years.
So he gave me a template that he wanted me to use 427_timeline (its A freebie).
The modified version of this template can be seen here http://johnnybobs3ddesignz.com/
My first time but works the same pretty much. Heres My code, if someone could help me Id appreciate that so much, it would be mighty groovy dude ;)
<script>
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng(34.073809, -118.323371),
zoom: 15,
scrollwheel: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("templatemo-map")
,mapOptions);
var location = new google.maps.LatLng(34.073809, -118.323371);
var contentString = '<h2>Runyon Investment & Realty</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: mylatLng,
title: 'Runyon Investment & Realty',
visible: true
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'resize', function()
{
map.setCenter(center);
});
</script>
I get two javascript errors with your code as is:
Uncaught ReferenceError: mylatLng is not defined
Uncaught ReferenceError: map is not defined
Because mylatLng is not defined in your code (you define location) and map is local to your initialize function
Working code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(34.073809, -118.323371),
zoom: 15,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("templatemo-map"), mapOptions);
var location = new google.maps.LatLng(34.073809, -118.323371);
var contentString = '<h2>Runyon Investment & Realty</p>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: location,
title: 'Runyon Investment & Realty',
visible: true
});
marker.setMap(map);
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#templatemo-map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="templatemo-map" style="border: 2px solid #3872ac;"></div>
Just use this link
https://developers.google.com/maps/documentation/javascript/
to get desired informations.
for example use the following snippet.
They use the
map - option
in the init of the marker. Just try that in your code too.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<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>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I have already pointed my office location in google map.
Also I created API key.
Now i using embeded code to show google map location in my contact page.
I want to replace the same with AP key.
How to show my office location using Google Maps JavaScript API v3.
Following is my test.html page for checking the map. Which parts need to modify to show my location ?
You can see my location in below url
google(dot)com/maps?ll=9.965156,76.290034&z=14&t=m&hl=en-US&gl=US&mapclient=embed&cid=9383043750302267720
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my key already added here">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -9.959238, lng: 76.275271},
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"></div>
</body>
</html>
Sounds like you want to add a marker
Code below is for your initialize function based on the docs but w/ your Lat,Lon and zoom level.
var myLatlng = new google.maps.LatLng(9.965156,76.290034);
var mapOptions = {
zoom: 8,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World"
});
The marker's title (i.e. "Hello World" in the example above) will appear as a tooltip. If you don't want a tooltip, you can remove that line.
I am trying to get a marker to show on the google map for a website I am doing. Without the marker code the map loads fine and shows the correct location (with no marker), when I add the marker code the map no longer loads. Clearly I am missing something simple but I am not too familiar with Jquery.
<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=AIzaSyBWJYTBt3bKUIsQKKsQPSnR1IHNdkAmBQs&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
var marker = new google.maps.Marker({
position:(53.154662, -1.208357),
map: map-canvas,
title:"Hello World!"
});
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thanks for any assistance.
The map-property is expected to be a google.maps.Map-instance and the position-property has to be a google.maps.LatLng:
Furthermore you must create the marker when the map already has been created and in a scope where the maps-instance is accessible, e.g. at the end of initialize().
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(53.154662, -1.208357),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var marker = new google.maps.Marker({
position:new google.maps.LatLng(53.154662, -1.208357),
map: map,
title:"Hello World!"
});
}