I am building my personal website to showcase my portfolio of coding examples to prospective employers. One very simple project is a way to showcase all my travels. I want a static google maps, with markers on all the places I've visited (Taiwan, Japan, Hawaii, France, bunch of cities in US...etc).
Upon clicking on these markers, I want a popup overlay box to appear on top of the map, covering say 70% of the map, centered, with the outer edges of the map greyed out. Clicking anywhere in the greyed area will close the popup overlay.
These popups will contain a picture of my travels, as well as short quote or blurb or an anecdote.
This sounds simple enough, but I cannot seem to get the popup overlay to behave how I want.
I found plenty of examples on the web as to how to add these markers and have an infoWindow open, but they don't do what I want them to do :
1) the infowindows appear as speech balloons either to the top, left, right, or bottom of the marker
2) this shifts my map
3) I don't know how to grey out my map upon activation of the popup overlay
Can someone point me in the right direction? Should I be using just CSS/Javascript/jQuery to accomplish this? Is there anything I can use from the Google Maps API? I have some basic knowledge of Angular, and would love to get better at it. Is Angular applicable here? Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>My Travels</title>
<style>
html, body, #map-canvas {
height: 375px;
width: 600px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 1, // zoom level
center: new google.maps.LatLng(41,0) //center of map
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var taipeiContent = 'I Love Taipei!';
var parisContent = 'I Love Paris!';
var newyorkContent = 'I Love New York!';
var locations = [
['taipei', 25.0333, 121.6333, taipeiContent],
['paris', 48.8567, 2.3508, parisContent],
['newyork', 40.7127, 74.0059, newyorkContent],
];
//function setMarkers (map, locations) {
var marker, i;
var markers = new Array();
var infoWindow = new google.maps.InfoWindow({
maxWidth:300
});
for ( i=0; i<locations.length;i++ ) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
title: locations[i][0],
});
markers.push(marker);
google.maps.event.addListener(marker,'click',(function(marker, i){
return function() {
infoWindow.setContent(locations[i][3]);
infoWindow.open(map,marker);
map.setCenter(marker.getPosition());
}
})(marker,i));
}
google.maps.event.addListener(map, "click", function() {infoWindow.close();});
//}
}
window.onload = initialize;
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
--Edit-- I know NY appears in Kyrgyzstan, but thats not important right now.
Related
I need to be able to detect when a user clicks in a Google Maps info window to enter Street View. This can happen after the user clicks a marker on a map such as one for a restaurant or whatever. They click on the marker on the map and then an info window comes up in which they can click to enter Street View.
Also, does that open Street View in a new object on top of the map or does it open the Street View within the map object? How is one supposed to handle this non-standard entry into Street View? I note that the user can get back to the map by clicking a right arrow at top left of the street view. I also note that after the user enters Street View this way, that the panorama.getVisible() property is false.
Have you tried the 'visible_changed' event? Here is a sample that works for me using the getVisible().
<!DOCTYPE html>
<html>
<head>
<title>Catch panorama change</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {height: 100%; margin: 0; padding: 0;}
#map {height: 100%;}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
var panorama;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.288, lng: -123.11},
zoom: 17
});
panorama = map.getStreetView();
panorama.addListener('visible_changed', function() {
if (panorama.getVisible()) {
console.log('Entering streetview');
} else {
console.log('Leaving streetview');
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.20&key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
Maybe your project is more complex and needs more adjustment. But otherwise in the new API (ver > 3.22) the infowindow does not include the streetview.
So I have this:
<iframe src="https://mapsengine.google.com/map/embed?mid=zkXLRR9SQKDQ.kfLF9HxBaALo&z=15" width="100%" height="100%"></iframe>
I managed to find the zoom code on here, however I couldn't find a way to remove the grey bar that appears at the top of the map with my google account stuff.
A screenshot can be found here.
Is there a way to remove this using a URL parameter?
I don't think it's possible to remove the bar. Instead you could use the Google Maps Javascript API. It's fairly easy to use and gives you much more control. Here's an example that loads your location with the right zoom level: plnkr.co.
<!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">
</script>
<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(51.4893169, -2.1182648);
var mapOptions = {
center: latLng,
zoom: 15,
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var image = 'http://icons.iconarchive.com/icons/visualpharm/must-have/256/Check-icon.png';
var marker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Documentation for the API.
If you need a specific style for your map, you can use the Styled Maps Wizard.
Depending on where you put your map on your page, it might conflict with scrolling. If that is the case, then set the scrollwheel option to false. That allows you to scroll over the map without it highjacking the scroll event for it's zoom functionality. I've updated the plnkr to use scrollwheel: false.
I have the following code for a map that I'm working on and I'd like to see if I can put custom markers throughout. The problem is that I can't seem to get the first marker to change position no matter if I input latitude and longitude. Perhaps I'm entering the information incorrectly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>UmApp</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=key"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(41.160531, -73.256303);
var mapOptions = {
zoom: 16,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
position: 41.159317, -73.257443,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
try
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.159317, -73.257443);
map: map,
title: 'Hello World!'
});
I still cannot make comments, so I'll answer your comment question here:
As Kostrzak said, you would need to write
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.159317, -73.257443),
map: map,
title: 'Hello World!'
});
(Careful with the semicolon instead of the comma. Although it should work anyway, it may throw a bunch of errors on some IDEs).
The position inside the Marker object is expecting coordinates, but not in any form. It needs to have those coordinates given in a specific way: As a LatLng object. Because of this, you need to set those coordinates using the Google JavaScript library, which creates an object with your specified coordinates:
position: new google.maps.LatLng(41.159317, -73.257443)
Here you have SET the position of the marker. If you want to change it, you just need to set
marker.position = new google.maps.LatLng({newLat}, {newLng});
If you opened the console, you'd see a bunch of errors thrown by the position line: "Uncaught SyntaxError: Unexpected token - ". Console logs are pretty helpful most of the times, so use them!
I am a very new person to the google maps and javascript. What i am trying to achieve is that when i load a google map the user should be able to add a marker/pin on any location he wishes via click. I am able to do this now what i am trying to add is that if a user clicks the pin gets added there should also be a description window which user could add on that pin. Say when i click on a location to add a pin i should also be able to insert some description like "my home" etc.Below is my code so far. Thanks anyways.
<!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">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<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)
};
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>
<div id="map-canvas"></div>
</body>
</html>
You need to add on click listener to your marker to open an info window when you click on your marker.
Create your infowindow after where you created your marker:
var infowindow = new google.maps.InfoWindow({
content : 'Test Content'
});
and after that, add the listener:
google.maps.event.addListener( marker, "click", function() {
infowindow.open( map, marker );
});
So I'm working on a custom google maps tour type application and I'm wondering how to get media to popup when I click a link within a google maps marker. Ideally this is what I would like to happen:
1. User clicks on marker and the normal white box comes up like on real Google Maps.
2. Within that text box I would like to have a button that will launch media that I have stored on a SQL server somewhere. This media could be audio, pictures, or video.
The code I have so far is below. If anyone could let me know how to do this, or point me in the right direction that would be awesome!
Thanks
<!doctype html>
<html>
<head>
<title>HuskyWalk Application Demo</title>
<meta name="viewport" conmtent="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #mapcanvas {
margin: 0;
padding: 0;
height: 98%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var iteCoords = new google.maps.LatLng(41.806501, -72.252769);
//var mapCoords = new google.maps.LatLng(navigator.getCurrentPosition().coords.latitude, navigator.getCurrentPosition().coords.longitude);
//var mapCoords = new navigator.getCurrentPosition().coords;
function initialize() {
//var position = new navigator.geolocation.getCurrentLocation(showPosition);
var mapOptions = {
zoom: 18,
center: iteCoords,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);
google.maps.event.addListenerOnce(map, "bounds_changed", watchStart);
var marker = createMarker(); //creates marker
}
function watchStart() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
alert("Geolocation is not supported by this browser.");
}
}
function createMarker() {
var marker = new google.maps.Marker({
position: iteCoords,
map: map,
title: 'ITEB',
});
google.maps.event.addListener(marker, "click", onMarker_clicked);
return marker;
}
function onMarker_clicked() {
alert(this.get('id'));
}
</script>
</head>
<body onload="initialize()">
<div id="mapcanvas"></div>
<div>
<p>Maps provided by Google Maps</p>
</div>
</body>
</html>
I know there is going to need to be some stuff in the onMarker_Clicked() method most likely, I'm just not sure what.
You'll want to use an InfoWindow and call its open() method from the click event handler.
See also the section in the google maps developer guide https://developers.google.com/maps/documentation/javascript/overlays#InfoWindows