Google Maps Custom Style won't work - javascript

I'm currently trying to customize Google Maps.
I styled my Map via the API (http://www.achimsagner.de/test/klysz/) but since I used the InfoBox my styles won't load. (http://www.achimsagner.de/test/gmaps_test.html)
I just can't find my mistake, maybe someone could help me.

Add the styles to your myMapOptions
var myMapOptions = {
zoom: 16,
center: secheltLoc,
styles : styles,
disableDefaultUI: true,
scrollwheel: false
}

The page that applies the style contains these lines that aren't present on the page that doesn't:
//Associate the styled map with the MapTypeId and set it to display.
theMap.mapTypes.set('map_style', styledMap);
theMap.setMapTypeId('map_style');
working example

Related

Display zoom slider in google maps

Is there a way to show zoom control slider in google maps using their API (like in this image I have taken today from maps.google.com)?
zoom slider control
I tried setting style: google.maps.ZoomControlStyle.LARGE in the init, but it doesnt work.
You can look at this simple example - there are only zoom buttons, but no slider
https://codepen.io/anon/pen/pNORgv
var mapOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
};
The old zoom control has been removed. If you want to include one you'll need to custom make it. I only skimmed over this blog post about how to make one but it seems pretty comprehensive.
Essentially you'll need to create a custom HTML element and tie functions to detect changes in the slider and emit those to the Google Map
I have heard about the talkings about new version of maps will have vertical zoom slider that they will re-implement the slider for next version. we will wait and see what will they do for that. If you had any information about this please inform us too.

Google Maps Controls panel size is displayed wrong

I have a weird problem with Google Maps Control.
I've tested in a blank page my custom maps with custom markers and everything seems to be ok, also with the control panel.
When I tried to import all my code in the page I'm working with ( I use a full screen fluid grid system ) the control panel is displayed with strange size.
I tried everything for disable/enable the ui of the Google Maps but the problem remain.
The code of my maps are exactly the same, both in my blank page and in my site, but in the site the ui control panel is displayed very strange.
Here's the code:
<div id="map_canvas2" style="height: 580px; width: 100%;"></div>
<script>
var image = 'path/to/your/image.png';
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(45.499290, 12.621510),
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false
}
var map = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions);
var myPos = new google.maps.LatLng(45.499290,12.621510);
var myMarker = new google.maps.Marker({position: myPos, map: map, icon: 'http://www.factory42.it/jtaca/wordpress/wp-content/uploads/2014/06/pin-map.png' });
</script>
</div>
Here's an img:
http://www.factory42.it/jtaca/wordpress/wp-content/uploads/2014/06/img-maps.png
there is a global rule on images style that is applied on your page
Are you including the same .css files ?
Is your page accessible online? Otherwise, you can inspect your image yourself from your favorite console debugger and see what styles are applied on it You can try removing them one by one to detect your problem

RotateControl not getting displayed in Google Maps

Here is the relevant code:
var map;
var chicago = new google.maps.LatLng(41.850033,-87.6500523);
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.SATELLITE,
panControl: true,
rotateControl: true,
rotateControlOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
center: chicago
}
map = new google.maps.Map(mapDiv, mapOptions);
I tried mapTypeId of HYBRID too. I tried disabling/enabling rotateControl, panControl, rotateControlOptions, etc. The Map shows with pancontrol but without rotate control. If relevant, here is the div markup:
<div id="map-canvas" style="position:absolute;top:50px;left:100px;width:800px;height:500px;
border:red 2px solid;-webkit-border-radius: 10px;-moz-border-radius:10px;
border-radius: 10px;"></div>
Included the styles inline here just for brevity in presenting the question.
If zoom doesn't help then enabling of rotateControl won't either if there is no 45° imagery for specific place.
rotateControl enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery. By default, the control's appearance is determined by the presence or absence of 45° imagery for the given map type at the current zoom and location. You may alter the control's behavior by setting the map's rotateControlOptions to specify the RotateControlOptions to use (though you cannot make the control appear if no 45° imagery is currently available).
Try with zoom:20.
You need to zoom to see your position closely. Then you'll see the Rotation Control

GoogleMap: move up TypeControl buttons from BOTTOM_CENTER position

I am using google map into my site, using Google Map Api.
At the position BOTTOM_CENTER are displayed the buttons used to switch from ROADMAP - SATELLITE - and a Custom style.
The question is: How can i move that buttons just some pixels up?
That position is what i need, i just would like to move a bit up the buttons, just some pixels, otherwise the TERRAIN and HYBRID options are not displayed.
If you need, this is the piece of code that manage the buttons:
var myMapOptions = {
zoom: 13,
center: point,
scrollwheel: false,
disableDefaultUI: true,
mapTypeControl: true,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.HYBRID,google.maps.MapTypeId.TERRAIN, 'CustomStyle'],
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
};
Thank you.
There is no implemented option to achieve it, but it seems that the Map-Type-Controls have a specific className, you may use this class to apply a custom format.
This works for me:
.gm-style-mtc{margin-bottom:20px !important}

Half grey google map while dynamically creating it for more then once with javascript live function

Our code starts with live function and whole page content is created by js live function,below code used for creating google maps within javascript code, for the first creation everything is fine (map seems correctly on screen) but after that time when google map is created again at the same page half of the map comes up and half is grey, that is our problem.
JQuery version 1.8.0
Bootstrap version 2.2.2
var idz = 'mapg';
tr.append($('<td>').append($('<div>', {
'id': idz,
'style': 'width: 100%; height: 300px'
})));
var latlng = new google.maps.LatLng(40.988921, 29.021326);
var options = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
rootMap = new google.maps.Map(document.getElementById(idz), options);
I would appreciate any help with this issue, thanks in advance.
I too had the same problem, I solved it by triggering the resize of Google maps.
Here is the below code:
google.maps.event.trigger(rootMap , 'resize'); //For v3
Add this after initializing the Google maps.
You can take a look at this SO Question.

Categories

Resources