How to open an info window with split screen google map and street view? - google-maps-markers

So I have a functioning code (example here) to create a split screen of half google map Hybrid view and then when you click somewhere on that map (left side) then (right side) opens street view for that location.
I want to have a marker on the hybrid map side that when clicked on opens an info window on that side and then the street view for that location on the right side of the screen. But I can't seem to figure out how to code in that marker to open as an info window/bubble on the left side map?
Here's the code currently (including the mistake I've made as it doesn't work):
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var myCenter = new google.maps.LatLng(42.315126 , -72.63455);
var DoYouFeel = new google.maps.LatLng(42.315148 , -72.634429)
var sv = new google.maps.StreetViewService();
var panorama;
function initialize() {
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map
var mapOptions = {
center: myCenter,
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
//Set up the markers
var marker = new google.maps.Marker({
position: DoYouFeel,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function() {
bubble = new google.maps.InfoWindow({
content: '<div id="mydiv"><br><embed src="Do You Feel....mov" width="720" height="576" align="center"><br><br></div>'
})
bubble.open(map, marker);
});
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
google.maps.event.addListener(map, 'click', function(event) {
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(data, status) {
if (status == google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
google.maps.event.addListener(marker, 'click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
alert('Street View data not found for this location.');
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Related

Implementation Google Maps Polyline and marker together

Hello I have a code where I can see on a map latitude and longitude markers, that code I did following this tutorial I would like to know how to make each marker is linked with a Polyline
This is what I have
This is what I want
Next I leave my code
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(-16.342024,-71.540503),
zoom: 4.0
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl('../controlador/test1.xml', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marcadores');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('movil');
var hora = markerElem.getAttribute('hora');
var bateria = markerElem.getAttribute('bateria');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label,
animation: google.maps.Animation.DROP
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "MOVIL: "+type
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "HORA: "+hora
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('br');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
var text = document.createElement('text');
text.textContent = "BATERIA: "+bateria+"%"
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=myapikey&callback=initMap">
</script>
(At top of the code below is the XML file from which the markers are created. Copy the XML data into file and name test1.xml)
Any idea how? Thanks.
You can start off by following the examples in this Polyline doc, you can draw a line on your map connecting different locations.
Here's a sample in JSFiddle that you can check, which shows 3 locations connected by a polyline.
var flightPlanCoordinates = markerPoints; //the coordinates of your markers
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates, //set the path of the polyline to the marker positions
geodesic: true, //for the polyline to follow the curvature of the earth
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
icons: [
{icon: lineSymbol, offset: '25%'},
{icon: lineSymbol, offset: '50%'},
{icon: lineSymbol, offset: '75%'},
{icon: lineSymbol, offset: '100%'},
]
});
Please see full code in the sample fiddle. Hope it helps!

Java--how to create multiple animated geodesic lines with google maps

--I'm brand new to coding, but slowly working my way through fiddles. Your patience is appreciated!--
I'm working on creating a visual representation of the diaspora of a small village in Ukraine. I have so far found a fiddle that does what I need, up to a point. I'm having trouble with the following bits though:
I have no issue with a single var departure --> var arrival line animating, as per the original fiddle, but I can't quite find resources on how to add another line (whether same var departure or different).
I would also like to add multiple points along the same itinerary. Everything I've found uses a list of LatLng coordinates but I can't get that to animate.
Any help would be greatly appreciated! Thanks!
http://jsfiddle.net/bz4b9jkg/6/
var map;
$(document).ready(function () {
var latlng = new google.maps.LatLng(41.142556, -42.219561);
var myOptions = {
zoom: 2,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map($('#map_canvas').get(0), myOptions);
var departure = new google.maps.LatLng(49.461686, 23.174658); //Set to whatever lat/lng you need for your departure location
var arrival = new google.maps.LatLng(40.6983279,-74.0433196); //Set to whatever lat/lng you need for your arrival location
var line = new google.maps.Polyline({
path: [departure, departure],
strokeColor: "#FF0000",
strokeOpacity: 0.7,
strokeWeight: 2,
geodesic: true, //set to false if you want straight line instead of arc
map: map,
});
var step = 0;
var numSteps = 250; //Change this to set animation resolution
var timePerStep = 5; //Change this to alter animation speed
var interval = setInterval(function() {
step += 1;
if (step > numSteps) {
clearInterval(interval);
} else {
var are_we_there_yet = google.maps.geometry.spherical.interpolate(departure, arrival, step / numSteps);
line.setPath([departure, are_we_there_yet]);
}
}, timePerStep);
line.setMap(map);
});
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
body{padding-top:25px;}
#map_canvas {
width: 100%;
height: 400px;
}
<script src="http://maps.google.com/maps/api/js?sensor=false&dummy=.js"></script>
<div class="container">
<div class="well">
<div id="map_canvas"></div>
</div>
</div>

google maps api v3 draw polyline between draggable markers

I have multiple markers on google map v3. When map gets loaded it draws all marker and polyline. Initial path of the polyline would be same LatLng of each marker. When you drag marker it should draw the line between original LatLng to new position of the marker. You can move all and/or any markers on the map and each marker should have separate line showing marker's original LatLng to new position. I have done similar thing in below code but the problem is when I move marker it looses previous line of the marker. It always shows only one line of the dragged marker. How to solve this problem. Thanks in advance... Ash
<!DOCTYPE html>
<html>
<head>
<title>Marker with line example two</title>
<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?sensor=false"></script>
<script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script>
var line;
var myLatlng = new google.maps.LatLng(41.7833, 5.2167);
var marker;
var lines = [];
function initialize() {
var domain = [new google.maps.LatLng(11.2583, 75.1374)];
var markers = [];
var mapOptions = {
zoom: 2,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
opacity: 0.2,
disableDefaultUI: true,
draggable: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var lineCoordinates = [
new google.maps.LatLng(53.215556, 56.949219),
new google.maps.LatLng(75.797201, 125.003906),
new google.maps.LatLng(37.7833, 144.9667),
new google.maps.LatLng(-24.797201, 26.003906),
new google.maps.LatLng(27.797201, -101.003906)
];
for (i = 0; i < lineCoordinates.length; i++) {
var latLng = lineCoordinates[i],
marker = new google.maps.Marker({
position: latLng,
draggable: true,
title: i.toString(),
map: map,
});
markers.push({
key: i.toString(),
latLng: latLng
});
line = new google.maps.Polyline({
path: [latLng, latLng],
strokeOpacity: 0.8,
strokeWeight: 2,
strokeColor: '#f00',
geodesic: true
});
line.setMap(map);
lines.push(line);
google.maps.event.addListener(marker, 'drag', function (event) {
var title = this.title,
result = $.grep(markers, function (e) { return e.key === title }),
oldLatLng = result[0].latLng,
newLatLng = new google.maps.LatLng(this.getPosition().lat(), this.getPosition().lng());
line.setPath([oldLatLng, newLatLng]);
});
} //end of for loop
} //end of initialize function
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 1000px; height: 675px; margin-left: 400px; margin-top: 38px;"></div>
</body>
</html>
You were almost there. You have to make closure for variable line for event listener:
(function(line) {
google.maps.event.addListener(marker, 'drag', function (event) {
var title = this.title,
result = $.grep(markers, function (e) { return e.key === title }),
oldLatLng = result[0].latLng,
newLatLng = new google.maps.LatLng(this.getPosition().lat(), this.getPosition().lng());
line.setPath([oldLatLng, newLatLng]);
});
})(line);

Remove image on click from canvas

OK so ive been playing with this code for a bit, it basicly adds multiple images from DOM to canvas by dragging. But i cant seem to remove the image properly from the canvas on click/ tap event listener.
window.onload = function(){
var stage = new Kinetic.Stage({
container : "cantainer",
width : 475,
height : 150
});
var layer = new Kinetic.Layer();
stage.add(layer);
var con = stage.getContainer();
var dragSrcEl = null;
//image
document.getElementById("yoda").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("woman").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("nature").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("srce").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("game").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("dog").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
document.getElementById("house").addEventListener('dragstart',function(e){
dragSrcEl = this;
});
con.addEventListener('dragover',function(e){
e.preventDefault(); //#important
});
//insert image to stage
con.addEventListener('drop',function(e){
var image = new Kinetic.Image({
x: 30,
y: 20,
draggable : true
});
layer.add(image);
imageObj = new Image();
imageObj.src = dragSrcEl.src;
imageObj.onload = function(){
image.setImage(imageObj)
layer.draw()
};
});
}
You can add a click listener on each of your image objects and remove any image that's clicked.
image.on("click",function(){
this.remove(); // or this.destroy();
layer.draw();
});

Google maps api V3 - Adding multiple markers dynamically from query results

I'm trying to set up a map on a page with a couple of links set up underneath that when clicked, will dynamically query my database and the result set output on the map. I've spent quite a lot of time googling this but can't find quite what I'm looking for. I've got as far as using AJAX to return the lat and lon coordinates OK, but I'm going wrong when trying to create markers on the map, nothing appears though I don't generate any errors.
Code not tested, but you can do something like this
Declare map, markers
var map;
var markersArray = [];
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Below function would add a point to map
function plotPoint(srcLat,srcLon,title,popUpContent,markerIcon)
{
var myLatlng = new google.maps.LatLng(srcLat, srcLon);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:title,
icon: markerIcon
});
markersArray.push(marker);
var infowindow = new google.maps.InfoWindow({
content: popUpContent
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
Fetch your points and add them like
var lat = 44.856051;
var lng = -93.242539;
plotPoint(lat,lng,'Mall of America','<span class="gBubble"><b>Mall of America</b><br>60 East Brodway<br>Bloomington, MN 55425</span>');
You have this for creating new markers:
var marker = new google.maps.Marker({
position: results.DATA[i][2],
map: map,
title:"New marker"
});
marker.setMap(map);
The value of results.DATA[i][2] is like "54.016893,-0.970721". But the position has to be a LatLng object:
// turn "54.016893,-0.970721" into [54.016893,-0.970721"]
var latLng = results.DATA[i][2].split(",");
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latLng[0], latLng[1]),
map: map,
title:"New marker"
});
PS: Also if you specify the map in the markerOptions, you don't need to also then call the setMap() function.

Resources