Can you please let me know how I can add street view of specific marker location theStore to the map on #street click event?
<button type="button" class="btn btn-default btn-sm" id="street">Strret View</button>
var theStore = {lat: -25.363, lng: 131.044};
var marker = new google.maps.Marker({
position: theStore,
map: map
});
google.maps.event.addDomListener(street, 'click', function () {
//Display Street View of theStore
});
You just have to set the position to the position of the certain marker:
panorama = map.getStreetView();
panorama.setPosition(theStore);
panorama.setVisible(true);
Related
I'm working on a school project where I´m using google maps to make a travel planer. the idea is that the user can drop markers on the map and fill them with text. so far I've managed to load google maps and I can drop markers but I can´t get the infowindows to work. When I looked at googles API it said to make a marker, make an infowindow and the use an addlistener to open the infowindow when the marker is clicked, all the different tutorials also say the same thing but I can´t get it to work. so far my code looks like this:
function initialize()
{
var mapOptions =
{
zoom: 2,
center: {lat: 0.0, lng: 0.0}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'rightclick', function(event) {
var marker = new google.maps.Marker({
position: event.latLng, //map Coordinates where user right clicked
map: map,
draggable:true, //set marker draggable
animation: google.maps.Animation.DROP
});
});
//Content structure of info Window for the Markers
var contentString = $('<div class="marker-info-win">'+
'<div class="marker-inner-win"><span class="info-content">'+
'<h1 class="marker-heading">New Marker</h1>'+
'This is a new marker infoWindow'+
'</span>'+
'</div></div>');
//Create an infoWindow
var infowindow = new google.maps.InfoWindow();
//set the content of infoWindow
infowindow.setContent(contentString);
//add click event listener to marker which will open infoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker); // click on marker opens info window
});
}
can anyone tell me what i´m doing wrong? the entire code can be seen here: http://pastebin.com/R1bg0gi4
as commented by duncan, you must move the code that set's the click-listener of the marker into the rightclick-handler of the map, after the creation of the marker
the content for an Infowindow may be a string or a element-node, you supply none of them(a jQuery-object)
function initialize()
{
var mapOptions =
{
zoom: 2,
center: {lat: 0.0, lng: 0.0}
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions),
//Create an infoWindow
infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(map, 'rightclick', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable:true, //set marker draggable
animation: google.maps.Animation.DROP
});
//Content structure of info Window for the Markers
var contentString = $('<div class="marker-info-win">'+
'<div class="marker-inner-win"><span class="info-content">'+
'<h1 class="marker-heading">New Marker</h1>'+
'This is a new marker infoWindow'+
'</span>'+
'</div></div>')[0];
//set the content of infoWindow
infowindow.setContent(contentString);
//add click event listener to marker which will open infoWindow
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
how do I change the location of a marker based on address input? I know there's google places autocomplete to do the job, but the requirement is to update the map marker after filling in the address form.
JS Fiddle can be found here:
http://jsfiddle.net/fhft7bfg/2/
HTML:
<input id="route" placeholder="Street"></input>
<input id="locality" placeholder="City"></input>
<input id="administrative_area_level_1" placeholder="State"></input>
<input id="postal_code" placeholder="Postal Code"></input>
<input id="country" placeholder="Country"></input>
<div id="map-canvas"></div>
JS:
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
make the map and the marker global
modify the codeAddress function from Google's simple geocoder example to use your form elements and to move the marker if it already exists.
working fiddle
working code snippet:
// modified from https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
var geocoder = new google.maps.Geocoder();
function codeAddress() {
var street = document.getElementById("route").value;
var city = document.getElementById("locality").value;
var state = document.getElementById("administrative_area_level_1").value;
var postcode = document.getElementById("postal_code").value;
var country = document.getElementById("country").value;
var address = street +"," + city + "," + state +"," + postcode + "," + country;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
if (marker && marker.setPosition) {
marker.setPosition(results[0].geometry.location);
} else {
marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
}
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
// global variables
var marker;
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
input{display:block}
#map-canvas{background:#ccc; width:500px; height:300px}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="route" placeholder="Street" value="Beacon St"></input>
<input id="locality" placeholder="City" value="Boston"></input>
<input id="administrative_area_level_1" placeholder="State" value="MA"></input>
<input id="postal_code" placeholder="Postal Code" value="02215"></input>
<input id="country" placeholder="Country" value="US"></input>
<input id="geocode" type="button" onclick="codeAddress();" value="geocode"/>
<div id="map-canvas"></div>
I currently have created markers but I want to be able focus/show the marker's infowindow on click of a separate list of those marker names. How do you accomplish this? I couldn't find anything online.
javascript:
<script type="text/javascript">
var infowindow;
var locations = { 0: { lat: 32.42, long: -99.68, name: 'Taylor Swift', info: '<b>Taylor Swift</b><br/><img src="http://www.8notes.com/images/artists/taylor_swift.jpg" width="50">' },
1: { lat: 35.42, long: -95.68, name: 'Lady Gaga', info: '<b>Lady Gaga</b><br/><img src="http://images2.fanpop.com/images/photos/7500000/L-G-lady-gaga-7557892-500-500.jpg" width="50">' },
2: { lat: 37.78, long: -122.32, name: 'Selena Gomez', info: '<b>Selena Gomez</b><br/><img src="http://videokeman.com/image/pics/SelenaGomezsongPics1YnhHMtsn4mUdCM.jpg" width="50">' }
}
var myLatlng = new google.maps.LatLng(locations[0].lat,locations[0].long);
var myOptions =
{
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_container"), myOptions);
var markerBounds = new google.maps.LatLngBounds();
$.each(locations, function(key, value)
{
var location = new google.maps.LatLng(value.lat,value.long);
var marker = new google.maps.Marker({
position: location,
map: map,
title:value.name
});
markerBounds.extend(location);
map.fitBounds(markerBounds);
attachSecretMessage(marker, value);
});
function attachSecretMessage(marker,value)
{
google.maps.event.addListener(marker, 'click', function()
{
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow(
{ content: value.info,
size: new google.maps.Size(50,50)
});
infowindow.open(map,marker);
});
}
</script>
html body:
<body>
<a id="showTaylorSwiftInfoWindow" href="#">Taylor Swift</a>
<a id="showLadyGagaInfoWindow" href="#">Lady Gaga</a>
<a id="showSelenaGomezInfoWindow" href="#">Selena Gomez</a>
</body>
You would need to hold all your Markers in an Array so you could search through that and find the appropriate Marker. Once you have that you can call the click event handler, or just make the infowindow and open it as you do in the event handler.
But the important part is that you keep your markers in an Array because that is the only way you will be able to reference them again after they have been created.
I have successfully added a custom image for the marker on the google map. The problem is such that the default marker that is balloon still appears along with the new image.
How should remove the default marker and only use the custom image?
The following is the code block that I have used :
var image = "image url";
marker = createMarker(point, address1, town, postcode, SiteName);
marker = new google.maps.Marker({
position: point,
map: map,
icon: image
});
The code for createMarker function is as follows:
function createMarker(point, address1, town, postcode, sitename) {
var html;
var infowindow;
html = '<b>' + sitename + '</b>' + '<br/>' + address1 + '<br/>' + town + '<br/>' + postcode;
var marker = new google.maps.Marker({ position: point, map: map });
google.maps.event.addListener(marker, "mouseover", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: html });
infowindow.open(map, marker);
});
google.maps.event.addListener(marker, "click", function () {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({ content: html });
infowindow.open(map, marker);
});
return marker;
}
Icon property- can be set an image OR vector path:
Example-
marker = new google.maps.Marker({
position: new google.maps.LatLng(-25.363882, 131.044922),
icon: {
path: google.maps.SymbolPath.CIRCLE,
},
or
icon: url of an image,
draggable: true,
map: map,
animation: google.maps.Animation.DROP
});
This icon property will override the default ballon icon
Or if you want to set the icon later in the code- just write- marker.setIcon("your url");
UPDATE: You are actually creating two markers at the same location, one with the custom icon and with default icon.
Here-
marker = createMarker(point, address1, town, postcode, SiteName);`// marker1`
marker = new google.maps.Marker({ `...... //marker 2`
So combine these both-
function createMarker(point, address1, town, postcode, sitename, image) {
//code
var marker = new google.maps.Marker({ position: point, map: map, icon:image });
I have a map I am developing. The basic Google RED DROPLET icon shows up as my marker image. How can I get my own custom image to come up? I have individual images for just about all 50 of my markers (will be company's logo).
Can someone help? Here's the link.
Any help setting custom markers with the code I have presently would be great.
From actual code:
var image = './beachflag.png';
[...]
var marker=new google.maps.Marker({
position: myPosition,
map: map,
icon: image
});
Your code:
var point = new google.maps.LatLng(37.984798,-121.312094);
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>');
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
What you need to do:
var point = new google.maps.LatLng(37.984798,-121.312094);
var image = 'icons/orange_arrow.png'; // this will be gmarkers[0]
var marker = createMarker(point,'<div style="width:205px"><center><img src="images/sampleuopsign.jpg" /></center><h2>University of the Pacific</h2>3601 Pacific Avenue<br>Stockton, California 95211<br>209.946.2011<br><small>On the web visit: <a href="http://www.pacific.edu">www.Pacific.edu<\/a></small><\/div>', image);
And change CreateMarker:
function createMarker(latlng, html, img) {
// Note here the addition of the img parameter
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
***icon: img,***
zIndex: Math.round(latlng.lat()*-100000)<<5
});
[...]
EDIT
A quick test with your code and my mods.
You can select the image and later associated that image with your lat and long, in this case there is one function that creates the marker.
if(location.category=="TEAMNAME"){
var image='img/blueMarker.png';
}
if(location.category=="TEAMNAME2"){
var image='img/redMarker.png';
}
function displayLocation(location){
var content = '<strong><p>Team: ' +location.category + '</strong>';
var latLng = new google.maps.LatLng(parseFloat(location.latitud), parseFloat(location.longitud));
var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true,
visible: true,
title: location.category,
icon: image
});
/*Content window asociated to created markers*/
google.maps.event.addListener(marker, 'click', function(){
infowindow.setContent(content);
infowindow.open(map, marker);
});
return marker;
}