Image enlarge on click and hotspots - javascript

I have a large map of the UK with multiple walking routes marked on. Currently the map is split into zones but walkers have asked to see the map as a whole so they can link routes together.
However, the routes then look very small. Is it possible to have a map with a clickable scale on one side that allows then to zoom into an area of the map. The map needs to be draggable and once zoomed in to still allow hotspotting. Is this possible?

You need to initialize the map with a init() function and pass necessary parameters that would enable controls like zoom and drag.
Add this code to your Google Map page.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {lat: -33, lng: 151},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN
]
}
});
}
For additional details, take a look at this official document.

Related

Google Maps - Disable map tiles and show only polygon shapes

Working with Google Maps V3 Api. This is a strange request, but i wondered if its possible to draw polygon shapes on the map canvas using LAT and LONG, but disable/hide the the map tiles within the canvas. So in short, id like to show JUST the shapes that are drawn on the map.
As per google maps docs you can do this when you initialize your map:
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.674, lng: -73.945},
zoom: 12,
styles: [
{elementType: 'all', stylers: [{visibility: 'off'}]},
]
});
This applies a custom style that hides everything on the map. You could then apply a style to your polygons to make them appear.
https://developers.google.com/maps/documentation/javascript/styling

Google Map cutting off

Can someone please help me with why the Google Map I have setup under "Project Portfolio" cuts itself off when you move around the map?
<div id="map-canvas" style="width: 100%; height: 500px;"></div>
var mapOptions = {
center: new google.maps.LatLng(45.398621, -75.737116),
zoom: 14,
scrollwheel: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
When the page loads, your javascript stops working because of errors.
The consequence of it is that the code supposed to retrieve map data is not executed.
By the way, you can read the following error :
You have included the Google Maps API multiple times on this page.
This may cause unexpected errors.
You might want to fix that.

Google Maps pan control does not display

I have a google maps with this options :
mapProp = {
center: new google.maps.LatLng(39.92553, 32.86628),
zoom: 6,
panControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapProp);
I want to this control :
I want to this control but not showing my map.
Or I want to journey with button on map.
Thank You.
Most likely your are using a version of Google Maps newer than 3.22.
After that version as stated in the release notes, the Pan Control is no longer available. To continue to use it you must request an earlier version.
The Pan control on the map is no longer available. To pan the view,
users click and drag, or swipe, the map. (Note that the Pan control in
Street View remains available.)
At the time of this answer we are at version 3.37and 3.22 is already retired.

Custom Google Maps

In my HTML page instead of using:
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(51.489021, -0.1164075),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: styles
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
I'd like to use a Custom Map I've created.
https://www.google.com/maps/d/edit?mid=zd34x9vOEi3A.kNJZAfpCCD80
But I don't want to embed the map into my page, I want to do the styling on the HTML page. Is this possible?
Well, depending on what kind of customizing you want to perform on your page, you can include the Google Maps JavaScript API 3 in your page. This will allow you various customization from adding custom markers, adding images, to calculating and drawing directions. There are even helpful examples, so I'd say it's a great start to add a custom google map to your html.

Zooming to center on a map in Google Maps API V3

I'm new to using google maps and am trying to find out how to restrict the zoom function so that it does not zoom anywhere except of the center of the map and not zoom to the mouse point. Basically it zooms to the center of the returned map no matter where your mouse pointer is on the map as opposed to zooming where the mouse pointer is located on the map. I don't even know if this is possible currently, some help would be appreciated.
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(51.285583, 1.091045);
var myOptions = {
zoom: 15,
center: latlng,
scrollwheel: true,
navigationControl: false,
mapTypeControl: false,
scaleControl: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.285826, 1.089973),
map: map,
title: 'Run of The Mill',
clickable: true
});
}
</script>
There are several zoom types:
using zoom control - that zooms to the center of the map
using scroll wheel - that zooms to the mouse pointer as you complain
using double click - that first centers the place under the mouse pointer and then zooms
So if you want only the first zoom type, you can disable the other two by setting disableDoubleClickZoom and scrollwheel map options to false.
Moreover, you might handle dblclick map event (scroll wheel event is not so straightforward, but maybe you'll find a way how to handle the scroll wheel in javascript too) and in this handler just change the map scale using map.setZoom(). The map center will stay the same. Fairly easy.
Or handle this by re-centering the map on zoom change. This preserves the expected functionality on double click and scroll wheel.
google.maps.event.addListener(map,'zoom_changed',function () {
map.setCenter(new google.maps.LatLng(47.61388802057299,-122.31870898147581));
})
From what I can see in your code you are zooming on the latlng variable that you declared above. That is correct. You myOptions variable is then passed into your new maps declaration. So you should be centered on 51.285583, 1.091045, which is Caterbury Kent in the UK.
If that is where your mouse is pointing it is working, if this doesn't help I would suggest copying an example from the google examples and cutting out what you don't need for your first demo.
http://code.google.com/apis/maps/documentation/javascript/examples/index.html

Categories