I am attempting to write some code to display google maps in satellite view inside of JQuery Mobile/HTML. So far to no success, seems all the example code is out of date or not functioning. What i'm looking for is displaying a google map satellite image, getting two X/Y coordinates from code (these will actually be coming from a MySQL database query), and placing a marker on the map at that location. The code I have is below. When I run the full website code I can navigate to the maps page and see the header and back button but the map is not displaying.
Note this is called when a button is pressed on the main page.
HTML:
<div data-role="page" id="map-page" data-url="map-page" data-add-back-btn="true">
<div data-role="header" data-theme="a">
<h1>Maps</h1>
</div>
<div role="main" class="ui-content" id="map-canvas">
<!-- map loads here... -->
</div>
</div>
JavaScript:
$( document ).on( "pageinit", "#map-page", function() {
var defaultLatLng = new google.maps.LatLng(33.061414, -83.226385); // Default to Lockerly Arb when no geolocation support
if ( navigator.geolocation )
{
function success(pos)
{
// Location found, show map with these coordinates
drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
}
function fail(error)
{
drawMap(defaultLatLng); // Failed to find location, show default map
}
// Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
}
else
{
drawMap(defaultLatLng); //No geolocation support, show default map
}
function drawMap(latlng)
{
var myOptions =
{
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
// Add an overlay to the map of current lat/lng
var marker = new google.maps.Marker(
{
position: latlng,
map: map,
title: "Lockerly Arboretum!"
});
}
});
CSS:
`//Google Maps CSS
#map-page, #map-canvas
{
width: 100%; height: 100%; padding: 0;
}`
Related
I wanna know locations (Latitude and Longitude) of google street view images around a specific location. How do i do ? (google maps api, javascript, URL)
Check this link out for geo locationshould send you in the right direction. It works on the persons IP address, so if their IP is masked or re-routed, you will not get ACCURATE longitude and latitude, but the location of their ISP
From the documentation (emphasis mine):
Directly Accessing Street View Data
You may wish to programmatically determine the availability of Street View data, or return information about particular panoramas, without requiring direct manipulation of a map/panorama. You may do so using the StreetViewService object, which provides an interface to the data stored in Google's Street View service.
You may initiate two types of requests to the StreetViewService:
<snip>
Request with a StreetViewLocationRequest this searches for panorama data over a given area, given a passed LatLng.
code snippet (copied from this example in the documentation, click on the map to return the nearest StreetView panorama)
/*
* Click the map to set a new location for the Street View camera.
*/
var map;
var panorama;
function initMap() {
var berkeley = {
lat: 37.869085,
lng: -122.254775
};
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map.
map = new google.maps.Map(document.getElementById('map'), {
center: berkeley,
zoom: 16,
streetViewControl: false
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({
location: berkeley,
radius: 50
}, processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
map.addListener('click', function(event) {
sv.getPanorama({
location: event.latLng,
radius: 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);
marker.addListener('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 {
console.error('Street View data not found for this location.');
}
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I'm working on a project which displays a bunch of markers on Google Maps and allows the user to search and get relevant information about the locations. I haven't disabled Street View, as I'd like to give the user the possibility to see the building from the outside.
For certain locations, however, when going into Street View mode, Google Maps immediately shows the indoor of an adjacent business. What I'd like to have is the ability to completely disable indoor view on my application.
Is anyone aware of a certain setting in the Google Maps API that would do that or perhaps a clever hack to solve the issue? I haven't honestly found anything.
In the experimental version (currently v=3.21) there is now a StreetViewSource that can be provided in a StreetViewLocationRequest
StreetViewSource class
google.maps.StreetViewSource class
Identifiers to limit Street View searches to selected sources.
Constant
DEFAULT Uses the default sources of Street View, searches will not be limited to specific sources.
OUTDOOR Limits Street View searches to outdoor collections only.
example of request without source: google.maps.StreetViewSource.OUTDOOR (fiddle)
example of request with source: google.maps.StreetViewSource.OUTDOOR (fiddle)
code snippet (with source: OUTDOOR):
/*
* Click the map to set a new location for the Street View camera.
*/
var map;
var panorama;
function initMap() {
var myLatlng = new google.maps.LatLng(51.343364, 12.378962999999999);
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map.
map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 16,
streetViewControl: false
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({
location: myLatlng,
radius: 50,
source: google.maps.StreetViewSource.OUTDOOR
}, processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
map.addListener('click', function(event) {
sv.getPanorama({
location: event.latLng,
radius: 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);
marker.addListener('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 {
console.error('Street View data not found for this location.');
}
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
I'm making a web application that uses google maps to help with solar deployment. In essence, I'm loading a google map in full screen and overlaying KML layers using this code:
window.solarLayer = new google.maps.KmlLayer({
url: 'somelink'
});
window.solarLayer.setMap(window.map);
Another feature of this application is that a user is able to click anywhere in the map, and using the latitude and logitude at the click point, it would return solar data to the user.
This all works fine by using a click event handler as such:
google.maps.event.addListener(map, 'click', function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
console.log( latitude + ', ' + longitude );
});
However, the portion of the map that has the KML layer only registers clicks for the layer and does not access the click event I created...
Does anyone know how to disable click events for KML layers? or how to make my event listener supersede that of the KML layer?
I have tried getting the lat and long by using a click event on the KML layer as well as the map but that only yields a static lat long of where that layer is positioned, not where the user actually clicks.
Thanks for any help in advance!
Set the clickable option of the KmlLayer to false.
from the KmlLayerOptions documentation:
clickable| Type: boolean
If true, the layer receives mouse events. Default value is true.
code snippet:
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
window.solarLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
clickable: false
});
window.solarLayer.setMap(window.map);
google.maps.event.addListener(map, 'click', function(event) {
var latitude = event.latLng.lat();
var longitude = event.latLng.lng();
document.getElementById('coords').innerHTML = event.latLng.toUrlValue(6);
console.log(latitude + ', ' + longitude);
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="coords"></div>
<div id="map_canvas"></div>
Im creating a mobile app with Phonegap, Backbone.js, Require.js and PageSlider (https://github.com/ccoenraets/PageSlider).
I want to display a simple Google Map with a marker. The template looks like:
<div class='main-content' id='map-container'>
<a href="geo:51.903679,-8.468274">
<div id="map-canvas"></div>
</a>
</div>
Here is the view:
define(function (require) {
"use strict";
var $ = require('jquery'),
_ = require('underscore'),
Backbone = require('backbone'),
tpl = require('text!tpl/Map.html'),
side_nav = require('text!tpl/SideNav.html'),
template = _.template(tpl),
map, myLatlng, mapOptions, marker;
return Backbone.View.extend({
initialize: function () {
this.render();
},
initMap: function () {
myLatlng = new google.maps.LatLng(51.903679, -8.468274);
mapOptions = {
center: myLatlng,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(this.$el.find('#map-canvas')[0],
mapOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Christians Brothers College Cork'
});
},
render: function () {
this.$el.html(template({side_nav:side_nav}));
this.initMap();
},
});
});
Here is a link to the app. When you click on "location", the map renders perfectly. But when you navigate anywhere else, then back to location, only a tiny portion of the map can be seen in the top left hand corner.
I tried doing, which was suggested here:
google.maps.event.trigger(map, 'resize').
but to no avail. Any ideas?
Your view works on a node not appended to the DOM, thus without size, a situation Google Map is not very fond of. It is your router, via PageSlider, that does append the node after your render function has occurred.
Here is a demo of your predicament : http://jsfiddle.net/3C7g3/
You have several options to solve it:
call google.maps.event.trigger(map, 'resize') after the node is inserted into the DOM (this bit of code corresponds to your router entry for the map)
// assuming you stored the map object in your view
require(["app/views/Map"], function (Map) {
var view = new Map();
slider.slidePage(view.$el);
google.maps.event.trigger(view.map, 'resize');
});
http://jsfiddle.net/3C7g3/1/
insert the node into DOM before calling render. In your case, that probably means removing render from the view.initialize and calling view.render after container.append(page); in your slidePageFrom method.
http://jsfiddle.net/3C7g3/2/
a more hackish way would be to temporarily add the element to the DOM, apply Google Maps, and then remove it from the DOM
initMap: function () {
// assuming a temp class that hides the element. For example,
// .temp {position: absolute; visibility:hidden; }
this.$el.addClass('temp');
$('body').append(this.$el);
// ...
this.$el.remove();
this.$el.removeClass('temp');
}
http://jsfiddle.net/3C7g3/3/
I'm new to google maps and want to use google map javascript API to display houses as markers. I want a person to be able to click on the map to place a marker, which can be clicked again to be removed or dragged to another location on the map. Then, I want the script to get the cordinates(lat and long) so that I can ad it to a database table. Any idea how I should do this? I'm using PHP in codeIgniter.
A good place to start would be to check out the reference manual: http://code.google.com/apis/maps/documentation/javascript/reference.html
If you look at map there you can see that it has an event called "click". What you do is after your map has been initialized you make an eventlistener, that listens to the click event. When that occurs you then place a marker on that location, and add an eventlistener on that marker for the click event if you want to remove it, or make it draggable if you want to drag it.
Remember to store your markers in an array if you ever want to use the information they are holding again.
I hope this helped.
I am late to the party. Please find below code snipet.
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var marker;
map.addListener('click', function(e) {
if(marker){
var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
marker.setPosition(latlng);
}else{
marker = new google.maps.Marker({
position: {lat : e.latLng.lat(), lng : e.latLng.lng()},
map: map
})
}
alert("lat : "+e.latLng.lat()+ "; lng : "+e.latLng.lng())
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPpCPQOwkMotaDj0IgHQ7HDAE8cz6-4U&callback=initMap"
async defer></script>