I was just playing around trying to do something with Google maps api in html however I ran into an issue. I am currently trying to place markers at specific positions, specifically customized markers that show as images not the regular markers however I can not figure out the code to do so. Currently this is an example of what I have attempted doing:
<html>
<head>
<title>Advanced map</title>
<script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script>
function init() {
blatlng = new google.maps.LatLng(41.275890,-73.874195);
myOptions = {
zoom: 5,
center: blatlng,
mapTypeId: google.maps.MapTypeId.Map };
map = new google.maps.Map(document.getElementById("italy"), myOptions);
blatlng1 = new google.maps.LatLng(-6.155889,106.640180);
myOptions1 = {
zoom: 4,
center: blatlng1,
mapTypeId: google.maps.MapTypeId.Map };
map = new google.maps.Map(document.getElementById("home"), myOptions1);
var marker = new google.maps.Marker({
position: blatlng,
icon: "jess1.jpg"
});
marker.setMap(map);
}
</script>
</head>
<body onLoad="init();">
<div id="italy" style="width:500px; height:300px"></div>
home
<div id="home" style="width:500px; height:300px"></div>
</body> </html>
This is the specific section where I am trying to place the custom marker however this also only calls the initial coordinates if it did work I just want to be able to place an image marker anywhere on either map:
var marker = new google.maps.Marker({
position: blatlng,
icon: "jess1.jpg"
});
marker.setMap(map);
}
Related
I have written an HTML that, using Google Maps API, shows the aircraf's landing point when I land in Flight Simulator.
What I would achieve is to rotate the map considering the aircraft's course.
The below HTML initially seems to run fine, but in one second the map go back to northern orientation.
How could I solve the issue? What I'm doing wrong.
Thanks and kind regards
Joe
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" >
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXX&sensor=true&libraries=weather">
</script>
<script type="text/javascript">
google.maps.visualRefresh = true;
function initialize() {
var image = {
url: "pubicons3/89.png", // url
scaledSize: new google.maps.Size(80, 80), // scaled size
// origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(40, 40) // anchor
};
var myctr = new google.maps.LatLng(45.8278829742545,13.4600065786118);
var mapOptions = {
zoom:18,
disableDefaultUI: true,
mapTypeControl: false,
scaleControl: true,
center: myctr,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading:89,
tilt:15
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var airloc = {lat:45.8278829742545, lng:13.4600065786118};
var marker = new google.maps.Marker({
position:airloc,
map:map,
icon:image,
ZIndex:4
});
// flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
You can use the Maps JavaScript API WebGL Features' Tilt and Rotation where you can set tilt and rotation (heading) on the vector map by including the heading and tilt properties when initializing the map, and by calling the setTilt and setHeading methods on the map. Note that n order to use the new WebGL features, you need a map ID that uses the vector map. You'll also need to update your API bootstrap request. Please see this.
Here's a sample code that shows what you want to achieve and code snippets below:
function initMap() {
var airloc = {
lat: 45.8278829742545,
lng: 13.4600065786118
};
const map = new google.maps.Map(document.getElementById("map"), {
center: airloc,
zoom: 16,
heading: 89,
tilt: 15,
mapId: "90f87356969d889c",
mapTypeId: 'satellite',
});
var image = {
url: "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png", // url
scaledSize: new google.maps.Size(80, 80), // scaled size
// origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(40, 40) // anchor
};
var marker = new google.maps.Marker({
position: airloc,
map: map,
icon: image,
ZIndex: 4
});
}
I have been using the Google Developers Tutorial on how to add a map to my website:
https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map#the_finished_code
I cannot seem to find a way to add a pin to the map, I have used the "centre" function so that the map is centred on the lat and long of the pin, but the pin itself is not visible.
Any way to create a pin at that lat and long?
Just need to instantiate a marker Object and place it at the coordinates:
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var myLatLng = {lat: 44.5403, lng: -78.5463};
var mapOptions = {
center: new google.maps.LatLng(myLatLng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Fiddle
Try the following:
replace center with location
before:
center: new google.maps.LatLng(myLatLng),
after:
location: new google.maps.LatLng(myLatLng),
That should do the trick (should add the Pin automatically).
I have already pointed my office location in google map.
Also I created API key.
Now i using embeded code to show google map location in my contact page.
I want to replace the same with AP key.
How to show my office location using Google Maps JavaScript API v3.
Following is my test.html page for checking the map. Which parts need to modify to show my location ?
You can see my location in below url
google(dot)com/maps?ll=9.965156,76.290034&z=14&t=m&hl=en-US&gl=US&mapclient=embed&cid=9383043750302267720
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my key already added here">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -9.959238, lng: 76.275271},
zoom: 8
};
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>
Sounds like you want to add a marker
Code below is for your initialize function based on the docs but w/ your Lat,Lon and zoom level.
var myLatlng = new google.maps.LatLng(9.965156,76.290034);
var mapOptions = {
zoom: 8,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World"
});
The marker's title (i.e. "Hello World" in the example above) will appear as a tooltip. If you don't want a tooltip, you can remove that line.
The title says the question. Now, is it good to use a counter that starts from zero and when it is 1 or more I wouldn't add a marker. Or should I try to make it such that when someone clicks on the map the old marker disappears and the new one is assigned? The following code is what I have so far.. Thanks for any kind of help.
Also, how can I access the longitude and latitude in the next page?
And about capturing the map into a blob, is it a different topic or it is also related?
Thanks
<!DOCTYPE html>
<html>
<head>
<title>Accessing arguments in UI events</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<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>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(e) {
placeMarker(e.latLng, map);
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize();">
<div id="map-canvas"></div>
</body>
</html>
I would say its up to you and your application later how you handle the markers.
You can implement a counter, create a dragable marker, depends how the app will work later on.
How will your next page look like?
One simple way could be something like this:
I use addListenerOnce to call the placeMarker function only one time and during this i write the latitude and longitude in a form field.
now you can add action parameters plus a submit button and you can access the values on your next page.
Thats the fiddle + code:
http://jsfiddle.net/iambnz/LcKy2/
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListenerOnce(map, 'click', function(e) {
placeMarker(e.latLng, map);
// alert(e.latLng.toString());
document.getElementById("latitude").value = e.latLng.lat();
document.getElementById("longitude").value = e.latLng.lng();
});
}
function placeMarker(position, map) {
var marker = new google.maps.Marker({
position: position,
map: map
});
map.panTo(position);
}
google.maps.event.addDomListener(window, 'load', initialize);
I've been looking through the google api and I've been having trouble finding info on how you would make marker navigation. For example http://maps.google.com/maps/ms?msid=214364913744716823698.00046c8f8a60625db2c21&msa=0&ll=48.068903,-91.109619&spn=0.537763,0.883026
I've made this map with three markers, I'd like to embed this into mysite and then have three links that match up with the markers, and when you click the link it pans the map to that maker. Is it possible to do this using a saved google map?
Here is a complete example. Basically, the map.setCenter command will allow you to move from one point to another
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div>
Point A
Point B
Point C
</div>
<div id="map" style="width: 640px; height: 480px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(40.00, -104.00),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var a = new google.maps.LatLng(40.00, -104.00);
var b = new google.maps.LatLng(41.00, -105.00);
var c = new google.maps.LatLng(39.00, -103.00);
new google.maps.Marker({
position: a,
map: map
});
new google.maps.Marker({
position: b,
map: map
});
new google.maps.Marker({
position: c,
map: map
});
</script>
</body>
</html>