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>
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
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'm getting the "Cannot call method 'addDomListener' of undefined" error with the google.maps.event.addDomListener(window, 'load', initialize); code line, where event is 'undefined'. My code below is basically copied from an example on developer.google.com.
$(function () {
var officeMap = $("#map-canvas");
if (officeMap.length > 0) {
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644), zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
}
});
The google maps script (with API key) is loaded before this at the end of the document body (using Modernizr), looking like this: "https://maps.googleapis.com/maps/api/js?key=myApiKey&sensor=false" (I switch "myApiKey" with generate key ofc :))
Does the error indicate that the Google Maps script didn't load first? Or is my API-key invalid?
Or something else?
The google code sample is correct, but not going to run in most website given there is ajax script loading involve. And yes you are right the google script is not loaded at the point when you call the function.
Take a look at the source of that google script, it is not the full javascript sdk, it is just a proxy/starter file. I remember it is not like this last time when those sample code works without problem.
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>
<script>
function initialize() {
var officeMap = $("#map-canvas");
if (officeMap.length > 0) {
var map;
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644), zoom: 8
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
}
</script>
Try using this instead of your key
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false">
My code
var myCenter=new google.maps.LatLng(-34.397, 150.644);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById('maparea'),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
title:'Hi'
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:'',
boxStyle: {
maxHeight:200
}
});
infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);
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>
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.