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
Related
I use jquery.ui.map to load markers on google map, and this is part of my code:
var ip = new google.maps.LatLng(lat, longt);
var mapOptions = {
zoom: 4,
center: ip,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$('#map_canvas').gmap(mapOptions);
var marker = $('#map_canvas').gmap('addMarker', {
'position': ip,
'bounds': true,
'title':'Your location'
});
While the map is loading I can see the markers, but when everything are loaded the markers disappear and no marker is shown on the map, while we have them, if you take a look at this screen shot you will see that we have the marker (because we can see the marker title when we hover on it) but we cannot see it...
Screen shot: http://s15.postimg.org/5zlsbxwhn/scmap.jpg
The Demo page: http://bev.dev.beardo.co/encontre/
You have to use marker.setMap(map)
I have a nice example on github
Hello: I'm making progress on my Google Map (see my previous post: KML markers missing on Google Maps API v3: What's wrong?), but I'm now stuck, and hoping for help.
My custom-styled map pulls from a KML file with about 20 Placemarks.
For design reasons, I want my Placemarks to open on the RIGHT side of the anchor, rather than the default top/center. I've tried searching in vain for a simple way to do this; closest I've come is: Issue with infowindows remaining active when another KML layer is selected - Google Maps API V3, which I can't make work for me.
Here is an example of what I'm looking for: http://nationaltreasures.aircanada.com/ (its InfoWindows open to right).
I think I need to supress the default InfoWindow, create my own that pulls the KML data, and then specify a pixelOffset to my custom InfoWindow, but I can't figure out how to do it.
Thank you in advance!
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Thanks to #SeanKendle for pointing me in the right direction. Found more or less what I wanted by adding this into my original code.
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
showInContentWindow(kmlEvent.latLng, kmlEvent.featureData.description);
});
function showInContentWindow(position, text) {
var content = "<div>" + text + "</div>";
var infowindow = new google.maps.InfoWindow({
content: content,
position: position,
pixelOffset: new google.maps.Size(300, 0),
})
infowindow.open(map);
}
antyrat posted about this with an infoWindow to the right of the marker here:
Googlemap custom infowindow
See the link in the accepted answer.
EDIT: Here's an example. Obviously you will want to include InfoBox.js on your page to get access to that plugin. I hope this works, I didn't test it, but it might point you in the right direction:
function initialize() {
var styles = [ ]; // Styles removed to simplify code
var styledMap = new google.maps.StyledMapType(styles,
{name: "HEPAC"});
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(46.69504, -67.69751),
panControl: false,
mapTypeControl: false,
streetViewControl: false,
noClear: true,
zoomControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
mapTypeControlOptions: {
mapTypeIds: ['map_style', google.maps.MapTypeId.ROADMAP]
}
};
google.maps.visualRefresh = true;
var map = new google.maps.Map(document.getElementById("map-canvas"),mapOptions);
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
var opt = { minZoom: 7, maxZoom: 9 }; // Sets minimum & maximum zoom level
map.setOptions(opt);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://hepac.ca/wp-content/mapping/wellnessnetworksl.kml?f=3',
preserveViewport: true,
});
ctaLayer.setMap(map);
google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description; // ALTER THIS TO POINT TO THE DATA YOU WANT IN THE INFOBOX
var infoBox = new InfoBox({content: text, latlng: kmlEvent.position, map: map});
});
}
Google Maps API says:
Additionally, a click on a KML feature generates a KmlMouseEvent,
which passes the following information:
position indicates the latitude/longitude coordinates at which to anchor the InfoWindow for this KML feature. This position is generally
the clicked location for polygons, polylines, and GroundOverlays, but
the true origin for markers.
pixelOffset indicates the offset from the above position to anchor the InfoWindow "tail." For polygonal objects, this offset is typically
0,0 but for markers includes the height of the marker.
featureData contains a JSON structure of KmlFeatureData.
See this page for more info: KML Feature Details
I am using this piece of code within a Bootstrap template. I am facing issues when loading images within a Bootstrap Tab content pane.
This is the JavaScript code which I use to initialize the Map:
var latlng = new google.maps.LatLng(50, 50);
var myOptions = {
zoom: _zoom,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: 'Google Office!'
});
I have not found any method(s) on the internet to manually reload a Google Map instance.
Is this possible and how? Thanks!
Yes, you can 'refresh' a Google Map like this:
google.maps.event.trigger(map, 'resize');
This basically sends a signal to your map to redraw it.
You can refresh with this:
map.panBy(0, 0);
map.setZoom(map.getZoom());
For some reasons, resize trigger did not work for me, and this one worked.
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'm using the Google Map V3 Javascrpt API to embed a Google Map. When a user goes into street view on the embedded map how do you move the rotation controls to the right side. I've tried setting up these options when creating the map:
rotateControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
}
However, when in street view the rotate controls remain on the left? Is there a way to position the rotate controls when in street view to the right side?
Yes, you can place the controls in other positions, but the solution is a little tricky.
You can set the streetView controls position in a StreetViewPanoramaOptions. The problem is that you can pass the options object to the StreetViewPanorama object only in its constructor. Therefore you have to create a default StreetViewPanorama object, that is not visible (otherwise the streetview panorama would be loaded instead of the map). The StreetViewPanoramaOptions would be:
var streetViewOptions = {
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
visible: false
};
Create the StreetViewPanorama in the same div as the map:
var street = new google.maps.StreetViewPanorama(document.getElementById('map_canvas'), streetViewOptions);
Add streetView option to the map options:
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetView: street
}
Create the map:
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);