On a website I am building I have a google map as a background of a contact form. It looks nice, but I would like to convert the google map into the google street view to get a nice picture of the building so they know exactly where they are going.
I have been trying to follow the google site to convert my code over to the street view version, but I seem to be missing something and can't quite figure out what.
Some help would be gratefully appreciated. I've never done a street view map before.
The code I have currently looks like this
var mapOptions = {
zoom: 20,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map( document.getElementById( 'map-canvas' ), mapOptions );
var beachMarker = new google.maps.Marker({
position: new google.maps.LatLng(pos_a1, pos_b1), //my position I have stored as variables to make it cleaner
map: map,
});
and I have tried
var mapOptions = {
zoom: 1,
center: map_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.StreetViewPanorama( document.getElementById( 'map-canvas' ), mapOptions );
myPano.setVisible(true);
var beachMarker = new google.maps.Marker({
position: new google.maps.LatLng(pos_a1, pos_b1),
map: map,
});
but the map just disappears.
A StreetViewPanorama expects a position-parameter instead of center.
Furthermore you use 2 different variables(map and myPano)
This would work(when there is a panorama available for the given position):
var panoOptions = {
position: map_center,
scrollwheel: false
}
var myPano = new google.maps
.StreetViewPanorama( document.getElementById( 'map-canvas' ),
panoOptions );
Related
I am creating a backbone view where I want to show a map using the Javascript api for Google Maps.
In my html file I have this:
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY"></script>
<div id="map" style="width: 550px; height: 300px; float:left"></div>
And in the backbone view I have the following:
var MapView = Backbone.View.extend({
el: $('#map'),
initialize: function() {
var defaultSettings = { date:'01/12/2016', time: '10:00',
lat:'40.72815832561118', lng: '-73.99564975565187' };
var myLatLng = new google.maps.LatLng(defaultSettings.lat, defaultSettings.lng);
var sv = new google.maps.StreetViewService();
var mapOptions = {
center: myLatLng,
zoom: 16,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: "Current Position"
});
}
});
When I try and load the map, I actually get it on the exact position I want, however the icons for zoom and marker are not showing.
If i wait for a long time, the zoom icons show up however the marker never appears. What could be the problem?
I am trying to zoom out of the google map,this is what happens:
How can I stop this kind of behaviour from occuring?
Include the minZoom property in your map options:
...
var mapOptions = {
minZoom: 2
}
map = new google.maps.Map( document.getElementById( 'map-canvas' ), mapOptions );
...
This will limit the amount that user will be able to zoom out, which will prevent the map from repeating.
More info: https://developers.google.com/maps/documentation/javascript/reference
Set maxZoom property for map .
var mapOptions = {
zoom: 11,
center: tokyo,
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListener(map, 'click', showMaxZoom);
Look at here : https://developers.google.com/maps/documentation/javascript/maxzoom
Trying to create a PhoneGap mobile app. Totally new to mobile apps, phonegap, and JS so bear with me. This is where I'm at:
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.710,-73.994), //New york, NY
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions)
};
With that, the map renders in the browser just fine. When adding the following that I've found in a number of tutorials it refuses to render anything. I am trying to do all of this in the googlemap/index.html page that I have created.
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.710,-73.994), //New york, NY
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var LatLng = new google.maps.LatLng(40.710,-73.994)
var marker = new.google.maps.Marker({
position: myLatLng,
title: "hello world!"
});
marker.setMap(map);
};
When I add the following, the entire page refuses to render.
Basically, I'm using the above method to display a google map, and I'm trying to add a pin to the center location. Seems simple enough but proving to be beyond my abilities.
You have a syntax error on this line:
var marker = new.google.maps.Marker({
Notice that there is a dot between the new operator and the class name.
To fix, replace the line above with:
var marker = new google.maps.Marker({
Happy mapping!
PS: The error was reported in the (desktop) browser's console, I'm not sure how you'd see the same on an Android device.
I have a problem with google maps. When i firstly embeeded iframe to my page on ipad i saw buttons like streetview under the map. When i switched maps to be generated from system data, and rendering using javascript api buttons are gone?
Is there a way to show them again, is it just an options that needs to be added to map or buttons only work when using iframe?
var map;
var service;
var infowindow;
function initializeMap() {
var slocation = new google.maps.LatLng(x,y);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15
});
var infowindow = new google.maps.InfoWindow({
content: 'example content'
});
var marker = new google.maps.Marker({
position: slocation,
map: map,
title: ' example title'
});
infowindow.open(map, marker);
}
the buttons that i want to achive are http://imageshack.us/photo/my-images/43/buttonsuv.png/
In your code, add this option streetViewControl: true
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: slocation,
zoom: 15,
streetViewControl: true
});
Have a look at this, it summarises all of the street view options.
UPDATE
After the question update, I realise you want your custom image on the street view icon.
That's not possible.
One workaround is to define a custom control on the map, and link events to it with the streetview events.
I've never done it, however you might want to have a look at this
The code in example 1 works. I would like to understand the marker.setIcon(); function more (new to JavaScript also).
My question is. In the documentation for Google maps you see something like this for changing the marker.
MarkerImage(url:string, size?:Size, origin?:Point, anchor?:Point, scaledSize?:Size)
How does this relate to what I have done in example 1 for setting up marker Icon, shoud I have done somethign like this instead?
marker = google.maps.MarkerImage({
url: "newIcon.png"
});
marker.setIcon(marker);
and would that have worked?
here is my example
Example 1
function initialize(){
//MAP
var latlng = new google.maps.LatLng('xxx','xxx');
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
map = new google.maps.Map(document.getElementById("map_canvas"), options);
//GEOCODER
geocoder = new google.maps.Geocoder();
marker = new google.maps.Marker({
map: map,
draggable: true
});
marker.setPosition(latlng);
marker.setIcon("newIcon.png");
map.setCenter(latlng);
}
You're giving a V2 answer for a V3 question.
There is no GIcon in V3.
var image = new google.maps.MarkerImage("newIcon.png");
Can be used inside your marker as the icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat,lng),
icon:image
});