I'm developing an iOS app using Dreamweaver 6 using the maps widget. So I've used customized the code in maps widget and dragged the code back to dreamweaver and it looks great it also looks consistently great across all browsers. BUT when I test my Dreamweaver html file in the iOS simulator, the pin location isn't centered. I have my code pasted below and would love some advice.
<div data-role="page" id="map">
<div data-role="header">
<h1>Map</h1>
<div id="mapCanvas" style="width:320px; height:460px; min-width:320px; min-height:460px"></div>
<script type="text/javascript">
// BeginOAWidget_Instance_2187524: #mapCanvas
// initialize the google Maps
function initializeGoogleMap() {
// set latitude and longitude to center the map around
var latlng = new google.maps.LatLng(43.22449,
-87.98523);
// set up the default options
var myOptions = {
zoom: 13,
center: latlng,
navigationControl: true,
navigationControlOptions:
{style: google.maps.NavigationControlStyle.DEFAULT,
position: google.maps.ControlPosition.TOP },
mapTypeControl: true,
mapTypeControlOptions:
{style: google.maps.MapTypeControlStyle.DEFAULT,
position: google.maps.ControlPosition.TOP_RIGHT },
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable: true,
disableDoubleClickZoom: false,
keyboardShortcuts: true
};
var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);
if (false) {
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
}
if (false) {
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
}
if (true) {
addMarker(map,43.22,-87.98523,"Community Park");
}
}
window.onload = initializeGoogleMap();
// Add a marker to the map at specified latitude and longitude with tooltip
function addMarker(map,lat,long,titleText) {
var markerLatlng = new google.maps.LatLng(lat,long);
var marker = new google.maps.Marker({
position: markerLatlng,
map: map,
title:"Community Park",
icon: ""});
}
// EndOAWidget_Instance_2187524
</script>
</div>
I see a redundant line break in your code for the variable definition of latlng.
Can you try removing that to see if that fixes the issue?
var latlng = new google.maps.LatLng(43.22449,
-87.98523);
Make it
var latlng = new google.maps.LatLng(43.22449, -87.98523);
I'm not sure if this is going to make a difference. But you cannot break your variable into two different lines unless you have a text content displayed there with a backslash break, not a line break in code.
Hi there
I'm testing on iphone 4 running iOS6 with and the code isn't loading the map functionality on the link below. What I'd like to see is all my park locations on one map. The map appears in a desktop browser but the map doesn't load at all on my iphone. Is this because with iOS you are forced to use the Apple Maps?: http://artichokemedia.com/pocketparks/#page4. Any input would be helpuful!
Almost there, but this map integration is driving me bonkers.
As far as what I've read because Apple has pulled the plug on Google Maps in iOS6, apps relying upon Google Maps API wont work the way they're supposed to.
However, here's a git that you could try in your scenario: https://github.com/mladjan/GoogleMapsOverlayiOS
Thanks for the link but I'm looking for a simple solution and not having any luck. As you know, all I'm doing is putting a pin on a map and that seems just about too much to ask for. Seems that a nice iOS maps widget on the Dw widget browser would help. Let me know if there are any other options I could try. I totally respect code but this is just insane for the little bit of functionality I'm trying to implement. (right?)
North America
Europe, Middle East and Africa
Asia Pacific