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
Related
I am following the the steps given in this link
https://developers.google.com/maps/documentation/javascript/tutorial
I am getting error after load can you tell me where I wrong ? I already generate key ?
fiddle
http://jsfiddle.net/p3kcztvb/1/
<!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=AIzaSyATC35pv00Ga3hRxP4t5W7NtM9as48PGVQs">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
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"/>
</body>
</html>
Following error explain itself.
"provided key is not a valid Google API Key,"
Generate correct key
To create your API key:
Visit the APIs Console at https://code.google.com/apis/console and log in with your Google Account.
Click the Services link from the left-hand menu.
Activate the Google Maps JavaScript API v3 service.
Click the API Access link from the left-hand menu. Your API key is available from the API Access page, in the Simple API Access section. Maps API applications use the Key for browser apps.
here
Markup Code as follow:-
// Adds a marker with popup window information
var marker1Latlng = new google.maps.LatLng(35.65654,-106);
var contentString1 = 'I love New Mexico! More about the Land of Enchantment';
var infowindow = new google.maps.InfoWindow({
content: contentString1
});
var marker1 = new google.maps.Marker({
position: marker1Latlng,
map: map,
title: 'New Mexico'
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map,marker1);
});
//End of Add Marker code
Hi Kanika in Fiddle it seems like the API key you are using is not a valid key. You might need to regenerate the API key for Google Maps API Engine from your Google Console.
Change this code lines - basically you don't need a api key in here
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyATC35pv00Ga3hRxP4t5W7NtM9as48PGVQs">
</script>
Replace with
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp">
</script>
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.
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 );
});
ALL
i wanna developing window contains map and allow user to mark his location and get longitude and latitude based on the marked location
any one has a suggestion ?
you can use google map v3 for this purpose..
Try this code, it creates a marker where the user clicks on the map
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</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),
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>
<div id="map-canvas"></div>
</body>
</html>
you will be requried to use maps click event to get lat/lag.
check below code for same.
GEvent.addListener(map, "click", function(overlay, latLng)
{
// display the lat/lng in your form's lat/lng fields
document.getElementById("latFld").value = latLng.lat();
document.getElementById("lngFld").value = latLng.lng();
//code for adding marker
//post/ajax call to save location in Database
});
I'm experimenting with QtWebkit and Google Maps. The problem I've run into is calling C++ slots from the QWebView.
The page displayed in the QWebView is a modified Google Maps example:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Event Simple</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript">
function initialize() {
var myOptions = {
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'),
myOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'test'
});
google.maps.event.addListener(marker, 'click', function() {
//if (map.getZoom() == 8) {
// map.setZoom(4);
// } else {
// map.setZoom(8);
// }
window.maiWi.showList();
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
maiWi is the QMainWindow object which contains the slot showList() I want to call and which has been added to the Javascript window object.
If I add another element to the web page with the attribute onclick="maiWi.showList()", then the slot gets called and everything is well. However, I want to call the slot when the Maps marker gets clicked. The marker, however doesn't seem to respond to click events in QWebView. Even the commented-out example code doesn't work.
In Chrome, the event listener gets called and does what it's supposed to, but in QWebView nothing happens.
It turns out that I should turn off optimized rendering for map markers. When adding optimized:false to the marker declaration, then things start to work:
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
optimized: false,
title: 'test'
});