Here is my code for a google map
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 900px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(18.979026,16.468506),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
name: 'Parking',
icon: iconBase + 'parking_lot_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
var features = [
{
position: new google.maps.LatLng(-33.91721, 151.22630),
type: 'Parking'
}
var map = new google.maps.Map(map_canvas, map_options)
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Why is it wrong?
All what it is supposed to do is be centered and have a marker with the icon parking at a certain lat & long.
I tried following the google tutorial, but I understand it
So any help would be much appreciated
Use MarkerImage to place an custom icon
img = new google.maps.MarkerImage('parking_lot_maps.png');
then
Marker = new google.maps.Marker({
position: pos,
icon: img,
});
Related
I tried this following codes:
It only appears like this
What i want to appear
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {
lat: 44.540,
lng: -78.546
},
zoom: 16
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
</body>
</html>
You need to add a marker to your map, here is the documentation for adding a marker in javascript: https://developers.google.com/maps/documentation/javascript/markers#add
It works like this:
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044}; //MARKER POSITION
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!'
});
}
I have included google map in my html(web page), but its not showing the location with red icon(image attached). What code am I missing here?
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 800px;
height: 500px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 19.1738076 , lng: 72.8650819 },
zoom: 14
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
You did not define a position/marker, only the center of the map. To set a marker you need to add it to your map.
This is from the google maps api documentation on how to add a a marker:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
// Define position for your marker
var myLatLng = {lat: -25.363, lng: 131.044};
// Add marker to your map
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Text for your marker!'
});
I am trying to display a date format in google maps api infowindow on click of a marker.
I am not able to do it. Is this a bug that only strings are to be displayed on click of a marker.
content = "19/11/2015"
infowindow.setContent(content);
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var contentString ="19/11/2015"
//this also works
// '<div>19/11/2015</div>'
//and this
// var date=new Date();
// var contentString =date.getDay()+'/'+date.getMonth()+'/'+date.getFullYear();
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: uluru,
map: map,
title: 'Uluru (Ayers Rock)'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
</body>
</html>
I have a simple google map v3 with one marker and infowindow attached to it.
if I click the marker, the infowindow shows and map pans automatically to fit the infowindow in the view, however if I try to trigger a click to open the infowindow when the page loads, the infowindow opens but panning does not occur.
Triggering is done like so:
google.maps.event.trigger(marker, 'click');
If I move above code into a function and call it with setTimeout 500, then the panning happens as well.
I dug around in API, but could not find a function to cause auto panning on demand. is there a way without using a timeout? Why does the timeout help?
Thanks
Here's the example that Does not pan:
<!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 { width: 400px; height: 320px }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(42.6620233,-78.4250679);
var mapOptions = {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.trigger(marker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
Here's the one that does pan but only with a timeout:
<!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 { width: 400px; height: 320px }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var marker;
function initialize() {
var myLatlng = new google.maps.LatLng(42.6620233,-72.4250679);
var mapOptions = {
center: myLatlng,
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var contentString = '<div style="width: 200px; height: 100px;">Testing</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
setTimeout('pop()', 500);
//google.maps.event.trigger(marker, 'click');
//infowindow.open(map,marker);
//map.pan();
}
google.maps.event.addDomListener(window, 'load', initialize);
function pop() {
google.maps.event.trigger(marker, 'click');
}
//setTimeout('pop()', 500);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
The initializing of the map is not a synchronous process, when you've created the Map-instance it takes some time until all properties of the map are set(so maybe some properties that are needed to determine the position where to pan the map)
When you use a timeout and it works the needed properties are set at this time.
Instead a timeout I would suggest to call the function when the tiles have been loaded, you can be sure that the initializing of the map has been finished at this time:
google.maps.event.addListenerOnce(map, 'tilesloaded', pop);
When I use Google Maps as an anonymous user, when I find a company that I'm building a website for, Google shows me some kind of a default street view photo for that place. It's quite nice and I would like to have this photo appear also in my custom InfoWindow that I'm preparing using API3. Is there a method for that or should I sniff and use its source path?
You can embed the street view panorama like this, or embed a screen capture image in the infowindow contents (<img src="...">) Also you may set the marker visible: false
http://jsfiddle.net/sST8z/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100% }
#map_canvas { margin: 0; padding: 0; width: 500px; height: 300px }
#street { margin: 0; padding: 0; width: 150px; height: 150px }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
street = new google.maps.StreetViewPanorama(document.getElementById("street"), {
position: new google.maps.LatLng(40.72982797782924, -73.98622512817383),
zoomControl: false,
enableCloseButton: false,
addressControl: false,
panControl: false,
linksControl: false
});
var infow = new google.maps.InfoWindow({ content: document.getElementById("street") });
var myLatLng = new google.maps.LatLng(40.72982797782924, -73.98622512817383);
var marker = new google.maps.Marker({ position: myLatLng, map: map, visible: true });
infow.open(map, marker);
map.setCenter(myLatLng);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="street"></div>
<div id="map_canvas"></div>
</body>
</html>