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.
Related
I'm new in the Google Maps API, I am trying to embed a marker with the address on google maps but I have errors.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map#map
I'm using this documentation and I have copied this code but it doesn't work properly because when you scroll the marker it's not fixed in the map but its move and doesn't stay in the correct place.
Also, the buttons in the left corner MAP and SATELLITE doesn't appear properly, they appear with a background line in the whole map and don't together smaller.
Finally, the + and - button doesn't appear.
Someone could tell me why I have all this problem?
Here is my code:
<script>
function initMap() {
var blitz8 = {lat: 45.806510, lng: 10.109520};
var map = new google.maps.Map(document.getElementById("map"), {
zoom: 18,
center: blitz8
});
var marker = new google.maps.Marker({
position: blitz8,
map: map
});
};
</script>
And here the Live Page:
https://sebalaini.github.io/Blitz8/
Hi I resolve that problem by disabled some css option in your base.scss please check and fix that, check my picture uploaded below
I am using the Google Maps API v3 in javascript, and I am constantly reloading the map with an app.get, and adding layers and bookmarks using mongodb. To erase everything I reload the map, and while it's loading a gray background displays in the div that contains the map.
What technique do you recommend so that the gray transition is not displayed, and the map is displayed all at once?
I'm reloading the map with the following code, within the function that does the reload; if I put this code outside of the function, the new elements that arrive will appear on top. This is why I do it this way.
var geocoder,map
geocoder = new google.maps.Geocoder();
var options = {
zoom: 5,
minZoom: 5,
center: new google.maps.LatLng(5.1573603, -74.982409),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
You can first set the visibility of the div which contains map to hidden; then listen to the first tilesloaded event, and set the visibility back to visible. Doing this the Maps should only pop up after all it tiles is loaded (so no gray screen)
Here is a quick demo which do just that:
http://jsfiddle.net/nq5t85sz/1/
I have a div with a google map inside but the map is not showing entirely.. just shows a part of the map and the other it's all grey and if i move the map with the cursor, the maps visual part moves fine but the size changes but not taking the entire div size.
This is the div and a snapshot:
<div style="height: 275px; width: 715px;" id="map_display"></div>
You need to trigger a resize event in Google maps like
google.maps.event.trigger(myMap, 'resize');
After initializing the Google maps
The answer provided Here may be of use to you, the problem is likely that the map has been loaded prior to the sizing of the div (is it perhaps dynamically sized?).
Loading the map after the rest of the page elements should help.
Working Fiddle
function InitializeMap() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_display"), myOptions);
}
$(document).ready(function () {
InitializeMap();
});
In google earth there is a nice feature where I can install a kml file and it loads it in such a way so that I toggle different layers. In google maps I am looking for a way to display the kml file in a similar way. I want to have a sidebar where I can choose which layers to display. I have found this:
http://www.dyasdesigns.com/geoxml/
but it looks like it only works with google maps v2. Is there anything similar that will work with v3?
I found this QA, but I'm looking for something to use with V3
EDIT more info:
My body:
<body onload='load()' style = "height:100%; margin:0">
<div id="map" style="width: 100%; height: 100%"></div>
<script type="text/javascript">
//************Function in head***************************************************
function load() {
var myOptions = {
//change this to zoom with markers
center: new google.maps.LatLng(60, 5),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"),myOptions);
ctaLayer = new google.maps.KmlLayer('http://thoughtfi.com/NPDsFactGlobe.kml');
ctaLayer.setMap(map);
}
//load();
var map;
var ctaLayer;
var markersArray = [];
var startformat;
var endformat;
</script>
</body>
a link to the site (may be up and down if Im working on it.): http://thoughtfi.com/KMLtries.html
A picture from google earth. I want the functionality of the folders in the left column: http://thoughtfi.com/desired_look.png
http://www.google.co.uk/search?q=google+maps+v3+kml+parser
Ross/Udell: http://code.google.com/p/geoxml3/
Lance Dyas's replacement for geoxml: http://code.google.com/p/geoxml-v3/
Others are probably available too.
Have you considered the google.maps.KmlLayerapi-doc class? It provides a way to load, display, and hide KML files using a standard in-library facility. An introductory tutorial on using the KmlLayer is provided in the KML and GeoRSS Layers section of the Developer's Guide.
I'm adding a map next to a form on my web page. The idea is that people can sign up, and when they type in their address and click search, it place-marks their house, they must do this before they submit the form (geolocation has a large role on my site).
Unfortunately, I have added the map, but within the map window the map itself appears to be offset. See the image below to illustrate what I mean:
I can only drag the map from within the "mapped" part of the box. If I select the grey area to drag the map around, it fails.
Any ideas what could cause this?
EDIT:
Here is my map-initialising Javascript, called on page load.
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(52.428385,-3.560257);
var myOptions = {
zoom: 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("adminMap"), myOptions);
Here is my map CSS
#adminMap{
float:left;
width:270px;
height:370px;
margin-left:20px;
}
Here is my map HTML
<div id="adminMap">
</div>
I've seen things similar to this. Without access to any code, my best bet is that the map is initialized at a time when the container div is hidden. I've seen that cause such symptoms. Try to set up your map as you're showing it, rather than before.
To render the map fully again on changing div visibility you can use this code.
google.maps.event.trigger(map, 'resize');
This will rerender your map inside the div and will display it fully.