We Keep Coding

display a shop's marker which is already on google

okay, there is a shop on the map. and I am trying to display that shop's marker on my map. I am a bit confused about passing the marker's location.
this is the location that I got from marker on google map.
https://www.google.com/maps/place/Starbucks/#34.6748217,135.4293592,12z/data=!3m1!5s0x6000e693a22a809f:0xa230d50a2bd936b4!4m8!1m2!2m1!1sstarbucks!3m4!1s0x0:0xe83a23a6e585f341!8m2!3d34.7037647!4d135.499835
and at the line here: /Starbucks/#34.6748217,135.4293592 I took the geo and put it my location. But I am not sure is it the right way to do it? Because I don't want to create new marker. I want to put a marker which is ALREADY on google map.
this is simple map:
function initMap() {
var starbucks = {lat: 34.6748217, lng: 135.4293592};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: starbucks
});
var marker = new google.maps.Marker({
position: starbucks,
map: map,
// title: 'starbucks'
});
}

This will just put a marker on your map. If that's all you need, you might consider using the Google Maps Embed API instead which can generate a link directly to the place you mentioned by using its place ID and can be easily embedded on any webpage.
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJYaAqopPmAGARQfOF5aYjOug&key=AIzaSyA-n9P6rX_0r8ySKnttYTVLAdh3SMcJaKE" allowfullscreen></iframe>
You need to generate and use your own API key (replace the one in the above code) and enable the Maps Embed API in the console.

Google Maps API marker move on scroll and layout style

I'm new in the Google Maps API, I am trying to embed a marker with the address on google maps but I have errors.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map
I'm using this documentation and I have copied this code but it doesn't work properly because when you scroll the marker it's not fixed in the map but its move and doesn't stay in the correct place.
Also, the buttons in the left corner MAP and SATELLITE doesn't appear properly, they appear with a background line in the whole map and don't together smaller.
Finally, the + and - button doesn't appear.
Someone could tell me why I have all this problem?
Here is my code:
<script>
function initMap() {
var blitz8 = {lat: 45.806510, lng: 10.109520};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: blitz8
});
var marker = new google.maps.Marker({
position: blitz8,
map: map
});
};
</script>
And here the Live Page:
https://sebalaini.github.io/Blitz8/

Hi I resolve that problem by disabled some css option in your base.scss please check and fix that, check my picture uploaded below

InfoWindow doesn't open correctly with link when marker is outside view on Google Maps V3

I made a map with markers clustered on Google Maps. The makers have a listener that set the zoom, then center the map and then open a infowindow.
In a for loop I made a list with links to every marker that looks like this
' + item.nombre + '
If I click a marker on the map there is no problem: the map is centered and the infowindow is showed.
The problem is if I press a link form the list: if the maker is not showing on the map the infowindow is open incorrectly (in a wrong position and overlapping an icon) and the map is not centered (the map doesn't even show the correct place of the marker).
Strangely, if I zoom out the map at a point that the real position of the marker is showed the InfoWindow is set correctly on the correct marker and there is no problem if I press the same link again, just like in the second image.
Here is the jsfiddle, the error could be reproduced if I click on Playa Maqui Lodge and then on any other link using Firefox 43
So, what am I missing? Why the map is not centering on the link?

The marker isn't added to the map until it is "unclustered", zoom to it then "click" on it. The zoom must be higher than the maxZoom of the markerClusterer.
Either set the markerClusterer maxZoom to 15 or change your code to zoom in closer to the marker.
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
map.setZoom(21);
map.setCenter(this.getPosition());
infowindow.setContent(this.html);
infowindow.open(map, this);
});
proof of concept fiddle
Looks like there is an issue with the computation of the anchor using a custom infowindow (which I didn't see before as you didn't provide your custom marker). It works if you don't use the InfoWindow.open(map, anchor) syntax and set the pixelOffset and position of the InfoWindow manually.
var infowindow = new google.maps.InfoWindow({pixelOffset:new google.maps.Size(0,-35)});
google.maps.event.addListener(marker, 'click', function() {
infowindow.close();
map.setZoom(16);
map.setCenter(this.getPosition());
infowindow.setContent(this.html);
infowindow.setPosition(this.getPosition());
infowindow.open(map);
});
updated proof of concept fiddle (with custom marker)

Change icon in Google Fusion Table API using Google Maps API when zoom in/out

I'm using Google Fusion Table API and Google Maps API. I have my maP thanks to Google Maps API, then I create a layer using Google Fusion Table API, works great.
When I create the layer I define that the markes should be "small_red" (the small red dots), thants works great too.
var layer = new google.maps.FusionTablesLayer({query: {select: 'coordenadas', from: '1-zmpFV_oI7OBiq3iEyHyze7QBiBDZzdrxby_TYM', where: 'hide!=0'},map: map, suppressInfoWindows: true, styles: [{ markerOptions: {iconName: "small_red" }}]});
Now, as you can see below, I want to change the icon to "large_red" (the Google Maps normal one) when the user zoom in, and back to "small_red" (again, the red dots) when the user zoom put.
google.maps.event.addListener(map, 'zoom_changed', function() {
if(map.getZoom()>14){
//Change icon to large_red
} else {
//Back to small_red
}
});
This last code recognize the zoom in or out event, then I have an if clause to verify if the zoom goes up or down, and then, the problem, I don't know how to change the icons from the markers on the layer over the map.
Thanks in advance for any help.

I found the solution, simple:
google.maps.event.addListener(map, 'zoom_changed', function() {
if(map.getZoom()>14){
layer.setOptions({styles: [{markerOptions:{ iconName:"large_red"}},]});
} else {
layer.setOptions({styles: [{markerOptions:{ iconName:"small_red"}},]});
}
});

How can I draw range of delivery on Google Map?

I know how to add the Google Map on my restaurant's webpage, but how can I have range of delivery (semi-transparent polygon)?
Here is an example: link
Maybe it can be done by somehow put a semi-transparent image on Google Map? But how can this be done?

The polygon is the way to go, with a "event.latLng" click listener to help plot your region
See here:
http://jsfiddle.net/MFfTc/2/
Clicking on the map will define the polygon vertices, then you can copy that to your real map. Remove the last comma and add a bracket ].

You could draw a polygon with google earth and then save it to a KML file and load it on google maps api v3
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
kml_layer = new google.maps.KmlLayer('http://code.google.com/apis/kml/documentation/KML_Samples.kml');
kml_layer.setMap(map);

In the Google Maps API, you can create a Polygon overlay. You need to know the coordinates of each vertex. If you don't, you could use the Google Maps API Drawing Tools to figure it out.

I found this link that allows you to place moveable markers on Google Maps and paste html code into your site: http://www.nirmalpatel.com/ourarea/