I´m trying to make a simple code using Google maps API (I'm new at this), the idea is to get the latitude and longitude from JSON variable direccion to the var uluru.
I have the following code:
Where am I wrong?
Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var direccion=[
{
lugar:'CICESE',
lat:31.8675375,
lng: -116.6686867
},
{
lugar: 'Casa',
lat:31.8915163,
lng:-116.6879557
}
];
var uluru = {lat: direccion.lat, lng: direccion.lng};//{lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgMyVeh8DwebGfZHjiNjyle4xFe9pKSdc&callback=initMap">
</script>
</body>
</html>
Your direction is json array, you need to access by index as below:
var uluru = {lat: direccion[0].lat, lng: direccion[0].lng};
see my example below:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var direccion=[
{
lugar:'CICESE',
lat:31.8675375,
lng: -116.6686867
},
{
lugar: 'Casa',
lat:31.8915163,
lng:-116.6879557
}
];
var uluru = {lat: direccion[0].lat, lng: direccion[0].lng};//{lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgMyVeh8DwebGfZHjiNjyle4xFe9pKSdc&callback=initMap">
</script>
</body>
</html>
Related
I need to implement map and custom marker as shown here , here is the map implementation html http://jsfiddle.net/4a87k/ But no idea how to add custom css as marker.
<head>
<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>
function initMap() {
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap">
</script>
</body>
The documentation for customising markers is very good, find it here.
And a simple example is to link to a png file directly for the marker, but you can do more with this with Custom Markers in the api:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151}
});
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var beachMarker = new google.maps.Marker({
position: {lat: -33.890, lng: 151.274},
map: map,
icon: image
});
}
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>
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,
});