How do I put the place mark on google maps?
The code below shows only particular location but I want to add my custom place mark image on google maps.
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(23.0300,72.5800),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Here is an example Google Maps Marker:
var myMarker = new google.maps.Marker({
position: new google.maps.LatLng(31.1287, -94.9594117), // Example Lat/Long
map: map, // references the map object you defined earlier
title: 'My custom Title', // a title that will appear on hover
icon: 'images/googleMap/icon-star.gif' // Optional Marker Icon to use
});
You can find out more in the Google Map Docs at Google Maps: Simple Markers
Best of luck! :)
Try this:
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false">
</script>
<script>
function initialize()
{
var mapPin = "/path/to/image.png";
var Marker = new google.maps.Marker({
position: new google.maps.LatLng(23.0300,72.5800),
map: map,
icon: mapPin
});
var mapProp = {
center:new google.maps.LatLng(23.0300,72.5800),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Related
I have the following code to display my home. But in my Webpage, it shows only my city generally. It does not show my location specifically although I used correct altitude and longitude from the URL shown;
I want like this;
I want image
But now it shows like this;
now image
Here is my code;
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
function initialize(){
var mapProp = {
center:new google.maps.LatLng(6.2422975,80.0603382),//latitude and longitude respectively
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize)
</script>
</head>
<body>
<div id="googleMap" style="width:680px;height:400px;"> </div>
</body>
You're defining the map, but you're not defining the marker for the map.
https://developers.google.com/maps/documentation/javascript/markers
Is there a way I could load coordinates(from csv file, xlxs etc.) to the google map I embedded in my webpage? All the examples I see on the net only shows I must login to google map itself. What I want to do is to load the coordinates and put markers to those coordinates. The map is in my webpage.. Is there a way I could do this in JavaScript?
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Like the code above, but i have multiple coordinates, so, is there a way or code I code use to load coordinates from a file and add a marker to it..?
Let's say that you know how to read a data from .csv and you know how to convert it to an array.
So you can iterate through the array and add markers as you want like this:
// get the file content via ajax
var csvContent = document.querySelector('#json').value;
var coords = [];
[].forEach.call(csvContent.split(/\n/g), function(a) {
coords.push(a.split(','));
});
markers = [];
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
function initialize() {
var mapProp = {
center:myCenter,
zoom:11,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
for (var i = 0; i < coords.length; i++) {
var marker = new google.maps.Marker({
position:new google.maps.LatLng(coords[i][0], coords[1][1])
});
marker.setMap(map);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
<script src="http://maps.googleapis.com/maps/api/js"></script>
JSON file:
<textarea id="json">
51.5086,-0.12086
51.5186,-0.12087
51.5286,-0.12088
</textarea>
<hr />
<div id="googleMap" style="width:500px;height:380px;"></div>
I am trying to show markers on google map in a web page.
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
window.MY = {};
function test() {
addMarker(new google.maps.LatLng(88.4, 22.5));
}
function addMarker(myLatlng) {
var marker = new google.maps.Marker({
position: myLatlng,
map: MY.map
});
}
function initialize() {
var myOptions = {
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
MY.map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
navigator.geolocation.getCurrentPosition(function(position) {
MY.map.setCenter(new google.maps.LatLng(position.coords.latitude,position.coords.longitude));
});
google.maps.event.addListener(MY.map, 'click', function(event) {
addMarker(event.latLng);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="height:380px;"></div>
<button onclick="test()">test</button>
</body>
</html>
When I click on the map, marker shows up, but when I click on test button, marker doesn't show up for the specified location(88.4, 22.5). Can someone please explain me the behavior.
The location google.maps.LatLng(88.4,22.5) is above the arctic circle. A latitude of 88.4 is very close to the north pole.
Perhaps you want google.maps.LatLng(22.5,-88.4) (in the Gulf of Mexico) or google.maps.LatLng(22.5,88.4) (Kolkata, India).
Replace your function test with
function test() {
var position = new google.maps.LatLng(88.4, 22.5)
addMarker(position);
MY.map.setCenter(position);
}
Your marker is falling outside map's viewport.
there are the code i written, mostly i just copy it from the google api example, dont know where i get wrong,i am sure the error is from the "google.maps.event.addListener" function, but no idea how to fix it, can any one help me that?
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var infowindow = new google.maps.InfoWindow(
{
content:"abc"
});
var x=new google.maps.LatLng(52.395715,4.888916);
var stavanger=new google.maps.LatLng(58.983991,5.734863);
var amsterdam=new google.maps.LatLng(52.395715,4.888916);
var london=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:x,
zoom:4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip=[stavanger,amsterdam,london,stavanger];
var flightPath=new google.maps.Polygon({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
flightPath.setMap(map);
}
google.maps.event.addListener(flightPath,'click', function() {
infowindow.setPosition(stavanger);
infowindow.open(map,flightPath);
});
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Display an infowindow by getting the coordinate of the first point in the path of the polygon and using it for the infowindow
google.maps.event.addListener(flightPath,'click', function() {
infowindow.setPosition(this.getPath().getAt(0));
infowindow.open(map);
});
google.maps.event.addListener(flightPath,'click', function() {
var aar=this.getPaths();
infowindow.setPosition(arr.getAt(2));
infowindow.open(map,flightPath);
});
I am sure this is a simple fix, but I've been searching all over and everything I try just does not work. All I'm trying to do is replace the default marker with a custom icon, but it will not show up. Here's my code:
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
center:myLatlng,
zoom:15,
disableDefaultUI:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);
var marker = new google.maps.Marker();
marker.setPosition(myLatlng);
marker.setMap(map);
marker.setIcon('/images/map-marker.png');
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
I know the image is in the correct location; I can find it in my browser if I type the path. I've checked and double-checked, but is there a problem with my code? Sorry, I can't provide a live example.
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
center:myLatlng,
zoom:15,
disableDefaultUI:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);
var markerImage = 'images/map-marker.png';
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: markerImage
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Try this, i changed how to create the marker.
I changed the image url to test it, it seams its working:
<html>
<head>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(43.041936,-88.044523);
var mapOptions = {
center:myLatlng,
zoom:15,
disableDefaultUI:true,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("milwaukeeMap"), mapOptions);
var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png';
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: markerImage
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="milwaukeeMap" style="height:400px;width:400px;"></div>
</body>
</html>
Code on JSFiddle http://jsfiddle.net/iambnz/NGja4/160/
I created a small test file, and there does not seem to be anything wrong with your javascript code. I see my own marker perfectly. So it seems there is something wrong in the rest of your HTML file. Does the PNG file exists? Is it really a PNG? Maybe try a different image to be sure.
Ron.
I found that in some cases, externally hosted icons need an extra parameter e.g.
images/map-marker.png?raw=true
I was using Firefox 57.0.4 for Ubuntu then I switch over to Chromium Version 63.0.3239.84 and it worked. That is with the
?raw=true
On and off.