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
Related
On my website: http://www.ilovefooddreams.com/eligibility
I have a google map shown and all of the sudden it now says.
"Oops! Something went wrong.This page didn't load Google Maps
correctly. See the JavaScript console for technical details."
I looked everywhere I could find and they said to get an API key. I have one hooked up but it still doesn't work.
Here is the code
<html>
<head>
</head>
<body>
<div id="googleMap" style="width:1030px;height:380px;"></div>
</body>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&libraries=places&callback=initialize"
async defer>
</script>
<script>
var amsterdam=new google.maps.LatLng(34.0789742,-118.361875);
function initialize()
{
var mapProp = {
center:amsterdam,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:amsterdam,
radius:3000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</html>
How do I fix this?
Thanks!
The version that is currently on your website is reporting Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error in the javascript console.` because there is no key on that page where the API is being included (it is not the same as what you posted in your question):
<script
src="https://maps.googleapis.com/maps/api/js">
</script>
You have a callback in the script referencing a function called initMap. You need to update it to initialize
<div id="googleMap" style="width:1030px;height:380px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&callback=initialize" async defer></script>
<script>
function initialize()
{
var amsterdam=new google.maps.LatLng(34.0789742,-118.361875);
var mapProp = {
center:amsterdam,
zoom:13,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myCity = new google.maps.Circle({
center:amsterdam,
radius:3000,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:2,
fillColor:"#0000FF",
fillOpacity:0.4
});
myCity.setMap(map);
}
</script>
JSFiddle
Make sure to remove the listener as the callback handles this.
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>
does anyone know how to always display single label for a city i.e. disable city's local name if there is equivalent in language that was selected during Google Maps API initialization (e.g. &language=en)?
So to be more specific, not to have double names (English and local names displayed together on the map) as it happens for Ukraine, China, Japan now, when language=en is selected for Google Maps API?
Thank you in advance for any tips!
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<style>
html, body, #map-canvas {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.16&language=en"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(45.6, 29.5)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
code snippet:
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(45.6, 29.5)
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.16&language=en"></script>
<div id="map-canvas"></div>
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.