custom google map doesn't show place details in KMZ file - google-maps

I've a problem with my custom google map. It doesn't show street names .
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scrollwheel: true
}
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://128.199.209.42/klinkfiles/mlmsurvey.kmz'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
<body onload="initialize()">
<div id="google-map" class="google-map"></div>


If you want the street names on the map tiles, don't request the SATELLITE map type, you want HYBRID.
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID,
scrollwheel: true
}
code snippet:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(42.753633, 13.952404),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID,
scrollwheel: true
}
var map = new google.maps.Map(document.getElementById('google-map'), mapOptions);
var ctaLayer = new google.maps.KmlLayer({
url: 'http://128.199.209.42/klinkfiles/mlmsurvey.kmz'
});
ctaLayer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#google-map {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="google-map"></div>

Related

Google Maps API not popping up

So I have a website: terpconnect.umd.edu/~ybencheq and I basically wanted to feature a Google Maps at the bottom of my page. I generated an API key and I have it passed in the key parameter. The URL's in my credentials are: https://terpconnect.umd.edu/~ybencheq/, https://www.terpconnect.umd.edu/~ybencheq/, .terpconnect.umd.edu/ and none of these will work. I get the RefererNotAllowedMapError and sometimes I don't even get an error in my console; it just turns up blank on that part of the page).
Here's what I have:
<!-- Add Google Maps -->
<script>
function myMap()
{
myCenter=new google.maps.LatLng(38.9869, 76.9426);
var mapOptions= {
center:myCenter,
zoom:12, scrollwheel: false, draggable: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
And:
<script src="https://maps.googleapis.com/maps/api/js?key=[insertkeyhere]"
type="text/javascript"></script>

You need to call the myMap function somewhere. Either call it onload:
google.maps.event.addDomListener(window,'load',myMap);
Or in the call back of the API load:
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=myMap&key=[insertkeyhere]" type="text/javascript"></script>
(but not both)
proof of concept fiddle
code snippet:
function myMap() {
myCenter = new google.maps.LatLng(38.9869, 76.9426);
var mapOptions = {
center: myCenter,
zoom: 12,
scrollwheel: false,
draggable: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, "load", myMap);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

Google maps, changing the map on click - outside the map

I want to change the map (lat and lag) when a div (which is outside the map) is clicked.
I have got it working when the #map div is clicked, however any event outside the map does not get picked up.
This is what I have so far.
var map;
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 52.9722222,
lng: -3.1622222
},
disableDefaultUI: true,
zoom: 17,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map'
]
}
});
google.maps.event.addDomListener(mapDiv, 'click', function() {
window.alert('Map was clicked!');
});
var image = 'img/mapmarker.png';
//Associate the styled map with the MapTypeId and set it to display.
map.mapTypes.set('styled_map', styledMapType);
map.setMapTypeId('styled_map');
var marker = new google.maps.Marker({
position: {
lat: 52.9722222,
lng: -3.1622222
},
map: map,
icon: image,
});
}

The map variable that is being initialized is local to the initMap function. You need to initialize the global version:
var map;
function initMap() {
var mapDiv = document.getElementById('map');
// remove the var before map in this line:
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 52.9722222, lng: -3.1622222},
proof of concept fiddle
code snippet:
var map;
function initMap() {
var mapDiv = document.getElementById('map');
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 52.9722222,
lng: -3.1622222
},
disableDefaultUI: true,
zoom: 17,
mapTypeControlOptions: {
mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain',
'styled_map'
]
}
});
google.maps.event.addDomListener(mapDiv, 'click', function() {
window.alert('Map was clicked!');
});
var marker = new google.maps.Marker({
position: {
lat: 52.9722222,
lng: -3.1622222
},
map: map
});
}
google.maps.event.addDomListener(window, "load", initMap);
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="button" value="Click Me!" onclick="map.setCenter({lat:52.97,lng:-3.16});map.setZoom(15);" />
<div id="map"></div>

Add second marker on google maps javascript code

This is my code and i want to add a second marker on it. I'm not experienced on javascript and i couldn't figure out a way to do it. I'ld love some explain also!
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(XX.XXXXX, YY.YYYYYY),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(XX.XXXXX, YY.YYYYYY);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "'. $xmladd .'"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>

Duplicate the code for the first marker, changing the position appropriately.
code snippet:
html,
body,
#map-canvas {
height: 100%;
width: 100%;
}
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.7127837, -74.0059413),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
var myLatlng = new google.maps.LatLng(40.7127837, -74.0059413);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "'. $xmladd .'"
});
var myLatlng2 = new google.maps.LatLng(40.735657, -74.1723667);
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: "'. $xmladd2 .'"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>

Google Maps API v3 - Can't create position marker

Trying to do a simple position marker on a Google map imbed. Everything looks right, but not working.
<link rel="stylesheet" type="text/css" href="default.css"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322,-82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714,-82.9121331),
map: map
});
</script></head>
The map is loading fine, but no marker is found.

You need to create the marker inside the initialize function (where the map variable exists).
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322, -82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714, -82.9121331),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Yes, you need to initialize the marker object inside the initialize() method of the code. One way is how geocodezip has demoed. Here is one more way if you want to write modular code.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.0501322, -82.914233);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
GoldenGatePark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(GoldenGatePark);
}
</script>
Here you have added a marker in the TestMarker function and the TestMarker function is called in the initialize() method. You can just change the values of LatLng in the TestMarker function code.

Google maps myoptions will not work

I'm trying to customize a map of Mass..to show 10 districts. I've added the link to the map created in "my places", but I can't get the map to center, zoom or title.. The center LatLng is Worcester.. nothing works
Help !!
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dist-layer</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script>
function initialize() {
// var myLatlng = new google.maps.LatLng(42.268843,71.803774);
// zoomControl:false,
// zoom: 18,
// Title: "Mass Districts",
// center: myLatlng
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var mapOptions = {};
var kmlLayer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml? mid=zHTaYadv8Mrs.kHqpg6p0mrlk&lid=zHTaYadv8Mrs.khlpCJFyVigQ",
suppressInfoWindows: true,
Map:map
});
google.maps.event.addListener(kmlLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:40%; height:472px; float:left;"> </div>
<div id="content-window" style="min-width:15%; max-width:28%; height:430px; float:left; border: #0ff 5px double;padding: 10px;"> </div>
</body>
</html>

Set preserveViewport to true, otherwise the KmlLayer will zoom to fit its contents.
var kmlLayer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml?mid=zHTaYadv8Mrs.kHqpg6p0mrlk&lid=zHTaYadv8Mrs.khlpCJFyVigQ",
suppressInfoWindows: true,
preserveViewport:true,
map: map
});
function initialize() {
var myLatlng = new google.maps.LatLng(42.2625932, -71.8022934);
// zoomControl:false,
// zoom: 18,
// Title: "Mass Districts",
// center: myLatlng
var mapOptions = {
zoomControl: false,
zoom: 11,
title: "Mass Districts",
center: myLatlng
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlLayer = new google.maps.KmlLayer({
url: "http://mapsengine.google.com/map/kml?mid=zHTaYadv8Mrs.kHqpg6p0mrlk&lid=zHTaYadv8Mrs.khlpCJFyVigQ",
suppressInfoWindows: true,
preserveViewport:true,
map: map
});
google.maps.event.addListener(kmlLayer, 'click', function (kmlEvent) {
var text = kmlEvent.featureData.description;
showInContentWindow(text);
});
function showInContentWindow(text) {
var sidediv = document.getElementById('content-window');
sidediv.innerHTML = text;
}
}
google.maps.event.addDomListener(window, 'load', initialize);
fiddle