How do I add a overlay with gmap3? - google-maps

First I init gmap3 with this code.
var center = [48.8620722, 2.352047];
$('.map').gmap3({
center: center,
zoom: 17,
mapTypeId : google.maps.MapTypeId.ROADMAP
});
That works great. Then I try to add a overlay when I click a button but nothing happens.
$('.map').gmap3({
action: 'addOverlay',
content: '<div style="color:#000000; border:1px solid #FF0000; background-color: #00FF00; width:200px; line-height:20px; height: 20px; text-align:center">Hello World !</div>',
latLng: [48.8620722, 2.352047],
offset: {
y: -32,
x: 12
}
});
Can someone please tell me what the problem is?


I guess you're mixing something up. I'm not familiar with gmap3 plugin, but after a look into the api documentation, it seems that gmap3 doesn't offer action as an option. It offers only googleMaps native options.
It would be also helpful, if you could make a jsbin code-example for your problem.

Related

How to get rid of small circle graphic appearing at center of HTML-coded text in a customized Google Map?

I'm an HTML novice, but here goes...
When zoomed way in, this is what I see at the center of various text line insertions:
You can see this live here: https://becketbroadband.org/fsa-map%2Fstatus
The apparently-responsible code looks like this:
addOverlay(Map, FSA05_Border, '49d834', 0.3, 'FSA-05', { lat: 42.305200, lng: -73.058500}, 'Service Available Now');
Ideas? Thanks!

I see this in the code for addOverlay, at fsa-map/status on your site:
new google.maps.Marker({
position: labelPoint,
map: BecketMap,
icon: {
path: google.maps.SymbolPath.CIRCLE, // anything, required
fillOpacity: 0, // hide the symbol leaving just the label
},
label: {
text: FSAlabel,
color: '#000000', // black
fontSize: '20px',
fontWeight: 'bold',
},
});
What happens if you don't supply an icon property at all?

The guy who wrote the original code came up with the answer. (He didn't have any ideas till I pointed out the icon property details addressed in this thread.)
The "fillOpacity" value addresses the inside of the circle. This new line of code addresses and hides the circle itself:
"strokeOpacity: 0,"
Thank you, AakashM, for getting me on the path to a solution! :) You da man!

How to create custom marker for google map

I need to create a custom marker for Google Map that i am using for my website. I don't want to use an image or polygons for marker, but code the marker in html and add it on the map. Please suggest possible ways to implement it.

