I am trying to create a map with markers.
But in the below code I can't see the markers.
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps - pygmaps </title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false"></script>
<script type="text/javascript">
function initialize() {
var centerlatlng = new google.maps.LatLng(37.427000, -122.145000);
var myOptions = {
zoom: 16,
center: centerlatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var latlng = new google.maps.LatLng(37.427000, -122.145000);
var img = new google.maps.MarkerImage('C:\Python27\lib\site-packages\gmplot\markers\D8BFD8.png');
var marker = new google.maps.Marker({
title: "no implementation",
icon: img,
position: latlng
});
marker.setMap(map);
var latlng = new google.maps.LatLng(37.428000, -122.146000);
var img = new google.maps.MarkerImage('C:\Python27\lib\site-packages\gmplot\markers\6495ED.png');
var marker = new google.maps.Marker({
title: "no implementation",
icon: img,
position: latlng
});
marker.setMap(map);
var latlng = new google.maps.LatLng(37.429000, -122.144000);
var img = new google.maps.MarkerImage('C:\Python27\lib\site-packages\gmplot\markers\000000.png');
var marker = new google.maps.Marker({
title: "no implementation",
icon: img,
position: latlng
});
marker.setMap(map);
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
For example: C:\Python27\lib\site-packages\gmplot\markers\6495ED.png exists by the way. I can see that there are images but images dont appear on the map. Can anyone say how can I fix this situation?
Your path is incorrect. Change it with for example this URL.
https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png
and you will see markers.
You can find more about marker icons here
https://developers.google.com/maps/documentation/javascript/examples/icon-complex?hl=ru
I had an issue with something similar recently and just using forward slashes instead of back slashes fixed it
Related
I'm making a new app where the user can add the places that he visited on the map, am using flask_googlemaps extension to create the map from a view and i want to add a new marker on this map that get generated from the view .
The markers I've created them manually inside the view,
views.py
#mapapp.route('/gomap')
def gomap():
fullmap = Map(
identifier="fullmap",
varname="fullmap",
style=(
"height:100%;"
"width:100%;"
"top:0;"
"left:0;"
"position:absolute;"
"z-index:200;"
),
cluster=False,
lat=42.8770413,
lng=74.4517747,
markers=[
{
'icon': '//maps.google.com/mapfiles/ms/icons/green-dot.png',
'lat': 42.8770413,
'lng': 74.4513254,
'infobox': "Hello I am <b style='color:green;'>GREEN</b>!"
}
],
zoom="12"
)
return render_template('example_fullmap.html', fullmap=fullmap)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Flask Google Maps Full Map Example</title>
<link rel="stylesheet" href="">
{{fullmap.js}}
</head>
<body>
<h1>Flask Google Maps Full Map Example</h1>
{{ fullmap.html }}
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(42.8770413,74.4517747);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{"stylers": [{ "saturation": -100 }]}]
};
map = new google.maps.Map(document.getElementById("fullmap"), myOptions);
function placeMarker(location) {
var text = prompt("Комментарий");
var marker = new google.maps.Marker({
position: location,
map: map,
title: text,
icon: {
url: "http://www.suzuki.fr/media/image/interface/map-marker.png",
scaledSize: new google.maps.Size(42, 42)
}
});
}
}
google.maps.event.addDomListener(window, "load", initialize());
</script>
</body>
</html>
If you can see down where am creating a new marker if I clicked on the map, but if I clicked nothing happens, actually the function not calling it self, in the page source I can see my JavaScript codes but in action nothing happens.
You will need to execute the placeMarker() function. May be using self executing function is all you will need:
(function placeMarker(location) {
var text = prompt("Комментарий");
var marker = new google.maps.Marker({
position: location,
map: map,
title: text,
icon: {
url: "http://www.suzuki.fr/media/image/interface/map-marker.png",
scaledSize: new google.maps.Size(42, 42)
}
});
}());
Replace your placeMarker() functions with above self executing method. Make sure you pass proper location to the method.
I am trying to replace Google's default icon with the one I am using. However, the default marker is still being shown on the map. As a JavaScript newbie my skills are still dodgy. Could anyone please inspect my code to see what went wrong? Thanks.
var hq_icon = "C:\Users\User.CARRIESHIH-PC\Desktop\Map_dev\hq.png";
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var HQMarker = new google.maps.Marker({
position: FirsteamHQ,
map: map,
icon: hq_icon
});
HQMarker.setMap(map);
You cannot load a local file from an absolute path. Serve the file via HTTP(S) or use a relative path.
[edit]
A complete example:
<!DOCTYPE html>
<html lang = "en">
<head>
<style type="text/css">
html{height: 100%}
body{height: 100%; margin: 0; padding: 0}
#map-canvas{height: 100%}
</style>
<title>GMaps Demo</title>
<script src = "https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize(){
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var hq_icon = "http://i.imgur.com/Na6VUFY.png";
var HQMarker = new google.maps.Marker({
position: new google.maps.LatLng(-34.397, 150.644),
map: map,
icon: hq_icon
});
HQMarker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id = "map-canvas">
</div>
</body>
</html>
You need to provide your script with a relative path to your icon file:
var hq_icon = "relative/path/to/hq.png";
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var HQMarker = new google.maps.Marker({
position: FirsteamHQ,
map: map,
icon: hq_icon
});
HQMarker.setMap(map);
So if for example your above script is in the below structure in map.js and your hq.png image is in images/markers
Project
|
|-- map.js
|
+-- images
|
+-- markers
|
|-- hq.png
Then the relative path would be images/markers/hq.png
I think you are missing the coordinates (position). That should be something like this
position: new google.maps.LatLng(lat, lng)
I would like to ask you a solution for this problem.
I have a JS with a variable inside that is updated overtime by a JAVA application (i.e. JAVA writer into a thread), after that I take the coordinates from that variable and I create a new object Marker for my google maps. The problem is that the marker does not changes position, it changes only if I refresh the whole page (I dont want to do this).
Here's the code to be more clear.
The inputData.js where the variable is written by the java application
var newMarker = {'latitude':38.25705300000004,'longitude': 140.83760400000006};
my html page used to display the map
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MYKEY">
</script>
<script type="text/javascript" src="inputData.js"></script>
<script>
var map;
var sendai = new google.maps.LatLng(38.259535, 140.846816);
var lastPosition;
var image = 'images/circle-16.png';
function initialize() {
var mapOptions = {
zoom: 12,
center: sendai,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
setInterval(refreshData, 2000);
function refreshData() {
var marker = new google.maps.Marker({
map: map,
icon: image,
draggable: false
});
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
If I open my page like this everything work but when I change the script "inputData.js" the marker does not changes position.
The method setCenter on the other hand seems to work properly.
Help me please!
You'll need to reload the updated script to get the updated position:
function initialize() {
var mapOptions = {
zoom: 18,
center: sendai,
mapTypeId: google.maps.MapTypeId.ROADMAP},
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions),
//we will store the LatLng here
pos = new google.maps.MVCObject(),
//use a single marker with updated position
marker = new google.maps.Marker();
//set the latLng of the MVCObject
pos.set('latLng',new google.maps.LatLng(newMarker.latitude,
newMarker.longitude));
//bind the markers position to the latLng of the MVCObject
marker.bindTo('position',pos,'latLng');
marker.setMap(map);
setInterval(function(){
//the currently loaded script
var script=document.querySelector('script[src^="inputData.js"]'),
//the updated script
update=document.createElement('script');
//load-handler for the updated script
google.maps.event.addDomListenerOnce(update,'load',function(){
pos.set('latLng',new google.maps.LatLng(newMarker.latitude,
newMarker.longitude));
map.setCenter(pos.get('latLng'));
map.setZoom(18);
});
//replace current script with updated script
script.parentNode.replaceChild(update,script);
//load update
update.src='inputData.js?'+new Date().getTime();
},2000);
}
You don't need to create new instance of marker every time. Update your code with this and try:
var map;
var sendai = new google.maps.LatLng(38.259535, 140.846816);
var lastPosition;
var image = 'images/circle-16.png';
function initialize() {
var mapOptions = {
zoom: 12,
center: sendai,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
var marker;
marker = new google.maps.Marker({
map: map,
icon: image,
draggable: false
});
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);
setInterval(refreshData, 2000);
function refreshData() {
marker.setPosition(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setCenter(new google.maps.LatLng(newMarker.latitude, newMarker.longitude));
map.setZoom(18);
}
google.maps.event.addDomListener(window, 'load', initialize);
This is my entire code(just a test page). It shows the map but not the marker. How can I make it show the marker?
<!DOCTYPE html>
<html>
<head>
<style>
#map_canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(44.5403, -78.5463),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
The problem with your code is that you haven't defined any variable latLng and you are using it in marker. So obviously your code will not work. First define the latLng and then use.
Define it something like this:
var latLng = new google.maps.LatLng(44.5403, -78.5463);//Your marker coordinates.
and then use it in your code like:
var marker = new google.maps.Marker({
position: latLng,
map: map
});
Demo : http://jsfiddle.net/lotusgodkk/x8dSP/3520/
The map displays 2 markers, one with geolocation coordinates and the other one with some random coordinates. I can't extend the bounds to fit both markers in the map. What's wrong? thank you in advance.
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes">
<meta charset="UTF-8">
<link href="https://google-developers.appspot.com/maps/documentation/javascript/examples/default.css"
rel="stylesheet" type="text/css">
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var geolocation = new google.maps.Marker({position: pos, map: map, title: 'Your geolocation', });
var latitude=47.03249;
var longitude=28.833747;
var pos2=new google.maps.LatLng(latitude,longitude);
var geolocation2 = new google.maps.Marker({position: pos2,map: map,title: 'Your geolocation',});
var pos3=new google.maps.LatLng((position.coords.latitude+latitude)/2,(position.coords.longitude+longitude)/2);
map.setCenter(pos3);
bounds.extend(geolocation.getPosition());
bounds.extend(geolocation2.getPosition());
map.fitBounds(bounds);
},
function() {handleNoGeolocation(true);});
}
else {handleNoGeolocation(false);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style='width:400px; height:400px;'></div>
</body>
</html>
your bounds needs to be a google.maps.LatLngBounds object.
You don't ever construct it.
Add (somewhere before you call extend on it):
var bounds = new google.maps.LatLngBounds();
BTW - you should be getting javascript errors that make this really clear.