I have two Google Maps setups on a site that I'm developing, and I want to apply custom markers to both of them. This is what I have written -
var coordinates_1 = new google.maps.LatLng(x, x);
var coordinates_2 = new google.maps.LatLng(x, x);
var map_1_options = {
zoom: 14,
center: coordinates_1,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map_2_options = {
zoom: 14,
center: coordinates_2,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var marker_1 = new google.maps.Marker({
position: coordinates_1,
map: map_1,
icon: '/images/marker.png'
});
var marker_2 = new google.maps.Marker({
position: coordinates_2,
map: map_2,
icon: '/images/marker.png'
});
var map_1 = new google.maps.Map(document.getElementById('location_1'), map_1_options);
var map_2 = new google.maps.Map(document.getElementById('location_2'), map_2_options);
I guess the script can be optimised but that's not the important issue here. What happens is I don't get any error messages (or missing images), and I get both maps displayed at their right location but no markers are showing. The images are 32x32px if that matters.
Any help would be appreciated.
You must first create map_1 and map_2 before you use them as map-property for the markers.
Related
in this code map and marker are working well, but marker position is not integrated with real time Geolocation and after marker appears if device replace hundred of meters it is not show moving.
initializeMap() {
var minZoomLevel=16
Geolocation.getCurrentPosition().then((position) => {
this.map = new google.maps.Map(document.getElementById('map_canvas'),
{
zoom: minZoomLevel,
center: new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
mapTypeControl: false,
streetViewControl: false,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(this.map);
this.Marker();
});
}
Marker(){
let image = 'assets/img/Untitled-1.png';
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.map.getCenter(),
// draggable: true,
icon: image
});
Here are the code i am using to get google Map, But i am a getting blank map on response.
function initialize(address) {
jQuery('#mapgoogle').show();
jQuery('#store_img_default').hide();
var myLatLng = new google.maps.LatLng( 50,50 ),
myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map( document.getElementById( 'mapgoogle' ), myOptions ),
marker = new google.maps.Marker( {position: myLatLng, map: map} );
marker.setMap( map );
moveMarker( map, marker,address );
}
Below is the Response from googleMap.
http://i.stack.imgur.com/pcf22.png
This code was fully working since last 6 months, and suddenly this creating issues. Any help in this will be highly appreciable.
I need to include pan effect and zoom effect without the help of control tools. The implementation in mobile and tablet so i dont need that tool bars instead of that touch zoom and drag panning effects are needed. Is it possible to implement ? Looking for suggestions
var myLatlng = new google.maps.LatLng(Lat, Long);
var myOptions = {
zoom: 10,
maxZoom : 24,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: false
}
Here is the code:
Just add disableDefaultUI: true
function initialize() {
var mapOptions = {
zoom: 10,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true, // <- this
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
Example
I have a page with a Google Map generated. I want to be able to use the address bar to change the zoom and center point. E. g.:
www.example.com/mymap?zoom=10¢er=10,15
www.example.com/mymap?zoom=10&lat=10&lng=15
I remember that there was a similar combination that worked, but now I can't get any results with it.
Here is my function:
function initialize() {
// create the map
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(10,15),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(8, 12),
new google.maps.LatLng(12, 18));
var options = {
bounds: defaultBounds
};
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
var infowindow = new google.maps.InfoWindow(
{ size: new google.maps.Size(150,50)});
Are you looking for something like this (translated to the Google Maps API v3 from Mike Williams' v2 tutorial):
http://www.geocodezip.com/v3_MW_example_linktothis.html?lat=42.359783&lng=-71.092800&zoom=18&type=h
How can I hide map types bar on Google Maps?
(hide Ter, and Earth on menu bar)
I create code from http://maps.google.com
I suggest you to look at this:
http://code.google.com/apis/maps/documentation/javascript/controls.html
Short:
mapTypeControl: false
this will hide map types bar.
or here is init function:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Vahagn's answer will completely hide the bar. But it's not clear from your question if this is what you want to do, or if you only want to hide just the options for Terrain and Earth. If the latter, you could try:
function initialize() {
var myOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.SATELLITE
]
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
Basically you need to set the property mapTypeControl to false like this:
mapTypeControl: true,
here is a live example of a page that offers customization with respect to look and feel.