Im trying to add my map to my website, so far ive gotten it to show my map but its offset to the left by a few km
work in progress so far with markers off to the left: http://www.decking.co.il/indexwip.html#
my google maps site with the markers in the right place: http://goo.gl/maps/atvDH
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
</script> <script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(32.147711,34.972229);
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var ctaLayer = new google.maps.KmlLayer('https://maps.google.com/maps/ms?authuser=0&vps=2&ie=UTF8&msa=0&output=kml&msid=211701918214336350936.0004be32c642b750948e4',
{preserveViewport:true});
ctaLayer.setMap(map);
}
please can somebody tell me what im doing wrong? ive been searching all day for a solution, am I mixing the wrong commands? Have I over complicated it somewhere? I've seen theres a way to simply embed into a webpage but I dont know how to make that embed appear inside the box thats provided for it in the template I'm using
It doesn't look "off to the left" to me. It looks like you have a css conflict like that discussed here.
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
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.
I have the most basic google map embeded in my website and this is what I ended up with when I included google maps api in the and wrote this piece of code in the external script which I include in the after the google maps api:
I can't do anything with it (zoom in or out, move the view around with the mouse..) except for switching between map and satellite. When I paste the exact same code in the w3schools "Try it yourself" area, everything works fine.
JavaScript:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(45.1676, 14.7589),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map=new google.maps.Map(mapCanvas, mapOptions);
var marker=new google.maps.Marker({
position:myCenter,
animation:google.maps.Animation.BOUNCE
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
Don't know if it has to do anything with my css settings but I can't paste the code here cause it's quite large.
Thanks for any suggestions
If anyone wants to know the problem was that the parent div of the map was set to height: 100% and that is what caused that glitch to happen.
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.