Go to this demo-purpose website: http://easysublease.org/mapcoverjs/
It shows how one developer can just write HTML template and CSS, then specify JavaScript Event handlers to create fully customized, Fully HTML specified markers on map.
If you need more, you can go to its Github see readme.md:
https://github.com/bovetliu/mapcover
-------detailed way explaining how it works--------------
First. to be prepared, you need one HTML block to specify how you markers would be like,
such as: (which is an Underscore template, you can choose whatever template, or if you don't need any dynamic thing in your marker, just supply pure HTML, but still needs turn it into compiled template function)
<div class="mc-static2mapcanvas customized-marker">
<div class="content"><%= displayedText %></div>
<div class="text-center remove-background">
<span aria-hidden="true" class="glyphicon glyphicon-triangle-bottom">
</span>
</div>
</div>
Then you need CSS/Less to style it, right? just like styling one common dom on page:
.customized-marker{
background-color: rgba(0, 255, 255, 0);
.content{
background-color: #FF5A5F;
color: #fff;
padding:0px 5px;
font-size: 14px;
}
.remove-background{
padding: 0px;
margin: 0px;
margin-top: -4px;
color:#FF5A5F;
background-color: rgba(255, 255, 255, 0);
}
}
.customized-marker.customized-marker-hover{
.content{
background-color: #252525;
}
.remove-background{
color:#252525;
}
}
Then you can import Mapcover.js and its dependencies to your page containing map.
Please refer the index.html shown at its Github.
Before creating your custom marker, you need one object specify where is the marker, and its event handlers, possibly, like this:
var custom_marker_option = {
anchor: null,
datacontent:{"displayedText":"This Marker1"},
latLng: new google.maps.LatLng(-34.397, 150.644),
map: mapcover.model.get("map"),
mouseover:function(container_node){
console.log("marker heard mouseover");
// console.log(event.latLng);
// console.log(container_node);
var dom = container_node.childNodes[0];
dom.classList.add("customized-marker-hover");
},
mouseout:function(container_node){
console.log("marker heard mouseout");
// console.log(event.latLng);
// console.log(container_node);
var dom = container_node.childNodes[0];
dom.classList.remove("customized-marker-hover");
},
click:function(container_node){
console.log("you clicked me");
}
};
Then you initiate one Class inheriting "CustomMarker" Class provided by mapcover.js like this:
mapcover.initCustomMarker( "CustomMarker1" , _.template( $('#customMarkerTemplate').html() ));
Please be aware of that, $('#customMarkerTemplate').html() is given at beginning of this answer.
and _.template is just one template function provided by Underscore.js. You can choose whatever template compiling function you like.
Now comes the final exciting marker creating
var temp_marker_controller = mapcover.addCustomMarker("CustomMarker1" ,custom_marker_option );
Now, you have created one customized marker specified by HTML template and CSS, and you have also added event handlers to it!

You will need to use a custom Overlay object.
Over here is good tutorial that show how it can be done.

Disable mouse scroll wheel zoom on embedded Google Maps

I am working on a WordPress site where the authors usually embed Google Maps using iFrames in most posts.
Is there a way to disable the zoom via mouse scroll wheel on all of them using Javascript?

I was having the same problem: when scrolling the page then the pointer becomes over the map, it starts to zoom in/out the map instead of continuing scrolling the page. :(
So I solved this putting a div with an .overlay exactly before each gmap iframe insertion, see:
<html>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="640" height="480"></iframe>
</html>
In my CSS i created the class:
.overlay {
background:transparent;
position:relative;
width:640px;
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}
The div will cover the map, preventing pointer events from getting to it. But if you click on the div, it becomes transparent to pointer events, activating the map again!
I hope get helped you :)

I tried the first answer in this discussion and it wasn't working for me no matter what I did so I came up with my own solution:
Wrap the iframe with a class (.maps in this example) and ideally embedresponsively code: http://embedresponsively.com/ — Change the CSS of the iframe to pointer-events: none and then using jQuery's click function to the parent element you can change the iframes css to pointer-events:auto
HTML
<div class='embed-container maps'>
<iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>
CSS
.maps iframe{
pointer-events: none;
}
jQuery
$('.maps').click(function () {
$('.maps iframe').css("pointer-events", "auto");
});
$( ".maps" ).mouseleave(function() {
$('.maps iframe').css("pointer-events", "none");
});
I'm sure there's a JavaScript only way of doing this, if someone wants to add to this feel free.
The JavaScript way to reactivate the pointer-events is pretty simple. Just give an Id to the iFrame (i.e. "iframe"), then apply an onclick event to the cointainer div:
onclick="document.getElementById('iframe').style.pointerEvents= 'auto'"
<div class="maps" onclick="document.getElementById('iframe').style.pointerEvents= 'auto'">
<iframe id="iframe" src="" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

I extended #nathanielperales solution.
Below the behavior description:
click the map to enable scroll
when mouse leaves the map, disable scroll
Below the javascript code:
// Disable scroll zooming and bind back the click event
var onMapMouseleaveHandler = function (event) {
var that = $(this);
that.on('click', onMapClickHandler);
that.off('mouseleave', onMapMouseleaveHandler);
that.find('iframe').css("pointer-events", "none");
}
var onMapClickHandler = function (event) {
var that = $(this);
// Disable the click handler until the user leaves the map area
that.off('click', onMapClickHandler);
// Enable scrolling zoom
that.find('iframe').css("pointer-events", "auto");
// Handle the mouse leave event
that.on('mouseleave', onMapMouseleaveHandler);
}
// Enable map zooming with mouse scroll when the user clicks the map
$('.maps.embed-container').on('click', onMapClickHandler);
And here is an jsFiddle example.

I'm re-editing the code written by #nathanielperales it really worked for me. Simple and easy to catch but its work only once. So I added mouseleave() on JavaScript. Idea adapted from #Bogdan And now its perfect. Try this. Credits goes to #nathanielperales and #Bogdan. I just combined both idea's. Thank you guys. I hope this will help others also...
HTML
<div class='embed-container maps'>
<iframe width='600' height='450' frameborder='0' src='http://foo.com'> </iframe>
</div>
CSS
.maps iframe{
pointer-events: none;
}
jQuery
$('.maps').click(function () {
$('.maps iframe').css("pointer-events", "auto");
});
$( ".maps" ).mouseleave(function() {
$('.maps iframe').css("pointer-events", "none");
});
Improvise - Adapt - Overcome
And here is an jsFiddle example.

Yes its quite easy. I faced a similar problem. Just add the css property "pointer-events" to the iframe div and set it to 'none'.
Example:<
iframe style="pointer-events:none" src= ........ >
SideNote: This fix would disable all other mouse events on the map. It worked for me since we didnt require any user interaction on the map.

var mapOptions = {
scrollwheel: false,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

After doing some research you have 2 options. Since new maps api with iframe embed does not seem to support disabling of mousewheel.
First would be using old google maps ( https://support.google.com/maps/answer/3045828?hl=en ).
Second would be creating a javascript function to simplify embeding of a map for each comment and using parameters (it's sample code only to point location not show exact solution)
function createMap(containerid, parameters) {
var mymap = document.getElementById(containerid),
map_options = {
zoom: 13,
scrollwheel: false,
/* rest of options */
},
map = new google.maps.Map(mymap, map_options);
/* 'rest of code' to take parameters into account */
}

There is an awesome and easy solution.
You need to add a custom class in your css that sets the pointer events to map canvas to none:
.scrolloff{
pointer-events: none;
}
Then, with jQuery, you can add and remove that class based on different events, for example:
$( document ).ready(function() {
// you want to enable the pointer events only on click;
$('#map_canvas').addClass('scrolloff'); // set the pointer events to none on doc ready
$('#canvas').on('click', function() {
$('#map_canvas').removeClass('scrolloff'); // set the pointer events true on click
});
// you want to disable pointer events when the mouse leave the canvas area;
$( "#map_canvas" ).mouseleave(function() {
$('#map_canvas').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
});
});
I have created an example in jsfiddle, hope that helps!

I just register one account on developers.google.com and get a token for call a Maps API, and just disable that like this (scrollwheel: false):
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('container_google_maps'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
scrollwheel: false
});
}

Here is a simple solution. Just set the pointer-events: none CSS to the <iframe> to disable mouse scroll.
<div id="gmap-holder">
<iframe width="100%" height="400" frameborder="0" style="border:0; pointer-events:none"
src="https://www.google.com/maps/embed/v1/place?q=XXX&key=YYY"></iframe>
</div>
If you want the mouse scroll to be activated when the user clicks into the map, then use the following JS code. It will also disable the mouse scroll again, when the mouse moves out of the map.
$(function() {
$('#gmap-holder').click(function(e) {
$(this).find('iframe').css('pointer-events', 'all');
}).mouseleave(function(e) {
$(this).find('iframe').css('pointer-events', 'none');
});
})

This is my approach. I find it easy to implement on various websites and use it all the time
CSS and JavaScript:
<style type="text/css">
.scrolloff iframe {
pointer-events: none ;
}
</style>
<script type="text/javascript">
function scrollOn() {
$('#map').removeClass('scrolloff'); // set the pointer events true on click
}
function scrollOff() {
$('#map').addClass('scrolloff');
}
</script>
In the HTML, you will want to wrap the iframe in a div.
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" >
function scrollOn() {
$('#map').removeClass('scrolloff'); // set the pointer events true on click
}
function scrollOff() {
$('#map').addClass('scrolloff'); // set the pointer events true on click
}
.scrolloff iframe {
pointer-events: none ;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map" class="scrolloff" onclick="scrollOn()" onmouseleave="scrollOff()" ><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23845.03946309692!2d-70.0451736316453!3d41.66373705082399!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89fb159980380d21%3A0x78c040f807017e30!2sChatham+Tides!5e0!3m2!1sen!2sus!4v1452964723177" width="100%" height="450" frameborder="0" style="border:0" allowfullscreen></iframe></div>
Hope this helps anyone looking for a simple solution.

To disable mouse scroll wheel zoom on embedded Google Maps, you just need to set the css property pointer-events of the iframe to none:
<style>
#googlemap iframe {
pointer-events:none;
}
</style>
Thats All.. Pretty neat huh?
<div id="googlemap">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3648.6714814904954!2d90.40069809681577!3d23.865796688563787!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c425897f1f09%3A0x2bdfa71343f07395!2sArcadia+Green+Point%2C+Rd+No.+16%2C+Dhaka+1230%2C+Bangladesh!5e0!3m2!1sen!2sin!4v1442184916780" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Well, for me the best solution was to simply use like this:
HTML:
<div id="google-maps">
<iframe frameborder="0" height="450" src="***embed-map***" width="100"</iframe>
</div>
CSS:
#google-maps iframe { pointer-events:none; }
JS:
<script>
$(function() {
$('#google-maps').click(function(e) {
$(this).find('iframe').css('pointer-events', 'auto');
}).mouseleave(function(e) {
$(this).find('iframe').css('pointer-events', 'none');
});
})
</script>
RESULT
Considerations:
The best would be to add an overlay with a darker transparency with a text: "Click to browse" when mouse wheel is deactivated
But when it is activated (after you click on it) then the transparency with text would disappear and the user could browse the map as expected.
Any clues how to do that?

Add style pointer-events:none; this working fine
<iframe style="pointer-events:none;" src=""></iframe>

The simplest way to do it is by using a pseudo-element like :before or :after.
This method will not require any additional html elements or jquery.
If we have for instance this html structure:
<div class="map_wraper">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d405689.7826944034!2d-122.04109805!3d37.40280355!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb68ad0cfc739%3A0x7eb356b66bd4b50e!2sSilicon+Valley%2C+CA!5e0!3m2!1sen!2sro!4v1438864791455" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
Then all we need to do is make the wrapper relative to the pseudo-element we will create to prevent the scrolling
.map_wraper{
position:relative;
}
After this we will create the pseudo-element that will be positioned over the map therefor preventing the scrolling:
.map_wraper:after{
background: none;
content: " ";
display: inline-block;
font-size: 0;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9;
}
And you're done, no jquery no extra html elements!
Here is a working jsfiddle example: http://jsfiddle.net/e6j4Lbe1/

Here is my simple solution.
Put your iframe in a div with a class called "maps" for example.
This will be the CSS for your iframe
.maps iframe { pointer-events: none }
And here is a little javascript that will set the pointer-events property of the iframe to "auto" when you hover the div element for at least 1 second (works best for me - set it to whatever you like) and clears the timeout/set it to "none" again when the mouse leaves the element.
var maptimer;
$(".maps").hover(function(){
maptimer = setTimeout(function(){
$(".maps").find("iframe").css("pointer-events", "auto");
},1000);
},function(){
clearTimeout(maptimer);
$(".maps").find("iframe").css("pointer-events", "none");
});
Cheers.

I`ve created a very simple jQuery plugin to resolve the problem.
Check it at https://diazemiliano.github.io/googlemaps-scrollprevent
(function() {
$(function() {
$("#btn-start").click(function() {
$("iframe[src*='google.com/maps']").scrollprevent({
printLog: true
}).start();
return $("#btn-stop").click(function() {
return $("iframe[src*='google.com/maps']").scrollprevent().stop();
});
});
return $("#btn-start").trigger("click");
});
}).call(this);
Edit in JSFiddle Result JavaScript HTML CSS .embed-container {
position: relative !important;
padding-bottom: 56.25% !important;
height: 0 !important;
overflow: hidden !important;
max-width: 100% !important;
}
.embed-container iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
.mapscroll-wrap {
position: static !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/diazemiliano/googlemaps-scrollprevent/v.0.6.5/dist/googlemaps-scrollprevent.min.js"></script>
<div class="embed-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12087.746318586604!2d-71.64614110000001!3d-40.76341959999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9610bf42e48faa93%3A0x205ebc786470b636!2sVilla+la+Angostura%2C+Neuqu%C3%A9n!5e0!3m2!1ses-419!2sar!4v1425058155802"
width="400" height="300" frameborder="0" style="border:0"></iframe>
</div>
<p><a id="btn-start" href="#">"Start Scroll Prevent"</a> <a id="btn-stop" href="#">"Stop Scroll Prevent"</a>
</p>

Using answer from #nathanielperales i've added hover function cause for me it works better when user loses focus on map to stop scrolling again :)
$(function(){
$('.mapa').hover(function(){
stopScroll();},
function () {
$('.mapa iframe').css("pointer-events", "none");
});
});
function stopScroll(){
$('.mapa').click(function () {
$('.mapa iframe').css("pointer-events", "auto");
});
}

Variations on a theme: a simple solution with jQuery, no CSS editing needed.
// make iframe active on click, disable on mouseleave
$('iframe.google_map').each( function(i, iframe) {
$(iframe).parent().hover( // make inactive on hover
function() { $(iframe).css('pointer-events', 'none');
}).click( // activate on click
function() { $(iframe).css('pointer-events', 'auto');
}).trigger('mouseover'); // make it inactive by default as well
});
Hover listener is attached to the parent element, so if the current parent is bigger, you can just simply wrap the iframe with a div before the 3rd line.
Hope it'll be useful for somebody.

I stumbled upon this issue myself and used some of a mashup of two very useful answers on this question:
czerasz's answer and massa's answer.
They both have a lot of truth, but somewhere in my tests, I found out that one didn't work for mobile and had poor IE support (only works on IE11). This is the solution by nathanielperales, then extended by czerasz, which relies on pointer-events css and that doesn't work on mobile (there is no pointer in mobile) and it doesn't work on any version of IE that is not v11. Normally I wouldn't care less, but there are a ton of users out there and we want consistent functionality, so I went with the overlay solution, using a wrapper to make it easier to code.
So, my markup looks like this:
<div class="map embed-container">
<div id="map-notice" style="display: block;"> {Tell your users what to do!} </div>
<div class="map-overlay" style="display: block;"></div>
<iframe style="width:100%" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3785.684302567802!2d-66.15578327375803!3d18.40721382009222!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c036a35d02b013f%3A0x5962cad95b9ec7f8!2sPlaza+Del+Sol!5e0!3m2!1sen!2spr!4v1415284687548" width="633" height="461" frameborder="0"></iframe>
</div>
Then the styles are like this:
.map.embed-container {
position:relative;
}
.map.embed-container #map-notice{
position:absolute;
right:0;
top:0;
background-color:rgb(100,100,100);/*for old IE browsers with no support for rgba()*/
background-color: rgba(0,0,0,.50);
color: #ccc;
padding: 8px;
}
.map.embed-container .map-overlay{
height:100%;
width:100%;
position:absolute;
z-index:9999;
background-color:rgba(0,0,0,0.10);/*should be transparent but this will help you see where the overlay is going in relation with the markup*/
}
Lastly the script:
//using jquery...
var onMapMouseleaveHandler = function (event) {
$('#map-notice').fadeIn(500);
var elemento = $$(this);
elemento.on('click', onMapClickHandler);
elemento.off('mouseleave', onMapMouseleaveHandler);
$('.map-overlay').fadeIn(500);
}
var onMapClickHandler = function (event) {
$('#map-notice').fadeOut(500);
var elemento = $$(this);
elemento.off('click', onMapClickHandler);
$('.map-overlay').fadeOut(500);
elemento.on('mouseleave', onMapMouseleaveHandler);
}
$('.map.embed-container').on('click', onMapClickHandler);
I also added my tested solution in a GitHub gist, if you like to get stuff from there...

This is a solution with CSS and Javascript (ie. Jquery but works also with pure Javascript). At the same time the map is responsive. Avoid map to zoom when scrolling, but map can be activated by click in it.
HTML/JQuery Javascript
<div id="map" onclick="$('#googlemap').css('pointerEvents','auto'); return true;">
<iframe id="googlemap" src="http://your-embed-url" height="350"></iframe>
</div>
CSS
#map {
position: relative;
padding-bottom: 36%; /* 16:9 ratio for responsive */
height: 0;
overflow: hidden;
background:transparent; /* does the trick */
z-index:98; /* does the trick */
}
#map iframe {
pointer-events:none; /* does the trick */
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
z-index:97; /* does the trick */
}
Have fun !

In Google Maps v3 you can now disable scroll to zoom, which leads to a much better user experience. Other map functions will still work and you don't need extra divs. I also thought there should be some feedback for the user so they can see when scrolling is enabled, so I added a map border.
// map is the google maps object, '#map' is the jquery selector
preventAccidentalZoom(map, '#map');
// Disables and enables scroll to zoom as appropriate. Also
// gives the user a UI cue as to when scrolling is enabled.
function preventAccidentalZoom(map, mapSelector){
var mapElement = $(mapSelector);
// Disable the scroll wheel by default
map.setOptions({ scrollwheel: false })
// Enable scroll to zoom when there is a mouse down on the map.
// This allows for a click and drag to also enable the map
mapElement.on('mousedown', function () {
map.setOptions({ scrollwheel: true });
mapElement.css('border', '1px solid blue')
});
// Disable scroll to zoom when the mouse leaves the map.
mapElement.mouseleave(function () {
map.setOptions({ scrollwheel: false })
mapElement.css('border', 'none')
});
};

This will give you a responsive Google Map that will stop the scrolling on the iframe, but once clicked on will let you zoom.
Copy and paste this into your html but replace the iframe link with your own. He's an article on it with an example: Disable the mouse scroll wheel zoom on embedded Google Map iframes
<style>
.overlay {
background:transparent;
position:relative;
width:100%; /* your iframe width */
height:480px; /* your iframe height */
top:480px; /* your iframe height */
margin-top:-480px; /* your iframe height */
}
</style>
<div class="overlay" onClick="style.pointerEvents='none'"></div>
<iframe src="https://mapsengine.google.com/map/embed?mid=some_map_id" width="100%" height="480"></iframe>

Here would be my approach to this.
Pop this into my main.js or similar file:
// Create an array of styles.
var styles = [
{
stylers: [
{ saturation: -300 }
]
},{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ hue: "#16a085" },
{ visibility: 'simplified' }
]
},{
featureType: 'road',
elementType: 'labels',
stylers: [
{ visibility: 'off' }
]
}
],
// Lagitute and longitude for your location goes here
lat = -7.79722,
lng = 110.36880,
// Create a new StyledMapType object, passing it the array of styles,
// as well as the name to be displayed on the map type control.
customMap = new google.maps.StyledMapType(styles,
{name: 'Styled Map'}),
// Create a map object, and include the MapTypeId to add
// to the map type control.
mapOptions = {
zoom: 12,
scrollwheel: false,
center: new google.maps.LatLng( lat, lng ),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP],
}
},
map = new google.maps.Map(document.getElementById('map'), mapOptions),
myLatlng = new google.maps.LatLng( lat, lng ),
marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: "images/marker.png"
});
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('map_style', customMap);
map.setMapTypeId('map_style');
Then simply insert an empty div where you want the map to appear on your page.
<div id="map"></div>
You will obviously need to call in the Google Maps API as well. I simply created a file called mapi.js and threw it in my /js folder. This file needs to be called before the above javascript.
`window.google = window.google || {};
google.maps = google.maps || {};
(function() {
function getScript(src) {
document.write('<' + 'script src="' + src + '"' +
' type="text/javascript"><' + '/script>');
}
var modules = google.maps.modules = {};
google.maps.__gjsload__ = function(name, text) {
modules[name] = text;
};
google.maps.Load = function(apiLoad) {
delete google.maps.Load;
apiLoad([0.009999999776482582,[[["http://mt0.googleapis.com/vt?lyrs=m#228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=m#228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"m#228000000"],[["http://khm0.googleapis.com/kh?v=135\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=135\u0026hl=en-US\u0026"],null,null,null,1,"135"],[["http://mt0.googleapis.com/vt?lyrs=h#228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=h#228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"h#228000000"],[["http://mt0.googleapis.com/vt?lyrs=t#131,r#228000000\u0026src=api\u0026hl=en-US\u0026","http://mt1.googleapis.com/vt?lyrs=t#131,r#228000000\u0026src=api\u0026hl=en-US\u0026"],null,null,null,null,"t#131,r#228000000"],null,null,[["http://cbk0.googleapis.com/cbk?","http://cbk1.googleapis.com/cbk?"]],[["http://khm0.googleapis.com/kh?v=80\u0026hl=en-US\u0026","http://khm1.googleapis.com/kh?v=80\u0026hl=en-US\u0026"],null,null,null,null,"80"],[["http://mt0.googleapis.com/mapslt?hl=en-US\u0026","http://mt1.googleapis.com/mapslt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/ft?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/ft?hl=en-US\u0026"]],[["http://mt0.googleapis.com/vt?hl=en-US\u0026","http://mt1.googleapis.com/vt?hl=en-US\u0026"]],[["http://mt0.googleapis.com/mapslt/loom?hl=en-US\u0026","http://mt1.googleapis.com/mapslt/loom?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt?hl=en-US\u0026","https://mts1.googleapis.com/mapslt?hl=en-US\u0026"]],[["https://mts0.googleapis.com/mapslt/ft?hl=en-US\u0026","https://mts1.googleapis.com/mapslt/ft?hl=en-US\u0026"]]],["en-US","US",null,0,null,null,"http://maps.gstatic.com/mapfiles/","http://csi.gstatic.com","https://maps.googleapis.com","http://maps.googleapis.com"],["http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0","3.14.0"],[2635921922],1,null,null,null,null,0,"",null,null,0,"http://khm.googleapis.com/mz?v=135\u0026",null,"https://earthbuilder.googleapis.com","https://earthbuilder.googleapis.com",null,"http://mt.googleapis.com/vt/icon",[["http://mt0.googleapis.com/vt","http://mt1.googleapis.com/vt"],["https://mts0.googleapis.com/vt","https://mts1.googleapis.com/vt"],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],0],[null,[[0,"m",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[47],[37,[["smartmaps"]]]]],3],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],0],[null,[[0,"h",228000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[50],[37,[["smartmaps"]]]]],3],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],0],[null,[[4,"t",131],[0,"r",131000000]],[null,"en-US","US",null,18,null,null,null,null,null,null,[[5],[37,[["smartmaps"]]]]],3],[null,null,[null,"en-US","US",null,18],0],[null,null,[null,"en-US","US",null,18],3],[null,null,[null,"en-US","US",null,18],6],[null,null,[null,"en-US","US",null,18],0]]], loadScriptTime);
};
var loadScriptTime = (new Date).getTime();
getScript("http://maps.gstatic.com/intl/en_us/mapfiles/api-3/14/0/main.js");
})();`
When you call the mapi.js file be sure you pass it the sensor false attribute.
ie: <script type="text/javascript" src="js/mapi.js?sensor=false"></script>
The new version 3 of the API requires the inclusion of sensor for some reason. Make sure you include the mapi.js file before your main.js file.

For google maps v2 - GMap2:
ar map = new GMap2(document.getElementById("google_map"));
map.disableScrollWheelZoom();

if you have an iframe using Google map embedded API like this :
<iframe width="320" height="400" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>
you can add this css style: pointer-event:none;
ES.
<iframe width="320" height="400" frameborder="0" style="pointer-event:none;" src="https://www.google.com/maps/embed/v1/place?q=Cagli ... "></iframe>

Here's my take on the #nathanielperales answer extended by #chams, now extended again by me.
HTML
<div class='embed-container maps'>
<iframe width='600' height='450' frameborder='0' src='http://foo.com'></iframe>
</div>
jQuery
// we're doing so much with jQuery already, might as well set the initial state
$('.maps iframe').css("pointer-events", "none");
// as a safety, allow pointer events on click
$('.maps').click(function() {
$(this).find('iframe').css("pointer-events", "auto");
});
$('.maps').mouseleave(function() {
// set the default again on mouse out - disallow pointer events
$(this).find('iframe').css("pointer-events", "none");
// unset the comparison data so it doesn't effect things when you enter again
$(this).removeData('oldmousepos');
});
$('.maps').bind('mousemove', function(e){
$this = $(this);
// check the current mouse X position
$this.data('mousepos', e.pageX);
// set the comparison data if it's null or undefined
if ($this.data('oldmousepos') == null) {
$this.data('oldmousepos', $this.data('mousepos'));
}
setTimeout(function(){
// some left/right movement - allow pointer events
if ($this.data('oldmousepos') != $this.data('mousepos')) {
$this.find('iframe').css("pointer-events", "auto");
}
// set the compairison variable
$this.data('oldmousepos', $this.data('mousepos'));
}, 300);
console.log($this.data('oldmousepos')+ ' ' + $this.data('mousepos'));
});

The simplest one:
<div id="myIframe" style="width:640px; height:480px;">
<div style="background:transparent; position:absolute; z-index:1; width:100%; height:100%; cursor:pointer;" onClick="style.pointerEvents='none'"></div>
<iframe src="https://www.google.com/maps/d/embed?mid=XXXXXXXXXXXXXX" style="width:640px; height:480px;"></iframe>
</div>

This little free plugin can do it - https://mapcraftpro.com/

Here is my solution for the problem, I was building a WP site, so there is a little php code here. But the key is scrollwheel: false, in the map object.
function initMap() {
var uluru = {lat: <?php echo $latitude; ?>, lng: <?php echo $Longitude; ?>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
scrollwheel: false,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
Hope this will help.
Cheers

Center and enlarge google maps

This is the code:
#map_canvas {
height: 1000px;
text-align: center;
}
<div dojoType="dojox.mobile.ContentPane" style="overflow: auto;">
<div id="map_canvas"></div>
<!-- cambiare style -->
</div>
I tried to center with various css attributi but don't works.How i center and enlarge all map in panel?

You have to resize your map.
Try this
var mapOptions = {
center: new google.maps.LatLng(43.653226, -79.3831843),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$('#map-canvas').fadeIn('slow', function() {
google.maps.event.trigger(map, 'resize');
}

Anish's code is working for me. (minor fix: map-canvas -> map_canvas) The map fills the width of the page and is 1000px high.
Looking at the screenshot, your map is filling the width of the window. You can tell this because the map control is all the way to the right of the screen in the upper corner. But for some reason, the map isn't fetching the tiles that it needs to fill itself. This usually happens when the map container is resized without triggering the google map resize event. Are you creating the map before the dojo parser runs? I put Anish's code inside the ready() function in dojoInit() and the map fills the screen when it is shown.
Sizing google maps to fill available space (not using absolute height and width) is tricky, but usually the problem is the height, not the width. I've written a series of blog post on google maps in worklight here: http://www.ibm.com/developerworks/community/blogs/dhuyvett

How to disable mouse wheel zoom on Google streetview?

Consider the following example code:
http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
I can do scrollwheel: false on a mapOptions to disable mouse wheel zoom. The feature is not implemented on the streetview panoramaOptions.
In Chrome, I can safely disable mouse wheel zoom on the streetview simply by.
$('#pano *').bind('mousewheel', function(){
return false;
});
However this does not work in elsewhere. Please help me get it working in top 3-5 browsers?

There is now a confirmed feature request with Gmaps API issues http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557. Let's hope Google's engineers will look into it when they get trough more important bugs. I hate to hold my breath, but I'll park this for now.

According to Subgurim.net, this is how to do it;
[powerscript - other event]
CONSTANT integer WM_MOUSEWHEEL = 522
IF message.number = WM_MOUSEWHEEL AND & KeyDown (KeyControl!) THEN
message.processed = TRUE
RETURN 1
END IF
I realise that you are using Javascript, and this is a VB example, but hopefully it helps.

I use the below code to avoid double click zoom - pretty sure it could be adapted to scroll wheel zoom. zoom: 1 being my preferred zoom stage here, but could be anything.
$("#panorama").dblclick( function(){
panorama.setPov( {
heading: panorama.getPov().heading,
pitch: panorama.getPov().pitch, zoom: 1
});
});

There is an easy workaround: by adding a layer before the streetview with a higher z-index, you will prevent the zooming function of the Streetview.
<div id="panorama" style="position: absolute;left:0; top: 0;height: 100%; width: 100%; z-index: -1;opacity: 1"></div>
<div id="layerBeforePanorama" style="position: absolute;left:0; top: 0;height: 100%; width: 100%; z-index: 0;opacity: 1"></div>
<script>
var panoOptions = {
position: latlng,
pov: {
heading: 0,
pitch: 0
}
};
var pano = new google.maps.StreetViewPanorama(document.getElementById('panorama'), panoOptions);
</script>