I am trying to confirm if one can place image in a google map street view and get a response when clicked
Searched a lot, also at https://developers.google.com/maps/documentation/javascript/streetview
but couldn't find anything
if it's possible than can anyone post an instruction.
You can try using a custom Marker with a custom image:
var testMarker = new google.maps.Marker({
position: {lat: 40.729681, lng: -73.991138},
map: map,
icon: 'https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Test'
});
testMarker.addListener('click', function() {
console.log("test");
});
Hope this helps!
Related
I'm using the gmaps4rails gem, and having a hard time getting custom icons or tooltips to work with GMaps Markers. Here is the code I'm using:
handler = Gmaps.build('Google');
handler.buildMap({ internal: {id: 'geolocation'} }, function(){
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(displayOnMap);
});
function displayOnMap(position){
var marker = handler.addMarker(
{
lat: position.coords.latitude,
lng: position.coords.longitude,
infowindow: "This is your current location",
title:'Your current location'
},
{
opacity: 0.6,
animation: google.maps.Animation.DROP,
cursor: "crosshair",
icon: {URL: "/images/icons/mapmarkers/blue_MarkerA.png"}
});
handler.map.centerOn(marker);
Basically I'm trying to use a blue marker for the customer's current location and show some tooltips. "opacity", "animation", and "cursor" all work fine, but neither "icon" or "title" attributes work.
Any help is highly appreciated. Thanks.
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'schools_maps.png'
});
You need to define icon base first and reference it when you are defining your marker class.
When using the following code to add a Marker to an on page Google Map
var myMarker4 = new google.maps.Marker({ position: new google.maps.LatLng(53.53, -2.5), map: map, icon: '/_Content/images/light-pink-marker-map.png' });
Is there a way (call back?) for me to detect when the user has hovered over the marker so I can do something on the current page?
I have several markers, so I would need someway to uniquely identify each.
Isn't this what you're looking for?
var myMarker4 = new google.maps.Marker({ position: new google.maps.LatLng(53.53, -2.5), map: map, icon: '/_Content/images/light-pink-marker-map.png' });
google.maps.event.addListener(myMarker4, 'mouseover', function() {
doSomething...
});
By the way, here's the full list of events that a marker can handle:
'click'
'dblclick'
'mouseup'
'mousedown'
'mouseover'
'mouseout'
I am trying to use create markers using the google maps api to draw a route on an embeded open cycle map.
here is the progress:
http://embed.plnkr.co/yq9NudcYyTfCnVqe6MH0/index.html
I cannot seem to get the markers down.
something like this:
var myLatLng = new.google.maps.LatLong(50.4261, -3.8401);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
as per
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Any ideas??
Found an excellent solution: http://www.mapsmarker.com/docs/how-to-install-the-plugin/
Great plugin and easy to construct, basically saved me a day of coding.
The Google map on my site no longer shows up. I can see the zoom in/out slider, map/satellite buttons, etc... but the map itself no longer shows up. I read somewhere that the map should be in a div tag labeled "map" with both height and width stated in the CSS. The map has always had height/width CSS properties listed, but the ID was labeled differently. I changed the ID to map and corresponding CSS, but the map still will not show up. I read elsewhere that the Google Analytics by Yoast plugin was also causing similar errors. I have disabled all plugins and then one at a time I have reactivated them to see if another plugin might be the issue. However, it seems that none of the plugins running have any effect on the map displaying.
I am a web designer with some HTML/CSS knowledge. I designed this site and had hired a guy to code it into a custom Wordpress theme for me. Like I said, the map had been showing just fine, but no longer does and I have no idea why. I could really use some help to figure this out. I'm trying to learn more about coding so in the future I can debug and fix things like this on my own. A little help would be greatly appreciated!
Here is a link to the page with the map: http://seegerlaw.com/contact-us/
Please let me know if you need any other information from me.
You're using undocumented fields:
function initialize() {
geocoder = new google.maps.Geocoder();
codeAddr(function(lat, lng) {
myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
zoom: 15,
center: myLatlng,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
});
}
function codeAddr(callback) {
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry);
maps_lat = results[0].geometry.location["kb"];
maps_lng = results[0].geometry.location["lb"];
callback(maps_lat, maps_lng);
}
else {
console.log("Geocoding failed: " + status);
}
});
}
}
Use the lat() and lng() properties of LatLng to get their values.
Even better, just pass in the LatLng directly from the Geocoder to the MapOptions object:
codeAddr(function(latLng) {
var mapOptions = {
center: latLng,
...
};
...
});
callback(results[0].geometry.location);
Even better – it appears that you always geocode the same address – just hardcode the LatLng into your code.
I am putting together a clients contact us page and I need to have two Google maps on it.
The first map is a small version of the second. The second map opens up in a lightbox activated by a link beneath the first.
The issue is, the large map goes wrong when I attempt to open it. I typically get one tile in the top left hand corner and nothing more.
You can see for yourself at http://test2omniforce.co.uk/node/8. It's some kind of conflict between the two because if I remove the small map, the larger map works fine.
I am trying to determine why this happens, and how I can fix it.
OS: Here's my code for the large map (the small map code is exactly the same except instead of map_canvas, it uses map_canvas2).
var myLatlng = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
var myOptions = {
zoom: 15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel:false
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'we are right here ...'
});
var myLatlng2 = new google.maps.LatLng(53.3820845337596, -1.46965489864111);
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
Inspired by #rggardner's suggestion, I made the small map a static map. I had no idea those existed before.
That removes the conflict and the large map now plays nice.
#rggardner, thank you very much!