Hello I'm trying to have a custom markers using KML icons, the google map works fine but it does not show the custom markers. I'm currently using what I have learned from the Google Map API documentations, where did I go wrong here?
Here's my code.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBSTRDm6eRdkpoVOB2VJVJgTCNgmcuDcq0&callback=initMap">
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initmap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: new google.maps.LatLng(14.529133, 121.021747),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var testIcon = 'http://maps.google.com/mapfiles/kml/paddle/';
var icons = {
evac: {
icon: iconBase + 'ranger_station.png'
},
warehouse: {
icon: iconBase + 'truckpng'
}
};
var features = [
{
position: new google.maps.LatLng(14.529133, 121.021747),
type: 'evac'
}
];
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
</head>
<body onload="initmap()">
<div id="map_canvas" style="width: 1100px; height: 1000px"></div>
</body>
The callback function initmap is not the same as that called by the script initMap and the map ID was referred to incorrectly.
<html>
<head>
<title>Google maps - KML Icons</title>
<script>
function initMap() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 16,
center: new google.maps.LatLng(14.529133, 121.021747),
mapTypeId: 'roadmap'
});
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var testIcon = 'http://maps.google.com/mapfiles/kml/paddle/';
var icons = {
evac: {
icon: iconBase + 'ranger_station.png'
},
warehouse: {
icon: iconBase + 'truckpng'
}
};
var features = [
{
position: new google.maps.LatLng(14.529133, 121.021747),
type: 'evac'
}
];
features.forEach(function(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
});
}
</script>
<script async defer src='//maps.googleapis.com/maps/api/js?key=AIzaSyBSTRDm6eRdkpoVOB2VJVJgTCNgmcuDcq0&callback=initMap'></script>
</head>
<body>
<div id='map_canvas' style='width: 1100px; height: 1000px'></div>
</body>
</html>
Related
Im having a problem with custom icons. I have managed to get different infotext on the markers, i have managed to get the clusters to work, but when i add var icon1 and var icon2 and place them in the location array: "icon: icon2. All fails, is there a way to use both icon, infowindow and clustermarkers?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Marker Clustering</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>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 63.418719, lng: 10.3685516}
});
var icon1 = {
url: "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png", // url
scaledSize: new google.maps.Size(50, 50), // size
};
var icon2 = {
url: "https://maps.google.com/mapfiles/kml/shapes/library_maps.png", // url
scaledSize: new google.maps.Size(50, 50), // size
};
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position:location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
var locations = [
{lat: 63.131623, lng: 10.370243, info:"Test1", icon: icon1},
{lat: 62.432600, lng: 10.300243, info:"Test2", icon: icon2},
{lat: 62.330642, lng: 10.300243, info:"Test2", icon: icon1},
{lat: 63.530691, lng: 10.300243, info:"Test2", icon: icon2},
]
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzoVQ&callback=initMap">
</script>
</body>
</html>
To actually use the icon in the locations array, change your marker definition from:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position:location
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
To:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: location.icon // <--------------------------------add this
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
proof of concept fiddle
code snippet:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {
lat: 63.418719,
lng: 10.3685516
}
});
var infoWin = new google.maps.InfoWindow();
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location,
icon: location.icon
});
google.maps.event.addListener(marker, 'click', function(evt) {
infoWin.setContent(location.info);
infoWin.open(map, marker);
})
return marker;
});
var markerCluster = new MarkerClusterer(map, markers, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
}
var icon1 = {
url: "https://maps.google.com/mapfiles/kml/shapes/parking_lot_maps.png", // url
scaledSize: new google.maps.Size(50, 50), // size
};
var icon2 = {
url: "https://maps.google.com/mapfiles/kml/shapes/library_maps.png", // url
scaledSize: new google.maps.Size(50, 50), // size
};
var locations = [{
lat: 63.131623,
lng: 10.370243,
info: "Test1",
icon: icon1
}, {
lat: 62.432600,
lng: 10.300243,
info: "Test2",
icon: icon2
}, {
lat: 62.330642,
lng: 10.300243,
info: "Test2",
icon: icon1
}, {
lat: 63.530691,
lng: 10.300243,
info: "Test2",
icon: icon2
}, ]
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div id="map"></div>
Recently I tried to add a google map to a web page by using Google API, but was unable to do it. How can I fix this? I need helps to fix this problem.
This can be run as a html file, but when I tried with my local server, the script is unable to load.
<script>
function avMap(){
var myCanvas = document.getElementById('map1');
var mapCenter = new google.maps.LatLng(6.949707,80.1831939);
var mapOptions = {
center: mapCenter,
zoom:11,
mapTypeId: google.maps.MapTypeId.ROADMAP //SATELLITE, HYBRID, TERRAIN
};
var mapAv = new google.maps.Map(myCanvas, mapOptions);
var marker1 = new google.maps.Marker({
position: mapCenter,
animation: google.maps.Animation.BOUNCE,
draggable: false
});
marker1.setMap(mapAv);
var marker2 = new google.maps.Marker({
position: {lat: 6.4692368, lng: 80.5755751},
animation: google.maps.Animation.DROP,
draggable: false
});
marker2.setMap(mapAv);
//info-window
var avNote = "<p>"+"Avissawella is the most beautiful area in Sabaragamuwa/Western border."+" "+"For more details, please visit"+
" "+"<a href='https://en.wikipedia.org/wiki/Avissawella'"+ "target='_blank'>"+"this link"+"</a>";
var infoWin = new google.maps.InfoWindow({
content: avNote,
maxWidth:200
});
infoWin.open(mapAv, marker1);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=avMap"></script>
You are missing the async defer on your script include.
<script src="https://maps.googleapis.com/maps/api/js?callback=avMap"></script>
should be:
<script src="https://maps.googleapis.com/maps/api/js?callback=avMap" async defer></script>
proof of concept fiddle
code snippet:
html,
body,
#map1 {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script>
function avMap() {
var myCanvas = document.getElementById('map1');
var mapCenter = new google.maps.LatLng(6.949707, 80.1831939);
var mapOptions = {
center: mapCenter,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP //SATELLITE, HYBRID, TERRAIN
};
var mapAv = new google.maps.Map(myCanvas, mapOptions);
var marker1 = new google.maps.Marker({
position: mapCenter,
animation: google.maps.Animation.BOUNCE,
draggable: false
});
marker1.setMap(mapAv);
var marker2 = new google.maps.Marker({
position: {
lat: 6.4692368,
lng: 80.5755751
},
animation: google.maps.Animation.DROP,
draggable: false
});
marker2.setMap(mapAv);
//info-window
var avNote = "<p>" + "Avissawella is the most beautiful area in Sabaragamuwa/Western border." + " " + "For more details, please visit" +
" " + "<a href='https://en.wikipedia.org/wiki/Avissawella'" + "target='_blank'>" + "this link" + "</a>";
var infoWin = new google.maps.InfoWindow({
content: avNote,
maxWidth: 200
});
infoWin.open(mapAv, marker1);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=avMap" async defer></script>
<div id="map1"></div>
I have written code to display a marker on a googlemap. The code is copied almost verbatim, from the Google API docs. Yet the marker is not displaying on the page.
Here is my code: What am I doing wrong?
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
I notice that there are similar questions, the only thing that seems to be different with my question is that I am creating my marker in the jQuery ready() event - NOT the initialize() function.
Is this why the marker is not been displayed?
Note: I don't remember reading anything in the Google API docs that states that markers should be created when the map is being created, so that can't obviously be the case
Move your marker creation to the initialize function.
$(document).ready(function(){}) works when DOM elements are loaded, which doesn't necessarily mean that the map is loaded. So if you try to create the marker in the document ready function, the map might not be created then, once the map is ready map variable has the map object, so you can make the marker on that, and you can add the markers dynamically after the map is loaded.
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
console.log('map loaded');
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
makePin(42.745334, 12.738430);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function(){
console.log('document loaded');
})
function makePin(lat, long){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
title: 'This is the title'
});
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<button onclick="makePin(42.749334, 12.739430)">Add Pin</button>
<div id="map"></div>
How can you make marker without loaded map. Map need to initialize first then marker will work
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function () {
infowindow.open(map, marker);
});
marker.setMap(map);
}
Here is the solution:
var map;
var central_location = new google.maps.LatLng(42.745334, 12.738430);
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: central_location,
zoom: 14,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({
position: central_location,
map: map,
title: 'This is the title'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
$(document).ready(function() {
var infowindow = new google.maps.InfoWindow({
content: '<div>Hello</div>'
});
});
#map {
width: 500px;
height: 380px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" style=""></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Can you please take a look at following link and let me know why this google map working neither on my computer not on jsfiddle. I just got the code from [Google Maps API. Do I have to add something more to that?
As I said i tried both on my computer and on jsfiddle site with this link
Thanks for you comments and help
3]2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Overlays within Street View</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);
function initialize() {
// Set up the map
var mapOptions = {
center: astorPlace,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Setup the markers on the map
var cafeMarker = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: bank,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: busStop,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="panel" style="margin-left:-100px">
<input type="button" value="Toggle Street View" onclick="toggleStreetView();"> </input>
</div>
<div id="map-canvas"></div>
</body>
</html>
You need to set a height and width for the map-canvas. I've cleaned up the code some and it should be working here: http://jsfiddle.net/Zuds3/3/
HTML
<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'> </script>
<div id="panel" style="margin-left:-100px">
<input type="button" value="Toggle Street View" onclick = "toggleStreetView();" ></input>
</div>
<div id="map-canvas"></div>
CSS
#map-canvas{
height: 400px;
width: 400px;
}
JavaScript
var map;
var panorama;
var astorPlace = new google.maps.LatLng(40.729884, -73.990988);
var busStop = new google.maps.LatLng(40.729559678851025, -73.99074196815491);
var cafe = new google.maps.LatLng(40.730031233910694, -73.99142861366272);
var bank = new google.maps.LatLng(40.72968163306612, -73.9911389350891);
function initialize() {
// Set up the map
var mapOptions = {
center: astorPlace,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
// Setup the markers on the map
var cafeMarker = new google.maps.Marker({
position: cafe,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: bank,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: busStop,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
I am using the below javascript code to show map and marker.The marker is loading while map load,but i want to load the marker if the button named "Add marker" is clicked.The marker should points to the current location.How to do this here.
js.
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder = new google.maps.Geocoder();
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').innerHTML = [
latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
var map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: latLng,
title: 'Marker',
map: map,
draggable: true
});
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
html
<div id="mapCanvas"></div>
Thanks
please try this. hope it help.
1. make map as global variable.
2. initialize map
3. add marker on button click event.
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
};
jQuery("$addmarker").click(function(){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
title: 'Marker',
map: map,
draggable: true
});
})
</script>
Here is my complete sample code.
<script type="text/javascript">
var map;
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng('23.11', '71.00'),
zoom: 2,
scrollwheel: false,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
function addMarker()
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(23.72, 72.100),
map: map,
});
}
</script>
</HEAD>
<BODY onload="initialize();">
<div id="map_canvas" style="width:700px; height:500px;"></div>
<input type="button" id="addMarker" value="addMarker" onclick="addMarker();"/>
</BODY>
</HTML>
data is array which contains lat and lng
function addMarker(data) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.lat, data.lng),
map: map
});
You need to put the part:
var marker = new google.maps.Marker({
[...]
});
inside a onclick event listener.
The jQuery way to do this with a button element:
$('button').on('click', function() {
var marker = new google.maps.Marker({
[...]
});
});
You have to think about making the variables map and latLng global.
var map; // Declare map as global.
function initialize() {
var latLng = new google.maps.LatLng(-29.3456, 151.4346);
map = new google.maps.Map(document.getElementById('mapCanvas'), {
zoom: 8,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
}
// Call addMarker on click of the button.
function addMarker(){
var latLng = new google.maps.LatLng(-29.3456, 151.4346); // Put lat long as desired.
var marker = new google.maps.Marker({
position: latLng,
title: 'Marker',
map: map,
draggable: true
});
}