I have made some code to plot basic markers on a google map selectable via a dropdown.
however : I'd like to have two drop downs with the same options in them, and only display the markers selected in the dropdown (i.e. have 100+ markers but only show 2). Id also like to 'draw a line' in-between the two points and have a pop up window (as per google maps does) when hovering over the location. Lastly, can the window resize to the markers?
Here's what I've got so far:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Here you can specify all list of your geolocation options
window.markers = {
'Moscow': {lat: 55.74257, lng: 37.61547},
'Saint Petersburg': {lat: 59.93952, lng: 30.31202}
};
// This is a initialization of map and set of all markers
function initialize() {
var latlng = new google.maps.LatLng(window.markers['Moscow'].lat, window.markers['Moscow'].lng);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for(i in window.markers){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(window.markers[i].lat, window.markers[i].lng),
map: map
});
}
}
// This is a handler for dropdown change
function mychange(element){
var city = new google.maps.LatLng(window.markers[element.value].lat, window.markers[element.value].lng);
map.setCenter(city);
return false;
}
</script>
</head>
<body onload="initialize()">
// This is your dropdown
<select onchange='mychange(this)'>
<option value='Moscow'>Moscow
<option value='Saint Petersburg'>Saint Petersburg
</select>
// This DIV for you map
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Related
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);
}
New to coding so apologies in advance... am looking to add custom icon markers (multiple) to my map, but having trouble displaying even one (the map itself shows fine though).
What's wrong with my code as it stands? (below):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<script src="http://maps.googleapis.com/maps/api/js?key=TEST (I have a valid key here)"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 700px; height: 500px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(53.480782, -2.2445527),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position: {lat: 53.480782, lng: -2.2445527},
title:"TEST",
map: map,
icon: image
});
marker.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
You don't have an initialize function, so your code executes before the DOM is rendered. Look at the javascript console, you will see an error Uncaught TypeError: Cannot read property 'offsetWidth' of null, if you search SO for that you will find that is due to the <div id="map"></div> not being rendered when the map code runs (related question: Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null).
working fiddle
code snippet:
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: new google.maps.LatLng(53.480782, -2.2445527),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position: {
lat: 53.480782,
lng: -2.2445527
},
title: "TEST",
map: map,
icon: image
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
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.
I am traveling globally and need to insert a Google map on my web page that shows my current position (not the position of the reader) so that others can see where I am.
Does anyone have a straightforward solution to do this. I know how to use My Places to create maps and insert in my pages, but have avoided having to get involved in using the Maps API so far. I have some knowledge of HTML and Javascript, but it is minimal so would rather avoid this if I can.
Does anyone have a solution to this?
Further to my answer over at your other question you may find bits of this example useful: - hypoCampus
The little blue man/person/icon follows your location. If you scroll the maps away you can then press the static blue map-control man to re-center on your location. When you're moving (throttled location update is changing) the icon is walking otherwise it is standing.
(There's a bug with Manifest - "display" : "standalone" at the mo Chrome bug)
Hopefully Firebase have committed to bypassing the speed-humps of W3C/IETF and will give us ServiceWorker Background Geolocation tracking very soon.
you must tell to map your current location. for that you must get your location Latitude and Longitude for show that by maps.
get that by :
http://maps.googleapis.com/maps/api/geocode/xml?address=+" + MapAddress + "&sensor=false
try this html code in your page. str_lat and str_lng are your location :
<head>
<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=YOUR_API_KEY&sensor=false>
</script>
<script type='text/javascript'>
function initialize() {
var myLatlng = new google.maps.LatLng(str_lat,str_lng);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:'Location!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id='map-canvas'/>
</body>
</html>;
See Here https://developers.google.com/maps/documentation/javascript/tutorial
and see this code for judging your skills don't worry about new terms they are explained in the link above
<!DOCTYPE html>
<html>
<head>
<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=API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
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);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
I have a simple Google Map that fill the whole page.
Here is a sample:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Marker Animations</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var stockholm = new google.maps.LatLng(59.32522, 18.07002);
var map;
function initialize() {
var mapOptions = {
zoom: 0,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: stockholm
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
google.maps.event.addListener(map, 'idle', function() {
var b = map.getBounds();
document.getElementById("bounds").innerText = b.getSouthWest().lng() + ", " + b.getNorthEast().lng();
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 100%; height: 100%;">map div</div>
<div id="bounds" style="left: 100px; top: 0px; width: 300px; height: 30px; position: absolute; background-color: #a0a0a0;"></div>
</body>
</html>
At MINIMUM zoom level, when you can see several world maps, I expect longitude bounds to be -180 - 180, but in real I don't get it. Is my expectation wrong and why?
In real application I have a server-side code that fetches markers from database depending on current map bounds.
The bounds will report the lat and lng at the bounds of the window - even if the map has wrapped a few times. So what ever the lat,lng of the bottom right of your window will be one point, and the upper left will be the other.
I had this same issue and what I ended up doing was creating a World bounds that was 90, 180 to -90, -180 and then seeing if that fit in the window.
var ne = new google.maps.LatLng(90, 180);
var sw = new google.maps.LatLng(-90, -180)
var world = new google.maps.LatLngBounds(ne, sw);
var fetchbounds;
if(map.getBounds().contains(ne) && map.getBounds().contains(sw)){
fetchBounds = world;
}else{
fetchBounds = map.getBounds();
}